[TOC]

ajax的核心API-XMLHttpRequest

 const xhr = new XMLHttpRequest()
 xhr.open('GET', '/data/test.json', true)
 xhr.onreadystatechange = function () {
     if (xhr.readyState === 4) {
         if (xhr.status === 200) {
              console.log(
                  JSON.parse(xhr.responseText)
              )
             alert(xhr.responseText)
         } else if (xhr.status === 404) {
             console.log('404 not found')
         }
     }
 }
 xhr.send(null)

xhr.readyState

  • 0:未初始化，还未调用send方法
  • 1:载入，已调用send方法，正发送请求
  • 2:载入完成, send方法执行完毕，已接收到全部响应内容
  • 3:交互，正在解析响应内容

  • 4:完成，响应内容解析完成，可以再客户端调用

    xhr.status

  • 2xx:请求成功，200

  • 3xx:重定向，301永久，302临时，304访问资源未发生变化(可使用缓存)
  • 4xx:客户端请求错误，404访问地址找不到，403无权限访问

  • 5xx:服务端错误

    跨域

    同源策略

  • ajax请求时,浏览器要求当前网页和server 必须同源(安全)

  • 同源:协议、域名、端口,三者必须一致
  • 前端:http://a.com:8080/ ; server : https://b.com/api/xxx（举例，这两个不同源）

只能访问同源URL,也就是域名相同、端口相同、协议相同。如果请求的URL与发送请求的页面在任何方面有所不同，则会抛出安全错误。

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

JS-Web-API-Ajax（跨域） - 图1

图片地址可以跨域。可用于统计打点，可使用第三方统计服务。

css地址可以跨域。可使用CDN ，CDN一般都是外域。

JS的地址可以跨域。可使用CDN ，CDN一般都是外域。可实现JSONP

跨域

  • 所有的跨域，都必须经过server端允许和配合

  • 未经server端允许就实现跨域，说明浏览器有漏洞，危险信号

    实现跨域的常见方式

    JSONP

    主要内容：