cometphpJavaScript自学记载Ajax与Comet

xhr.open(method,url,false)method:get和posturl:要求的目标urlfalse/true:是否异步发送要求。

注：

1、如果url不是绝对路径，那么便是相对付当前页面。

2、open语句并不会急速发送要求，须要send()方法。

cometphpJavaScript自学记载Ajax与Comet PHP

3、只能向同一个域中利用相同端口和协议的URL发送要求。

要发送要求，须要再利用send方法：

xhr.send(null)

send方法的参数是指要发送的数据，如果没有的话须要写null。
一样平常get办法不传数据，post方法须要传送数据。

xhr收到相应后，会有下面这些属性：

status：http状态statusText：http状态的解释responseText：相应主体文本responseXML：如果相应的内容类型是”text/xml”或”application/xml”，个中将保存着相应数据的XML文档

接到相应后，首先检讨status，确定是否成功返回：

1、200相应成功；

2、304要求的资源没有被修正，可利用缓存内容；

可利用下面的代码检测相应状态：

xhr.open("get","example.txt",false);xhr.send(null);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：完成。
已收到全部相应数据

每次readyState的值变革一次，就会触发一次readystatechange事宜，以是可以在这个事宜来检讨readyState的值。

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); } }};

由于并不是所有浏览器都支持DOM2，以是采取DOM0级的方法来添加事宜处理程序。

21.1.2 HTTP头部信息

头部信息有以下内容：

Accept：浏览器能够处理的内容类型。
Accept-Charset：浏览器能够显示的字符集。
Accept-Encoding：浏览器能够处理的压缩编码。
Accept-Language：浏览器当前设置的措辞。
Connection：浏览器与做事器之间连接的类型。
Cookie：当前页面设置的任何Cookie。
Host：发出要求的页面所在的域。
Referer：发出要求的页面的URI。
把稳，HTTP规范将这个头部字段拼写错了，而为担保与规范同等，也只能将错就错了。
（这个英文单词的精确拼法该当是referrer。
）User-Agent：浏览器的用户代理字符串。

在open()方法之后，send()方法之前，通过调用setRequestHeader()可设置要求头：

xhr.setRequestHeader("Host","https://www.baidu.com");

利用getResponseHeader(“Host”)可以相应的值；

利用getAllResponseHeaders()可以得到一个包含所有头部信息的长字符串。

varmyHeader =xhr.getResponseHeader("Host");varallHeaders =xhr.getAllResponseHeaders();21.1.3 GET要求

GET要求是将查询字符串经由编码(encodeURIComponent)后拼接到URL后面的。

下面的函数的浸染是将查询字符串经由编码后拼接到URL后面：

// 对查询参数进行编码并拼接functionaddURLParam(url,name,value) { url += (url.indexOf("?") == -1 ?"?":"&"); url +=encodeURIComponent(name) +"="+encodeURIComponent(value);}

那么完全的要求如下：

varxhr=newXMLHttpRequest();xhr.onreadystatechange=function() {if(xhr.readyState== 4){if((xhr.status>= 200 &&xhr.status< 300) ||xhr.status== 304){varmyHeader =xhr.getResponseHeader("Host"); varallHeaders =xhr.getAllResponseHeaders(); }else{alert("Request was unsuccessful"+xhr.status); } }};xhr.open("get","example.html",true);xhr.setRequestHeader("Host","https://www.baidu.com");xhr.send(null);

注：我在页面上写了个按钮和div区域，点击按钮时想向某站发送要求，然后将相应写到div中，涌现了以下的缺点：

Refused to set unsafe header "User-Agent"

Access to XMLHttpRequest at 'file:///K:/%E….' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

我本来是打算利用js来像python那样实现爬取内容的，但创造弗成。

21.1.4 post要求

functionsubmitData() {varxhr = createXHR(); 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("post","postexample.php",true); xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");varform =document.getElementById("user-info"); xhr.send(serialize(form));}

post要求在open中的第一个参数是get，在send中是经由序列化的字符串，详细见serialize函数。

21.2 XMLHttpRequest 2级21.2.1 FormData

FormData类型可以方便的对数据进行序列化，这个紧张是用在post办法：

vardata =newFormData();data.append("name","伍德春");

也可以直接将form作为实例化的参数：

vardata =newFormData(document.forms[0]);

创建好data后，就可以将其作为send()方法的参数进行发送了。

xhr.send(newFormData(document.forms[0]));21.2.2 超时设定

在xhr.open与xhr.send之间，通过xhr.timeout = 1000来设定超时时间，通过xhr.ontimeout = function(){//超时处理代码};来作为超时处理程序。

21.2.3 overrideMimeType()

利用此方法可以担保把相应该作指定的类型来处理，方法须要在open与send之间

// 设置为XMLxhr.overrideMimeType("text/xml");21.3 进度事宜loadstart：在吸收到相应数据的第一个字节时触发。
progress：在吸收相应期间持续不断地触发。
error：在要求发生缺点时触发。
abort：在由于调用abort()方法而终止连接时触发。
load：在吸收到完全的相应数据时触发。
loadend：在通信完成或者触发error、abort 或load 事宜后触发。
21.3.2 progress事宜

可以利用progrss事宜动态的更新进度：

xhr.onprogress=function(event) {vardivStatus =document.getElementById("status");if(event.lengthComputable){ divStatus.innerHTML="已吸收"+ event.position+"/"+ event.totalSize +"字节"; }};

这个事宜处理程序的指定须要在xhr.open()方法之前。

21.4 跨源资源共享CORS(Cross-Origin Resource Sharing)

XHR工具只能访问与包含它的页面位于同一域中的资源。

xhr.setRequestHeader("Origin","https://www.baidu.com");

21.5 其他跨域技能21.5.1 图像ping21.5.2 JSONP

JSON with padding添补式JSON或参数式JSON，即在要求参数中指定回调函数。

21.5.3 Comet

Comet是一种做事器向页面推送数据的技能。
能够让信息近乎实时的推送到页面上，非常适宜处理体育比赛的分数和股票报价（也适宜公司车间展示信息）。

21.5.4 做事器发送事宜