Ajax高级笔记 JavaScript高级程序设计笔记

Ajax通信与数据格式无关,从服务器获取的数据不一定是XML数据。

Ajax的核心:XMLHttpRequest对象(简称XHR)

在XHR对象之前,Ajax通信通常使用hack手段,如使用隐藏的或内嵌的框架。

XHR对象为向服务器发送信息和解析服务器响应提供了流畅的接口。

1.XMLHttpRequest对象

IE5是第一款引进XHR对象的浏览器,通过MSXML库中的ActiveX对象实现(有3个版本)。

  兼容所有浏览器,创建XHR对象:

function createXHR(){ if (typeof XMLHttpRequest != "undefined"){ return new XMLHttpRequest(); } else if (typeof ActiveXObject != "undefined"){ if (typeof arguments.callee.activeXString != "string"){ var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"], i, len; for (i=0,len=versions.length; i < len; i++){ try { new ActiveXObject(versions[i]); arguments.callee.activeXString = versions[i]; break; } catch (ex){ //skip } } } return new ActiveXObject(arguments.callee.activeXString); } else { throw new Error("No XHR object available."); } }

之后就能在所有浏览器创建XHR对象:var xhr = createrXHR();

2.原生XHR对象 (支持的浏览器: IE7+、FF、Chrome、Opera、Safari)

通过XMLHttpRequest构建函数,创建XHR对象:

var xhr = new XMLHttpRequest();

3.XHR用法

3-1.open()

open() 3个参数: 发送的类型、请求的URL、表是否异步的布尔值

xhr.open("get","example.php", false);

①URl为相对于执行代码的当前页,或绝对地址;

②false为同步,JavaScript代码会在服务器响应后再继续执行;

③调用open()只是启动一个请求以备发送,还没真正发送;

④只能在同个域中使用相同端口和协议的URL发送请求。

3-2.send()

send() 1个参数: 请求主体发送的数据,不需要通过请求主体发送数据则传入null。

调用send()后,请求被分派到服务器。

xhr.open("get","example.php", false) ; xhr.send(null);

3-3. 收到响应后,响应数据会自动填充XHR对象的属性:

responseText:作为响应的主体被返回的文本;

responseXML:若响应的内容类型”text/xml”或”application/xml”,此属性保存响应数据XML DOM文档

status:响应的HTTP状态;

statusText:HTTP状态的说明。

☆:无论什么内容类型,响应主体的内容都会保存在responseText属性中。对于非XML数据,responseXML属性值为null。
3-4.status属性确认响应是否成功返回

HTTP状态代码:

200:响应有效,responseText属性已就绪,内容类型正确下的responseXML也可访问。

304:响应有效,只是请求的资源并为修改,可直接使用浏览器中缓存的版本。

正确检查上述2种状态代码:

status判断

if ((xhr.status >= 200 && xhr.status <=300) || xhr.status == 304) { alert(xhr.responseText); } else { alert("Request was unsuccessful:" + xhr.status); };

3-5.readystate属性

该属性存储 请求/响应过程的 当前活动状态。

0 : 未初始化,未调用open();
1 : 启动,调用了open();
2 : 发送,调用了send(),未接受响应;
3 : 接受,已接受部分响应;
4 : 完成,已接受全部响应,且可在客户端使用。

3-6.readystatechange事件

该事件,在readystate属性值改变时触发。

readystatechange事件句柄

var xhr = createXHR(); xhr.onreadystatechange = function(event){ 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.send(null);

①必须在调用open()之前知道readystatechange事件的事件处理程序,确保兼容。

②该事件处理程序中没有传递event对象,必须通过XHR对象本地来确定下一步怎么做;

③使用xhr对象而不使用this对象,是因为onreadystatechange事件处理程序的作用域问题。使用this对象在一些浏览器会导致函数执行失败或发生错误。

3-7.abort()

调用此方法可取消异步请求:xhr.abort();

调用后,xhr对象停止触发事件,不允许访问如何与响应相关的属性;

终止请求后,应对XHR对象进行解引用操作,不建议重用XHR对象。

4、HTTP头部信息

发送请求时的头部信息:

Accept:浏览器能够处理的内容类型

Accept-Charset:浏览器能够显示的字符集

Accept-Encoding:浏览器能够处理的压缩编码

Axxept-Language:浏览器当前设置的语言

Connection:浏览器与服务器之间连接的类型

Cookie:当前页面设置的如何Cookie

Host:发送请求耳洞页面所在域

Referer:发出请求的页面的URI

User-Agent:浏览器的用户代理字符串

setRequestHeader()

设置自定义头部信息。

2个参数:头部字段名称、头部信息值。

需在open()方法之后调用send()之前调用setRequestHeader(),才能成功发送请求头部信息。

自定义HTTP头部信息

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wyfsxx.html