本文主要介绍Ajax高级笔记，JavaScript高级编程笔记，有需要的朋友可以参考一下。

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

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

在XHR对象之前，Ajax通信通常使用黑客手段，比如使用隐藏或嵌入式框架。

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

1.XMLHttpRequest对象

IE5是第一个引入XHR对象的浏览器，该对象由MSXML库中的ActiveX对象实现(有3个版本)。

兼容所有浏览器，创建XHR对象：

函数createXHR(){

if (typeof XMLHttpRequest！='未定义'){

返回新的XMLHttpRequest()；

} else if(ActiveX object的类型！='未定义'){

if(type of arguments . callee . ActiveX string！='string'){

var versions=['MSXML2。XMLHttp.6.0 '，' MSXML2。XMLHttp.3.0 '，

MSXML2。XMLHttp']，

我，len

for (i=0，len=versions.length我leni ){

尝试{

新的ActiveXObject(版本[I])；

arguments . callee . ActiveX string=versions[I]；

打破；

} catch (ex){

//跳过

}

}

}

返回新的ActiveX object(arguments . callee . ActiveX string)；

}否则{

抛出新错误(没有可用的XHR对象));

}

}

然后就可以在所有浏览器中创建XHR对象了：var xhr=createrXHR()；

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

通过XMLHttpRequest构造函数创建XHR对象：

var xhr=new XMLHttpRequest()；

3.XHR用法

3-1 .打开()

Open() 3参数：发送的类型，请求的URL，表是否异步的布尔值。

xhr.open('get '，' example.php '，false)；

URl是相对于执行代码的当前页面，或者是绝对地址；

对于同步，JavaScript代码将在服务器响应后继续执行；

调用open()只是启动了一个发送请求，但还没有真正发送；

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

3-2 .发送()

Send() 1参数：请求体发送的数据；如果不需要通过请求体发送数据，它将为null。

调用send()后，请求被分派给服务器。

xhr.open('get '，' example.php '，false)；

xhr.send(空)；

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

ResponseText:作为响应主体返回的文本；

ResponseXML:如果响应的内容类型是“text/xml”或“application/xml”，则该属性保存响应数据XML DOM文档。

Status:响应的HTTP状态；

status text:HTTP状态的描述。

:无论内容类型是什么，响应正文的内容都将保存在responseText属性中。对于非XML数据，responseXML属性值为null。

3-4.status属性确认响应是否成功返回。

HTTP状态代码：

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

04:响应是有效的，只是请求的资源和修改，您可以直接使用浏览器中的缓存版本。

正确检查以上两个状态代码：

地位判断

if((xhr . status=200 xhr . status=300)| | xhr . status==304){

alert(xhr . responsetext)；

}否则{

alert('请求不成功：' xhr . status ')；

};

3-5.readystate属性

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

0:未初始化，不调用open()；

1: start，调用open()；

2: send，调用了send()，但没有接受响应；

3:已接受，部分响应已接受；

4:完成，所有响应都已被接受，可以在客户端使用。

3-6.readystatechange事件

当readystate属性的值更改时，将触发此事件。

readystatechange事件的句柄

var xhr=create xhr()；

xhr . onreadystatechange=function(event){

if (xhr.readyState==4){

if((xhr . status=200 xhr . status 300)| | xhr . status==304){

alert(xhr . responsetext)；

}否则{

alert('请求不成功：' xhr . status ')；

}

}

};

xhr.open('get '，' example.txt '，true)；

xhr.send(空)；

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

事件处理程序中没有传入事件对象，需要通过本地的XHR对象来确定下一步做什么；

由于onreadystatechange事件处理程序的作用域，所以使用xhr对象代替此对象。在某些浏览器中使用该对象会导致函数执行失败或出错。

3-7 .中止()

调用此方法取消异步请求：xhr . abort()；

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

请求终止后，应该取消对XHR对象的引用。不建议重用XHR对象。

4、HTTP头部信息

发送时的标题信息：

接受：浏览器可以处理的内容类型。

Accept-Charset:浏览器可以显示的字符集。

Accept-Encoding:浏览器可以处理的压缩编码。

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

连接：浏览器和服务器之间的连接类型

Cookie:如何在当前页面设置cookie？

主机：请求穿耳页面所在的域。

Referer:发出请求的页面的URI。

用户代理：浏览器的用户代理字符串。

setRequestHeader()

设置自定义标题信息。

两个参数：标题字段名称和标题信息值。

需要在open()方法之后和send()之前调用SetRequestHeader()，以成功发送请求头信息。

自定义HTTP标头信息

var xhr=create xhr()；

xhr . onreadystatechange=function(){

if (xhr.readyState==4){

if((xhr . status=200 xhr . status 300)| | xhr . status==304){

alert(xhr . responsetext)；

}否则{

alert('请求不成功：' xhr . status ')；

}

}

};

xhr.open('get '，' example.php '，true)；

xhr.setRequestHeader('MyHeader '，' my value ')；

xhr.send(空)；

getRequestHeader()

获取指定的相应标头信息。

xhr . getrequestheader(" my header ")；

getAllRequestHeader()

获取一个包含所有头信息的长字符串。

xhr . getallrequestheader()；

5.获取请求

对于XHR对象，需要对opne()的URL末尾的查询字符串进行编码，并用encodeURIComponent()进行编码。

名称-值对应该用&符号()分隔。

自定义函数，添加URL查询字符串参数：

函数addURLParam(url，名称，值){

url=(url.indexOf('？'))==-1?'?':'');

URL=encodeURIComponent(name)'=' encodeURIComponent(value)；

返回url

}

6、POST请求

用于将待保存的数据发送到服务器。

由于XHR最初是为处理XML而设计的，所以XHR DOM文档可以传递到send(0)中。

6-1.服务器读取发布数据

默认情况下，服务器不会平等对待POST请求和提交的Web表单，所以服务器需要一个程序来读取发送的原始数据并解析出有用的部分。

XHR模拟表单提交：

1.将Content-Type头信息设置为application/x-www-form-urlencoded(即表单提交时的内容问题)；

2.以适当的格式创建一个字符串。(通过serialize()函数创建字符串来序列化表单数据)

XHR模拟表单提交

函数submitData(){

var xhr=create xhr()；

xhr . onreadystatechange=function(event){

if (xhr.readyState==4){

if((xhr . status=200 xhr . status 300)| | xhr . status==304){

alert(xhr . responsetext)；

}否则{

alert('请求不成功：' xhr . status ')；

}

}

};

xhr.open('post '，' postexample.php '，true)；

xhr . setrequestheader(' Content-Type '，' application/x-www-form-urlencoded ')；

var form=document . getelementbyid(' user-info ')；

xhr.send(序列化(form))；

}

7、CORS 跨源资源共享（IE8+、FF、Chrome....）

跨域安全策略限制了Ajax的异步通信，而CORS定义了跨域时客户端和服务器端的通信。

CORS的想法：使用自定义的HTTP头让浏览器与服务器通信，从而决定请求/响应的成功。

7-1.将包含所请求页面的源信息(协议、域名和端口)的Origin头附加到请求中。

产地：http://www.domain.com

服务器根据Origin判断是否接收请求，收到请求时会在Access-Control-Allow-Origin头中发送相同的信息。

(如果是公共资源，可以回贴' * ')

访问控制允许原产地：http://www.domain.com

如果没有这样的头或头信息不匹配，浏览器将拒绝请求。

请求和响应将不包含cookie信息。

7-2.CORS的IE8实施

XHR E8推出的XDR(XDomainRequest)类型，可以实现安全可靠的跨域通信。

7-2-1.XDR和XHR的区别：

cookie不会随请求一起发送，也不会随响应一起返回；

只能设置请求头信息中的Content-Type字段；

无法访问响应头信息；

仅支持GET和POST请求

XDR缓解了CSRF(跨站点请求伪造)和XSS(跨站点脚本)问题。

被请求的资源可以通过判断用户代理、源页面等如何来确定是否设置Access-Control-Allow-Origin头部。数据。

7-2-2.XDR使用类似于XHR的方法。创建XDomainRequest的实例，调用open()，然后调用send()。

XDR只能执行异步请求，所以open()方法只有两个参数，请求的类型和URL。

收到响应后，只能访问响应的原文，无法确定响应的状态码。

只要响应有效，就会触发load事件，响应的数据会保存在responseText属性中。

如果失败(例如，响应中缺少Access-Control-Allow-Origin标头)，将会触发错误事件，但该事件没有有用的信息，因此需要自定义一个onerror事件句柄。

obload事件-onerror事件

var XDR=new XDomainRequest()；

xdr.onload=function(){

alert(XDR . responsetext)；

};

xdr.onerror=function(){

alert('错误！');

};

xdr.open('get '，' http://www . somewhere-else . com/XDR . PHP ')；

xdr.send(空)；

在请求返回之前调用abort()来终止请求。

7-2-3.XDR还支持timeout属性和ontimeout事件处理程序，并在运行超过超时设置的秒数后调用ontimeout事件处理程序。

为了支持POST请求，XDR提供了contentType属性，用于指示发送数据的格式。

ContentType属性是XDR对象影响标头信息的唯一方式。

XDR . content type=' application/x-www-form-urlencoded '；

7-3通过其他浏览器实现CORS

FF等浏览器通过XMLHttpRequest对象实现了对CORS的原生支持。要请求另一个域中的资源，请使用标准的XHR对象，并在open()中传递绝对URL。

标准XHR的跨域

var xhr=create xhr()；

xhr . onreadystatechange=function(){

if (xhr.readyState==4){

if((xhr . status=200 xhr . status 300)| | xhr . status==304){

alert(xhr . responsetext)；

}否则{

alert('请求不成功：' xhr . status ')；

}

}

};

xhr.open('get '，' http://www.abc.com/page/'，true)；

xhr.send(空)；

与IE不同，跨域XHR对象可以访问status属性和statusText属性，还可以同步请求。

7-3-1.对跨域XHR的限制：

不能使用setRequestHeader()设置自定义页眉；

无法发送和接收cookie；

调用getAllResponseHeader()方法总是返回空字符串。

7-3-2.同源请求和跨域请求都使用相同的接口，所以本地资源最好使用相对URL，远程资源最好使用绝对URL。

这可以消除模糊性，并避免诸如限制访问头或本地cookie信息之类的问题。

7-4.跨浏览器CORS(IE8，FF等。)

检查XHR是否支持CORS的方法：检查withCredentials属性是否存在，检查XDomainRequest对象是否组合存在。

CORS跨域兼容性

函数createCORSRequest(方法，url){

var xhr=new XMLHttpRequest()；

if(xhr中的“with credentials ”){

xhr.open(方法，url，true)；

} else if (typeof XDomainRequest！='未定义'){

xhr=new XDomainRequest()；

xhr.open(方法，URL)；

}否则{

xhr=null

}

返回xhr

}

var request=createCORSRequest(' get '，' http://www . something-else . com/XDR . PHP ')；

如果(请求){

request.onload=function(){

//用request.responseText做点什么

};

request . send()；

}

上述createCORSRequest()函数返回的对象的属性(XHR和XDR的公共属性):

abort():停止正在进行的请求；

onerror:用于替换onreadystatechange检测错误；

onload:用于替换onreadystatechange，检测成功；

responseText:用于获取响应内容；

send():用于发送请求。

8、其他跨域技术

在CORS出现之前，经常使用DOM可以执行跨域请求的功能，不依赖XHR对象就可以发送某种请求。

与COSR不同，不需要修改服务器代码。

8-1.图像Ping

使用img标签，因为图像可以从任何网页加载，所以它通常是在线广告跟踪页面浏览量的唯一方法。

可以动态创建图像，并且可以使用它们的onload和onerror事件句柄来确定是否收到了响应。

var img=new Image()；

img . onload=img . on error=function(){

alert('完成！');

};

img . src=' http://www . example . com/test？name=Nicholas '；

Ping是一种简单的与服务器的单向跨域通信。请求的数据以查询字符串的形式发送，响应可以是任何内容，通常是像素图或204响应。虽然浏览器不能通过image Ping得到任何具体的数据，但是可以通过监听load和error事件找到收到响应的时间。

图像Ping通常用于跟踪用户点击页面的次数或动态广告曝光。

缺点：只能发送GET请求；无法访问服务器响应文本。

8-2.JSONP

JSONP(JSON宽度填充)填充JSON或参数化JSON，类似于JSON，是函数调用中包含的JSON:

回调({ ' name ':' value ' })；

8-2-1.JSONP有两部分：回调函数和数据。

回调函数：响应到达时应该在页面中调用的函数。请求中指定了回调函数的名称。

Data:传递给回调函数的JSON数据。

8-2-2.JSONP通过动态脚本元素为其src属性指定一个跨域URL。与img元素类似，资源可以不受限制地跨域加载。

JSONP是一个有效的JavaScript代码，一旦请求完成，即在页面上加载JSONP响应，就会立即执行。

函数handleResponse(response){

alert('您位于IP地址' response.ip '，该地址在' response.city '，' response.region_name '中)；

}

var script=document . createelement(' script ')；

script . src=' http://freegeoip . net/JSON/？callback=handle response '；

document . body . insert before(script，document . body . first child)；

HeadleResponse()是一个回调函数，将在响应到达后执行。

8-2-3.JSONP受欢迎是因为：

可以直接访问响应文本；

支持浏览器和服务器双向通信。

不足：

JSONP从其他域加载代码执行，所以这个域必须安全可靠；

JSONP请求是否失败很难保证。

8-3Comet“服务器推送”[不兼容的IE]

Ajax从页面向服务器请求数据，而Comet意味着服务器将数据推送到页面。Comet可以近乎实时地将信息推送到页面。

8-3-1.实现Comet的两种方法：长轮询和流式传输

长轮询：与短轮询相反，页面发送请求，服务器保持连接打开，直到有数据发送。浏览器收到数据后，关闭连接，随机发送一个新的请求，在页面打开过程中依次类推。

【短轮询是指服务器立即发送数据，即使数据无效，长轮询是指等待发送响应。】

轮询的好处是所有浏览器都支持它。由XHR对象和setTimeout()实现。

HTTP流：在网页的整个生命周期中只使用一个HTTP连接。浏览器发送请求，服务器保持连接打开，然后定期向浏览器发送数据。

PHP示例

？服务器端编程语言（Professional Hypertext Preprocessor的缩写）

$ I=0；

while (true) {

//输出一些数据，然后刷新输出缓存

echo '号码是$ 1 '；

flush()；

//等待几秒钟

睡眠(10)；

$ ;

}

.

HTTP streaming的关键：所有服务器端语言都支持打印到输出缓存再刷新的功能。(将输出缓存中的所有内容一次发送到客户端)

使用XHR实现HTTP流的典型示例

var xhr=new XMLHttpRequest()，

收到=0；

xhr.open('get '，url，true)；

xhr . onreadystatechange=function(){

var结果；

if (xhr.readyState==3){

//仅获取新数据并调整计数器

result=xhr . responsetext . substring(已接收)；

已接收=result.length

//调用进度回调

进度(结果)；

} else if (xhr.readyState==4){

已完成(xhr . responsetext)；

}

};

xhr.send(空)；

返回xhr

}

var client=createsreamingclient(' streaming . PHP '，function(data){

警报(“已接收：”数据)；

}，函数(数据){

alert('完成！');

});

以上是我们小编辑器分享的ajax高级笔记的相关内容，对于学习Ajax的朋友应该是一个很好的入门讲解。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。