9.ajax.md

• api：XMLHttpRequest对象

• 状态码

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

• 跨域：同源策略，跨域解决方案

  • 同源策略：ajax请求，浏览器要求当前页面和server必须同源
  • 同源：协议、域名、端口（默认80不写），三者必须一致
  • 无视同源：图片、css、js（如引用cdn的jq）
  • 所有的跨域必须经过server端的允许和配合
  • 解决方案
    • JSONP
      • 原理：利用<script>标签可以绕过跨域限制，访问一个跨域的url，与服务端统一好callback的名字，让服务端返回一段拼接的内容
      • 课外知识：访问某个url，服务器返回的可能是动态拼接的数据，而不是静态html，会根据不同用户做拼接，只要符合html格式
      • <script>可以绕过跨域限制
      • 服务器可以任意动态拼接数据返回
      • 因此，只要服务端愿意，就可以通过<script>获得跨域的数据
      • JQuery实现jsonp
        • dataType：jsonp
        • jsonpCallback：'callbackFn' // callback的函数命，这个需要跟后端提前说明，用于后端根据函数命返回对应数据
    • CORS
      纯服务端操作，设置一些属性，允许前端跨域某些网址

response.setHeader('Access-Control-Allow-Origin',"http://baidu.com")
response.setHeader('Access-Control-Allow-Headers',"X-Request-With")
response.setHeader('Access-Control-Allow-Methods',"PUT,POST,GET,DELETE,OPTIONS")
response.setHeader('Access-Control-Allow-Credentials',"true")

• ajax常用插件
  • jquery（callback形式）
  • fetch
  • axios 支持browser和node.js