AJAX的进修笔记(二)

在上篇笔记中,我们主要谈了一些概述和跨域的题目,这一次我们聊聊请乞降相应的详细内容。

向服务器提议要求

我们在建立了XHR对象后,接着须要用两个要领来发送要求:open()和send(),这两个要领有点像竞走前的两个步骤:准备、跑。在open()中,并没有现实发送要求,只是一个“准备”行动,真正的发送要到send()中了。

open和send

open()能够通报三个参数:

  1. method:要求的范例,GET或POST之类;
  2. url:文件在服务器的位置;
  3. 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在浏览器吸收数据时期周期性地触发。在触发时,它会额外埠供应三个属性:

  1. lengthComputable;示意进度信息是不是可用
  2. position;示意已吸收的字节数
  3. 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事宜处置惩罚顺序。

    原文作者:WE2008311
    原文地址: https://segmentfault.com/a/1190000013024557
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞