摘要：与不同的是，应该以发送的数据作为请求的主体。有了这些不同的事件支持，开发者可以免去检查之类的工作，更加的方便。其中事件和事件比较重要。而事件则会为在浏览器接收数据期间周期性地触发。
在上篇笔记中，我们主要谈了一些概述和跨域的问题，这一次我们聊聊请求和响应的具体内容。向服务器发起请求
我们在创建了XHR对象后，接着需要用两个方法来发送请求：open()和send()，这两个方法有点像赛跑前的两个步骤：预备、跑。在open()中，并没有实际发送请求，只是一个“预备”动作，真正的发送要到send()中了。
open和sendopen()可以传递三个参数：
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实例的例子：
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事件处理程序。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/92857.html
摘要：网上有很多前端的学习路径文章，大多是知识点罗列为主或是资料的汇总，数据量让新人望而却步。天了解一个前端框架。也可以关注微信公众号晓舟报告，发送获取资料，就能收到下载密码，网盘地址在最下方，获取教程和案例的资料。 前言 好的学习方法可以事半功倍，好的学习路径可以指明前进方向。这篇文章不仅要写学习路径，还要写学习方法，还要发资料，干货满满，准备接招。 网上有很多前端的学习路径文章，大多是知...
先学习阮大神的 数据类型和Json格式 一、js中解析JSON的方式 eval() JSON.parse var jsondata = {staff:[{name:小红,age:16},{name:小明,age:20},{name:小芳,age:18}]} var jsonobj = eval(( + jsondata + )) alert( jsonobj.staff[0].name); s...
阅读 2593·2023-04-25 23:08
阅读 1369·2021-11-23 09:51
阅读 1387·2021-10-27 14:18
阅读 3027·2019-08-29 13:25
阅读 2722·2019-08-29 13:14
阅读 2590·2019-08-26 18:36
阅读 2074·2019-08-26 12:11
阅读 703·2019-08-26 11:29
