ajax

Posted 2022-05-07 wangpeiyuan

ajax是无需刷新页面就能够从服务器获取数据的一种方法，负责ajax运作的核心对象是XMLHttpRequest,同源策略是对XHR的一个主要约束，它为通信设置了“相同域名，端口，协议”的限制

 一.XHR的用法

// 创建xml对象

var xhr = new XMLHttpRequest();

// 启动一个请求，false同步，true异步

xhr.open(methods, url, false);

// 发送请求,send()方法接收一个参数，即要作为请求主体发送的数据。如果不需要通过请求主体发送数据，则必须传入 null，因为这个参数对有些浏览器来说是必需的

xhr.send(null);

/*xml响应属性

responseText: 响应主体返回的文本

status: 响应的HTTP状态

statusText: HTTP状态说明

状态代码为 304 表示请求的资源并没有被修改，可以直接使用浏览器中缓存的版本；当然，也意味着响应是有效的

*/

// 同步响应

if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304)

alert(xhr.responseText);

else

alert("Request was unsuccessful: " + xhr.status);

/* 异步响应需要判断readyState 属性，该属性表示请求/响应过程的当前活动阶段

? 0：未初始化。尚未调用 open()方法。

? 1：启动。已经调用 open()方法，但尚未调用 send()方法。

? 2：发送。已经调用 send()方法，但尚未接收到响应。

? 3：接收。已经接收到部分响应数据。

? 4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了。*/

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function ()

if (xhr.readyState == 4)

if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304)

alert(xhr.responseText);

else

alert("Request was unsuccessful: " + xhr.status);

;

xhr.open("get", "example.txt", true);

xhr.setRequestHeader("MyHeader", "MyValue"); //设置请求头

xhr.send(null);

var myHeader = xhr.getResponseHeader("MyHeader"); //获取头部信息

var allHeaders = xhr.getAllResponseHeaders();

// 二.FormData 为序列化表单以及创建与表单格式相同的数据（用于通过 XHR 传输）提供了便利。下面的代码创建了一个 FormData 对象，并向其中添加了一些数据。

var data = new FormData();

data.append("name", "Nicholas");

// 使用 FormData 的方便之处体现在不必明确地在 XHR 对象上设置请求头部。XHR 对象能够识别传入的数据类型是 FormData 的实例，并配置适当的头部信息。

// 超时设定,IE8 为 XHR 对象添加了一个 timeout 属性，表示请求在等待响应多少毫秒之后就终止。在给timeout 设置一个数值后，如果在规定的时间内浏览器还没有接收到响应，那么就会触发 timeout 事件，进而会调用 ontimeout 事件处理程序。

xhr.timeout = 1000; //将超时设置为 1 秒钟（仅适用于 IE8+）

xhr.ontimeout = function ()

alert("Request did not return in a second.");

;

// 三.跨域处理

// 1.跨源资源共享:CORS 背后的基本思想，就是使用自定义的 HTTP 头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。

//Ie浏览器实现跨域需要创建 XDomainRequest对象，其他浏览器在尝试打开不同来源的资源时，无需额外编写代码就可以触发这个行为。要请求位于另一个域中的资源，使用标准的 XHR 对象并在 open()方法中传入绝对 URL 即可

/* 2.JSONP

JSONP 由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的JSON数据。

http://freegeoip.net/json/?callback=handleResponse; JSONP是通过动态script来使用的

function handleResponse(response)

alert("You’re at IP address " + response.ip + ", which is in " +

response.city + ", " + response.region_name);

var script = document.createElement("script");

script.src = "http://freegeoip.net/json/?callback=handleResponse";

document.body.insertBefore(script, document.body.firstChild);

缺点：JSONP 是从其他域中加载代码执行。如果其他域不安全，很可能会在响应中夹带一些恶意代码

要确定 JSONP 请求是否失败并不容易

*/

/*

3.Web Sockets

*/