JS-Web-API-Ajax

JS-Web-API-Ajax

//get请求
    const xhr = new XMLHttpRequest()
    xhr.open('GET','url',true)
    xhr.onreadystatechange=function (){
      if(xhr.readyState===4){
        if(xhr.status===200){
          alert(xhr.responseText)
        }else {
          console.log('其他情况');
        }
      }
    }
    xhr.send(null)
    
    
//post请求
    const xhr = new XMLHttpRequest()
    xhr.open('POST','url',true)
    xhr.onreadystatechange=function (){
      if(xhr.readyState===4){
        if(xhr.status===200){
          alert(xhr.responseText)
        }else {
          console.log('其他情况');
        }
      }
    }
    const obj={
      username:'zhangsan',
      password:"123455"
    }
    xhr.send(JSON.stringify(obj))
  }

xrh.readyState(状态码)

0(初始化)还未调用send方法
1(载入)已调用send方法，正在发送请求
2(载入完成)send方法执行完成，已经接收到全部响应内容
3(交互)正在解析响应内容
4(完成)响应内容解析完成，可以在客户端调用

xhr.status

200--表示成功处理请求
300--需要重定向，浏览器直接跳转，比如301，302，303
400--客户端请求错误，比如404，405
500--服务端错误

同源策略

同源：协议、域名、端口，三者都一致
前端：http://localhost:8000/ 后端：https://juejin.cn:8000/editor 
(三者都不一致)

解决：

1.js css可以无视同源策略
 <img src="跨域图片地址" /> 可用于统计打点，第三方统计服务
 <link  href="跨域css地址"/> 可使用cdn，cdn一般是跨域
 <script src="跨域js地址"></script> 可实现jsonp
 
2.跨域
 所有的跨域要经过server端的允许和配合
 未经过server端就实现了跨域，说明浏览器有漏洞，危险信号
 
3.Josnp
script可以绕过跨域，服务器可以任意动态拼接数据返回，所以可以获得跨域的数据，只要服务器同意返回

4.cors--服务器设置http header
 response.setHeader("Access-Control-Allow-Origin","https://juejin.cn")
 

手写一个ajax

function ajax (url) {
      const p = new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest()
        xhr.open('GET', url, true)
        xhr.onreadystatechange = function () {
          console.log(xhr, "xhr.readyStat");
          if (xhr.readyState === 4) {
            if (xhr.status === 200) {
              resolve(JSON.parse(xhr.responseText))
            } else if (xhr.status === 404) {
              reject(new Error('404 not found'))
            }
          }
        }
        xhr.send(null)
      })
      return p
    }
    const url = "https://juejin.cn"
    ajax(url).then(res => console.log(res)).catch(error => console.log(error))

ajax相关插件

1.jQuery.ajax()

2.Fetch
https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch

请注意，fetch 规范与 jQuery.ajax() 主要有三种方式的不同：

• 当接收到一个代表错误的 HTTP 状态码时，从 fetch() 返回的 Promise 不会被标记为 reject，  即使响应的 HTTP 状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （但是会将 resolve 的返回值的 ok 属性设置为 false ），仅当网络故障时或请求被阻止时，才会标记为 reject。
• fetch() 可以不会接受跨域 cookies； 你也可以不能使用 fetch() 建立起跨域会话。其他网站的 Set-Cookie 头部字段将会被无视。
• fetch 不会发送 cookies。除非你使用了credentials 的初始化选项。（自 2017 年 8 月 25 日以后，默认的 credentials 政策变更为 same-origin。Firefox 也在 61.0b13 版本中进行了修改）