第十二章-ajax及跨域

题目

• 手写一个简易的ajax
• 跨域的常用实现方式

知识点

• XMLHttpRequest
• 状态码
• 跨域：同源策略，跨域解决方案

ajax核心API-XMLHttpRequest

手写原生Ajax请求

// get 请求
// 初始化ajax实例
const xhr = new XMLHttpRequest()
// true 表示异步请求, false 表示同步请求
xhr.open('GET', '/api', true)
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      alert(xhr.responseText)
    } else {
      console.log('其他情况')
    }
  }
}
xhr.send(null)


// post 请求
// 初始化ajax实例
const xhr = new XMLHttpRequest()
// true 表示异步请求
xhr.open('POST', '/api', true)
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      alert(xhr.responseText)
    } else {
      console.log('其他情况')
    }
  }
}
const postData = {
  userName: 'zhangsan',
  password: '123456'
}

xhr.send(JSON.stringify(postData))

xhr.readyState 取值含义

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

只有在 readyState 的值为 4 的时候才能拿到 responseText 并使用

xhr.status 取值

• 2xx - 表示成功处理请求，如 200
• 3xx - 需要重定向，浏览器直接跳转，如 301 302 304
• 4xx - 客户端请求错误，如404（资源未找到） 403（没有权限）
• 5xx - 服务器端错误

跨域

什么是同源策略(浏览器中)？

• Ajax 请求时，浏览器要求当前网页和 server 必须同源（保证安全）
• 同源： 协议、域名、端口，三者必须一致。
• 前端：http://a.com:8080/; server: https://b.com/api/xxx; 两者不同源

加载图片 css js 可以无视同源策略

• 如果引用的图片网站做了图片的防盗链，那么浏览器就无法加载这个图片

• jQuery 实现 ajax跨域

  $.ajax({
    url: 'http://localhost:8081/jsonp.js',
    dataType: 'jsonp',
    jsonpCallback: 'callback',
    success: function (data) {
      console.log(data)
    }
  })
  

  CORS-服务器设置 http header

  CORS跨域是通过后端实现的，如果后端设置了CORS跨域，那么浏览器就可以直接请求

  手写简易ajax请求

  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 && xhr.status === 200) {
  		resolve(JSON.parse(xhr.responseText))
        } else {
          reject(new Error('error'))
        }
      }
      xhr.send(null)
    })
    return p
  }
  
  const url = '/data/test.json'
  ajax(url)
  .then(res => {console.log(res)})
  .catch(err => {console.log(err)})
  

  实际中常用的ajax插件：jquery使用ajax；fetch(兼容性不好)；axios(多用于框架中)