在上篇笔记中,我们主要谈了一些概述和跨域的题目,这一次我们聊聊请乞降相应的详细内容。
向服务器提议要求
我们在建立了XHR对象后,接着须要用两个要领来发送要求:open()和send(),这两个要领有点像竞走前的两个步骤:准备、跑。在open()中,并没有现实发送要求,只是一个“准备”行动,真正的发送要到send()中了。
open和send
open()能够通报三个参数:
- method:要求的范例,GET或POST之类;
- url:文件在服务器的位置;
- async:同步或是异步,默许异步,当挑选默许时,我们能够挑选不填这个参数。
send()的参数只需一个,是运用在post体式格局的要求中,以string的情势。
以下是一个例子:
xhr.open("GET","example.php",true);
xhr.send();
//post不须要通报参数;
xhr.open("POST","example.php",true);
xhr.send();
//post须要通报参数;
xhr.open("POST","example.php",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlcoded");
xhr.send("fname=henry&lname=ford")
get和post
get常用于查询数据,有时候,须要我们用某种指定的花样把参数追加到url的末端。假如花样不正确的话,会涌现毛病。
举一个例子:
xhr.open("get","example.php?name1=value1&name2=value2",true");
xhr.send();
post多用于向服务器提交应该被保留的数据。与get差别的是,post应该以发送的数据作为要求的主体。参数则不须要写在url里了,而是写在send里,在这里,能够通报XML DOM文档也能够通报字符串。固然,要注意的是,假如只是简朴的,没有数据通报的POST要求,那末和GET要求一样,在send()中不须要增加什么。假如须要POST数据,我么要用setRequestHeader()
来增加HTTP头,然后在send()顶用参数的情势增加数据通报。
HTTP头部信息
每一个HTTP要求都带有头信息,所以我们发送一个AJAX要求时,现实上也会发送相干的头信息。默许情况下,以下的头信息会被发送出去:
- Accept;
- Accept-Charset;
- Accept-Ending;
- Accept-Language;
- Connection;
- Cookie;
- Host;
- Refer;
- User-Agent;
运用setRequestHeader()
能够设置自定义的头信息。这个要领吸收两个参数:头部字段的称号和值。比方:
xhr.setRequestHeader("Content-type","application/x-www-form-urlcoded");
xhr.setRequestHeader("MyHeader","MyValue");
要注意的是:setRequestHeader
要领须要在open()和send()中心设置,如许才胜利发送要求的头部信息。
服务器相应
当我们发送要求后,一切顺遂,服务器也顺遂发回了相应,那末我们要怎样来猎取这些相应呢?
responseText和responseXML
这是猎取两种差别花样的相应,esponseText
是字符串情势,responseXML
则是XML情势。
举一个例子:
var xhr;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
document.getElementById("myDiv").innerHTML=xhr.responseText;
}
}
xhr.open("get","example.php",true);
xhr.send();
就是如许。
XHR 2级
XHR的生长也促使W3C动手制订越发完美的2级范例。在这套范例里,有一些内容须要相识。
FormData
为了完成表单数据的序列化,在Web运用中更轻易地传输数据,2级范例定义了FormData范例。
下面是一个建立FormData实例的例子:
<form id="myForm" action="" method="post">
<input type="text" name="name">名字
<input type="password" name="psw">暗码
<input type="submit" value="提交">
</form>
var data=new FormData();
//直接增加键值对
data.append("nama","Mike");
//经由过程向组织函数中传入表单元素也可
//这是一个表单元素
var form=document.getElementById("myForm");
//传入
var data=new FormData(form);
xhr.send(data);
//猎取
var name=data.get("name");
var psw=data.get("psw");
建立了FormData的实例后,能够直接传到send中。
关于更细致的FormData学问,请参考这篇文章:
体系进修前端之FormData详解 – 前端与生涯 – SegmentFault
超时设置
最早是IE8为XHR增加了timeout属性,厥后被XHR 2级范例收入。
当给timeout设置了数值后,划定时间内没有相应,就会触发timoeout事宜,进而挪用ontimeout。
这是一个例子:
var xhr;
...
xhr.open("get","example.php",true);
xhr.timeout=1000;
xhr.ontimeout=function(){
alert("Request is not return in a second"
};
xhr.send();
进度事宜
XHR 2的进度事宜定义了XHR在要求的差别阶段触发差别的事宜,详细的有6个事宜:
- loadstart;
- progress;
- error;
- abort;
- load;
- loadend;
每一个浏览器所支撑的事宜不完全雷同,比方IE8就支撑load事宜。有了这些差别的事宜支撑,开发者能够免除搜检readyState之类的事情,越发的轻易。
个中load事宜和progress事宜比较主要。load事宜会在吸收到完全的相应数据时触发,因而我们就不须要再搜检readyState属性了,只需确保XHR的status为200就能够了。
而progress事宜则会为XHR在浏览器吸收数据时期周期性地触发。在触发时,它会额外埠供应三个属性:
- lengthComputable;示意进度信息是不是可用
- position;示意已吸收的字节数
- totalSize;示意相应头肯定的预期字节数
有了这些信息,我们能够制造一个进度指示器:
var xhr=createXHR();
xhr.onload=function(event){
...
}
xhr.onprogress=function(event){
var divStatus=document.getElementById("status");
if(event.lengthCoputable){
divStatus.innerHTML="Reiceived"+event.position+"of"+event.totalSize+"bytes";
}
};
这里要注意的是:必须在挪用open()要领之前增加progress事宜处置惩罚顺序。