【前端面试指南】JS-8-Web-API-Ajax

【前端学习指南】JS-Web-API-Ajax

1. XMLHttpRequest

   // get 请求
   const xhr = new XMLHttpRequest()
   xhr.open("GET", "/api/data.json", true) // true 指函数异步执行
   xhr.onreadystatechange = function () {
       if (xhr.readyState === 4) {
         console.log('请求完成')
           if (xhr.status === 200) {
             console.log('请求成功')
               // console.log(JSON.parse(xhr.responseText))
               alert(xhr.responseText)
           }
       }
   }
   xhr.send(null)
   

   // post 请求
   const xhr = new XMLHttpRequest()
   xhr.open("POST", "/login", false)  // false 指函数同步执行
   xhr.onreadystatechange = function () {
       if (xhr.readyState === 4) {
           if (xhr.status === 200) {
               alert(xhr.responseText)
           }
       }
   }
   const postData = {
       username: "zhangsan",
       password: "123456"
   }
   xhr.send(JSON.stringify(postData))
   

   function ajax (url) {
       const p = new Promise((resolve, reject) => {
           const xhr = new XMLHttpRequest()
           xhr.open('GET', url, true)
           xhr.onreadystatechange = function () {
               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 = '/api/data1.json'
   ajax(url)
       .then(res => console.log(res))
       .catch(err => console.error(err))
   

   //极简版
   const xhr = new XMLHttpRequest()
   xhr.open('GET', '/api/data1.json')
   xhr.onload = () => { console.log('请求成功') }
   xhr.send()
   

2. 状态码

   1. xhr.readyState
      • 0 - (未初始化)还没有调用send()方法
      • 1 - (载入)已调用send()方法，正在发送请求
      • 2 - (载入完成) send()方法执行完成，已经接收到全部响应内容
      • 3 - (交互)正在解析响应内容
      • 4 - (完成)响应内容解析完成，可以在客户端调用
   2. xhr.status
      • 2xx - 表示成功处理请求，如200
      • 3xx - 需要重定向,浏览器直接跳转，如301 302 304
      • 4xx - 客户端请求错误,如404 403
      • 5xx - 服务器端错误

3. ajax常用插件

   1. jQuery
   2. fetch
   3. axios

4. 跨域：

   1. 同源策略
      1. ajax请求时，浏览器要求当前网页和 server 必须同源(安全)
      2. 同源：协议、域名、端口，三者必须一致。
      3. 加载图片、CSS、JS可无视同源策略
         1. < img src=跨域的图片地址/>
         2. < link href=跨域的css地址/>
         3. < script src=跨域的js地址>< /script>
      4. 同源策略应用
         1. < img /> 可用于统计打点，可使用第三方统计服务。
         2. < link /> < script> 可使用CDN，CDN一般都是外域。
         3. < script>可实现JSONP。
   2. 跨域
      1. 所有的跨域，都必须经过server端允许和配合
      2. 未经server端允许就实现跨域，说明浏览器有漏洞，危险信号。
   3. JSONP
   5. CORS (服务端支持)