Shulou(Shulou.com)06/03 Report--

This article shares with you the content of sample analysis of Ajax and JavaScript. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Ajax communication is independent of data format, and the data obtained from the server is not necessarily XML data.

The core of Ajax: XMLHttpRequest object (XHR for short)

Before XHR objects, Ajax communication usually uses hack means, such as using hidden or embedded frames.

The XHR object provides a smooth interface for sending information to the server and parsing the server response.

1.XMLHttpRequest object

IE5 is the first browser to introduce XHR objects, implemented through the ActiveX object in the MSXML library (there are 3 versions).

Compatible with all browsers, create XHR objects:

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

< 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 >

& 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头部信息 var xhr = createXHR(); xhr.onreadystatechange = function(){ if (xhr.readyState == 4){ if ((xhr.status >

& & xhr.status

< 300) || xhr.status == 304){ alert(xhr.responseText); } else { alert("Request was unsuccessful: " + xhr.status); } }};xhr.open("get", "example.php", true);xhr.setRequestHeader("MyHeader", "MyValue");xhr.send(null); getRequestHeader() 获取指定的相应头部信息 xhr.getRequestHeader("MyHeader");getAllRequestHeader() 获取一个包含所有头部信息的长字符串 xhr.getAllRequestHeader(); 5、GET请求 　　对于XHR对象，位于opne()的URL末尾的查询字符串 需经过编码，使用encodeURIComponent()编码。 　　名-值对需用和号(&)分隔。 　　自定义函数，添加URL查询字符串参数： function addURLParam(url,name,value){ url += (url.indexOf('?') == -1?'?':'&'); url += encodeURIComponent(name) + '=' + encodeURIComponent(value); return url;} 6、POST请求 　　长用于想服务器发送要保存的数据。 　　由于XHR其初的设计是为了处理XML，故在send(0中可传入XHR DOM文档。 6-1.服务端读取POST数据 　　①默认情况下，服务器对POST请求和提交Web表单不会一视同仁，故服务端需要程序来读取发送的原始数据，并解析出有用部分。 　　②XHR模拟表单提交： 　　　　1.将Content-Type头部信息设置为application/x-www-form-urlencoded (即表单提交时的内容问题)； 　　　　2.以适当格式创建一个字符串。(通过serialize()函数创建该字符串，序列化表单数据) XHR模拟表单提交 function submitData(){ var xhr = createXHR(); xhr.onreadystatechange = function(event){ if (xhr.readyState == 4){ if ((xhr.status >

& & xhr.status

< 300) || xhr.status == 304){ alert(xhr.responseText); } else { alert("Request was unsuccessful: " + 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(serialize(form));} 7、CORS 跨源资源共享（IE8+、FF、Chrome....） 　　跨域安全策略限制了Ajax的异步通信，CORS则是定义了跨域时，客户端和服务器的沟通。 　　CORS思想：使用自定义HTTP头部让浏览器与服务器进行沟通，从而决定请求/响应的成功与否。 7-1.给一个请求附加Origin头部，包含请求页面的源信息(协议、域名 和 端口) Origin: http://www.domain.com 服务器根据Origin判断是否接收请求，接收则在Access-Control-Allow-Origin头部会发相同信息。 　　　　（若是公共资源，可以回发"*"） Access-Control-Allow-Origin: http://www.domain.com 若无此头部或头部信息不匹配，浏览器将驳回请求。 ☆请求和响应不会包含cookie信息。 7-2.IE8+对CORS的实现 　　IE8引入的XDR(XDomainRequest)类型，类型XHR，可实现安全可靠的跨域通信。 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头部）就会触发error事件，但该事件无有用信息，需要自定义一个onerror事件句柄。 obload事件-onerror事件 var xdr = new XDomainRequest();xdr.onload = function(){ alert(xdr.responseText);};xdr.onerror = function(){ alert("Error!");};xdr.open("get", "http://www.somewhere-else.com/xdr.php");xdr.send(null); 在请求返回前调用abort()可终止请求。 7-2-3.XDR也支持timeout属性及ontiomout事件处理程序，在运行超过timeout设定的秒数后，调用ontimeout事件句柄。 　　为支持POST请求，XDR提供了contentType属性，用于表示发送数据的格式。 　　　　contentType属性是XDR对象影响头部信息的唯一方式。 xdr.contentType = "application/x-www-form-urlencoded"; 7-3其他浏览器对CORS的实现 　　FF等浏览器都通过XMLHttpRequest对象实现了对CORS的原生支持。要请求另一个域中的资源时，使用标准XHR对象并在open()中传入绝对URL即可。 标准XHR的跨域 var xhr = createXHR(); xhr.onreadystatechange = function(){ if (xhr.readyState == 4){ if ((xhr.status >

& & xhr.status

< 300) || xhr.status == 304){ alert(xhr.responseText); } else { alert("Request was unsuccessful: " + xhr.status); } }};xhr.open("get", "http://www.abc.com/page/", true);xhr.send(null); 与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跨域兼容 function createCORSRequest(method, url){ var xhr = new XMLHttpRequest(); if ("withCredentials" in xhr){ xhr.open(method, url, true); } else if (typeof XDomainRequest != "undefined"){ xhr = new XDomainRequest(); xhr.open(method, url); } else { xhr = null; } return xhr;}var request = createCORSRequest("get", "http://www.somewhere-else.com/xdr.php");if (request){ request.onload = function(){ //do something with request.responseText }; request.send();} 上述createCORSRequest()函数返回的对象的属性(XHR和XDR的共同属性)： 　　①abort()：停止正在进行的请求； 　　②onerror：用于替代onreadystatechange检测错误； 　　③onload：用于代替onreadystatechange检测成功； 　　④responseText：用于取得响应内容； 　　⑤send()：用于发送请求。 8、其他跨域技术 　　在CORS出现前，常利用DOM中能够执行跨域请求的功能，在不依赖XHR对象时，也能发送某种请求。 　　与COSR不同的是，不用修改服务器代码。 8-1.图像Ping 　　使用

Tags, which can load images from any web page, are often the only way for online ads to track views.

Images can be created dynamically, using their onload and onerror event handlers to determine whether a response has been received.

Var img = new Image (); img.onload = img.onerror = function () {alert ("Done!");}; img.src = "http://www.example.com/test?name=Nicholas";

Image Ping is a way of simple, one-way cross-domain communication with the server. The requested data is sent in the form of a query string, and the response can be anything, usually a pixel map or a 204 response. Although the browser cannot get any specific data through the image Ping, you can find the time when the response was received by listening for load and error events.

Image Ping is often used to track the number of times a user clicks on a page or a dynamic ad is exposed.

Cons: ① can only send GET requests; ② cannot access the server response text.

8-2.JSONP

JSONP (JSON width Padding) populated JSON or parametric JSON, similar to JSON, is the JSON included in the function call:

Callback ({"name": "value"})

8-2-1.JSONP has two parts: callback function and data

Callback function: the function that should be called on the page when the response arrives. The name of the callback function is specified in the request.

Data: the JSON data passed in the callback function.

8-2-2.JSONP specifies a cross-domain URL for its src attribute through dynamic elements. Similar

Element, that is, resources can be loaded across domains without restrictions.

JSONP is valid JavaScript code that executes as soon as the request completes and the JSONP response is loaded on the page.

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)

HeadleResponse () is a callback function that will be executed after the response arrives.

8-2-3.JSONP is popular because:

① can access the response text directly

② supports two-way communication between the browser and the server.

Deficiency:

① JSONP loads code for execution from other domains, so the domain must be secure and reliable

It is difficult for ② to ensure that the JSONP request fails.

8-3Comet "server push" [incompatible with IE]

Ajax requests data from the page to the server, Comet means that the server pushes data to the page, and Comet can push information to the page in near real time.

8-3-1. Two ways to implement Comet: long polling and streaming

① long polling: as opposed to short polling, the page sends a request, and the server keeps the connection open until it sends data to the page when it is available. After receiving the data, the browser closes the connection and randomly sends a new request, which cycles during the opening of the page.

[short polling is when the server sends data immediately, and even if the data is invalid, long polling waits for a response. ]

The advantage of polling is that all browsers support it. This is done through the XHR object and setTimeout ().

② HTTP stream: it uses only one HTTP connection throughout the life cycle of a web page. The browser sends a request, the server keeps the connection open, and then periodically sends data to the browser.

PHP example

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.