AJAX的进修笔记（二）

2024年3月23日 228次阅读 来源: WE2008311

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

向服务器提议要求

我们在建立了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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞