阿·贾克斯（Ajax）

阿·贾克斯（Ajax）

重要对象

XMLHttpRequest

  • 在不重新加载页面的情况下更新网页
  • 在页面已加载后从服务器请求数据
  • 在页面已加载后从服务器接收数据
  • 在后台向服务器发送数据

发送相关请求

GET、POST……

设置相关参数

setRequestHeader();

服务端响应JSON数据

1
XMLHttpRequest.responseType = 'json';//将响应体的信息指定为json

请求超时与网络异常处理

  1. 设置它请求超时的时间

XMLHttpRequest.timeout = [时间：毫秒]

  1. 绑定事件句柄ontimeout

    xhr.ontimeout = function(){};

取消请求

要使用到它的一个方法：abort()

请求重复发送

核心：需要一个标识变量（isSending）来标记请求是否正在发送

部分代码：

1
2
3
4
5
6
7
let isSending = false;
if(isSending){xhr.abort()};
xhr.onreadystatechange = function(){
                if (xhr.readyState == 4) {
                    document.getElementById("result").innerHTML = xhr.responseText;
                }
            }

利用jQuery发送Ajax请求

1
$.get(url,[待发送的参数],[载入成功的回调函数],[设置响应体的类型]);

同源策略（same-origin-policy）

是浏览器的安全策略

同源：协议、域名、端口号必须完全相同

JSONP

Jsonp(JSON with Padding) 是 json 的一种”使用模式”，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

值得注意的是