ajax 基础

2022-02-27 17:11:57

手写ajax

function ajax(url){
  const p = new Promise(resolve,reject)=>{
  const xhr=XMLHttpRequest();
  xhr.open(‘GET‘, url, true);
  xhr.onreadystatechange=function(){
    ir(xhr.readystate === 4){
      if(xhr.status === 200){
        resolve(JSON.parse(xhr.responseText))
      }else if(xhr.statue === 404){
        reject(new Error(‘404 not found‘))
      }
    }
  }
  xhr.send(null)
  }
  return p;
}

ajax(‘/data/test.json‘)
  .then(res=>console.log(res))
  .catch(err=>{console.log(err)})

现有技术：
- jQuery 比较老、不支持promise异步
- fetch 浏览器未全部兼容，400、500返回值也不会reject，比较麻烦；不会从服务端发送或接受任何cookies，站点依赖session会导致未经认证的请求，要发送cookies必须设置credentials选项；
- axios 支持promis、浏览器、node.js，也是用的XMLHttpRequest api；支持promise；

跨域

原因：ajax请求时，_浏览器_要求当前网页和server必须同源（协议https/http、域名、端口，三者一致），为了安全
加载图片、css、js不受同源策略限制
可用于统计打点，即第三方统计服务，如站长之家
<script /> 可实现JSONP

<img src=xxImg />  // 服务器可以做防盗链，判断是否是白名单内的域名请求，不是的话返回报错即可
<link href=xx.css /> // 如：在线cdn等
<script src=xx.js /> // 如：在线cdn等

所有的跨域，必须经过server端允许和配合，否则说明浏览器有漏洞，很危险，易被此浏览器攻击
JSONP

<body>
  <script>
    window.callback = function(data){
      console.log(data)
    }
  </script>
  <script src="http://xx?8990/xx?username=xx&callback=callback"
</body>

CORS // 服务器设置http header

XMLHttpRequest

// get 请求
const xhr = new XMLHttpRequest()
xhr.open("GET", "/api",true) // 第三个参数true为异步，false为同步
xhr.onreadystatechange = function(){
// 这里的函数异步执行，类似img.onload
  if(xhr.readyState === 4 ){
    if(xhr.status === 200){
      alert(xhr.responseText)
    }
  }else{
    console.log(‘其他情况‘)
  }
}
xhr.send(null) // get请求不需要发送数据，xhr发送数据只能发送字符串；通过JSON.stringify(data)转一下就可以了

状态码(xhr.status)

2xx: 成功处理请求
3xx：需要重定向，浏览器会直接自动跳转
- 301：永久重定向（不多见）
- 302：临时重定向（浏览器自动跳到重定向的位置，下次还是跳正常的位置）
- 304：资源未改变（未更新），浏览器会使用自身缓存数据
4xx: 客户端请求错误
- 404：请求地址错误
- 403：缺少相关权限（管理系统多见，未登陆等）
5xx：服务器端错误、后端代码出错等

ajax 基础

码农公寓

相关文章