-
XMLHttpRequest
这是 ajax 最基本的一个 API 对象，用于在后台与服务器交换数据。
下面是 ajax 的源码（原理框架），再复杂的也是以这个为基础的。
- var xhr = new XMLHttpRequest()
- xhr.open("GET", "/api", false)
- xhr.onreadystatechange = function () {
- if (xhr.readyState == 4) {
+ if (xhr..status == 200) {
- alert(xhr.responseText)
- }
- }
- }
+ xhr.send(null)
第一行：通过 XMLHttpRequest() 生成一个对象。
第二行：运行 open，传入形式、路径已经设定为异步。
第四行：判定对象的 readyState 是否为 4（完成）。
第五行：判定对象的 staus 是否为 200（返回成功）（由服务器返回）。
第六行：弹窗显示该对象从服务器那返回接收到的内容。
第十行：对象向服务器发送 null 。
第三至九行：
定义一个函数，由上设置，这是一个异步函数。
所以它并不会马上执行（都没还发送，它的就绪状态当然是不存在的），
当发送后， readyState 和 status 都会有所变化，从而触发函数运行。
-
readyState
（客户端的工作状态码）
- 0 —（未初始化）还没有调用 send() 方法
- 1 —（载入）已经调用 send() 方法，正在发送请求
- 2 —（载入完成）send() 方法执行返程，已经接收到全部响应内容
- 3 —（交互）正在解析接收到的响应内容
- 4 —（完成）响应内容解析完成，可以再客户端调用
-
status
（服务器返回的处理结果）
- 2xx — 表示成功处理请求，客户端可以使用，如 200
- 3xx — 需要重定向，浏览器收到信息后直接自己跳转
- 4xx — 客户端请求错误，如 404 就代表客户端请求的地址错误
- 5xx — 服务端错误，服务器的工作有错误，无法返回对应信息
-
跨域
-
浏览器有同源策略（出于安全），不允许 ajax 访问其他域接口
-
只要协议、域名、端口其中一个不同，都算作跨域
-
有三类标签允许跨域加载资源：
<img src=''>、<script src=''>、<link href=''>
-
-
应用场景
- <img> 用于打点统计，统计网站可能是其他域，通过请求数来实现统计。
- <link><script> 可以使用处于其他域的CDN。
- <script> 可以用于 JSONP（服务器把数据封装到函数内，浏览器通过 script 可跨域请求该 Js，然后解析函数得到数据，实现跨域请求数据）
另外还有一种实现跨域请求的方式，
就是服务器端通过设置，允许一些符合规定的请求获取到数据。
Wait me back
网友评论