AJAX:
XMLHttpRequest是AJAX的基础
1.创建一个XMLHttpRequest对象：
const xmlhttp;
if(window.XMLHttpRequest){
xmlhttp =new XMLHttpRequest();
}else{
//针对IE
xmlhttp = new ActiveXObject(“Microsoft.XMLHttp”）；
}
2.用XMLHttpRequest向服务器发送请求：
首先查看XMLHttpRequest对象的open()和send()方法
open(method,url,async)
规定请求的类型、URL以及是否异步请求，如果要用AJAX，要设置为异步
method:请求的类型，GET、POST等。
async:true异步、false同步
send(string)
将请求发送到服务器
string:请求的数据，仅用于POST 请求
//一个发送GET请求并且带请求信息的例子:
//xmlhttp对象的创建参考上面的例子
xmlhttp.open("GET","localhost:8080/index.html?a=1&b=2",true);
xmlhttp.send();
/*URL中‘？’之后的部分称为querystring,&代表请求参数的分隔符
上面的例子中发送了{a:1,b:2} */
3.像HTML表单那样POST数据
使用setRequestHeader()添加HTTP头部，然后在send()方法中规定传输的数据:
xmlhttp.open("POST","localhost:8080/index.htm",true);
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlhttp.send("name=bill&age=18");
setRequestHeader(header,value):
向请求添加HTTP头，header规定头的名称，value规定头的值。
4.服务器响应事件:
onreadystatechange事件:
当请求被发送到服务器时，我们需要执行一些基于响应的任务，每当readyState改变时，就会触发onreadystatechange事件，readyState属性存有XMLHttpRequest的状态信息。
XMLHttpRequest对象的重要属性：
XMLHttpRequest对象的属性
readyState与status的具体工作流程：
image.png
status的值可以分为以下几大类：
- 1xx:信息处理类，表示接收到请求并且继续处理
- 2xx:处理成功响应类，表示动作被成功接收，理解和接受
- 3xx:重定向响应类，为了完成指定的动作，必须接受进一步处理
- 4xx:客户端错误，客户请求包含语法错误或者是不能正确执行
- 5xx:服务端错误，服务器不能正确执行一个正确的请求
在onreadystatechange事件中，我们规定当服务器已做好被处理的准备时所执行的任务。onreadystatechange事件被触发五次，对应着readyState的每个变化，当readyState等于4且状态status为200时，表示响应已经就绪：
xmlhttp.onreadystatechange = function (){
if (xmlhttp.readyState == 0 ){
console.log('处于定义XHR但未初始化阶段');
}
if (xmlhttp.readyState == 1){
console.log('调用send()方法正在发送请求");
}
if (xmlhttp.readyState == 2){
console.log('载入完成，已经接受到全部响应内容");
}
if (xmlhttp.readyState == 3){
console.log("正在解析收到的内容");
}
if (xmlhttp.readyState == 4){
console.log("解析完毕可以返回客户端应用");
}
if (xmlhttp.readyState ==4 &&xmlhttp.status ==200){
console.log("响应就绪");
console.log("响应信息",xmlhttp.responseText);
}
}
5.封装XMLHttpRequest
封装模拟jquery的AJAX请求函数，目的是为了减少对jquery的依赖以及提高代码的复用率，使用callback回调函数让onreadystatechange事件执行，使得执行的任务可变:
//@param:requestobj类似于jquery的ajax请求传入的对象
//@param:requestobj.method请求的方式，"GET"\"POST"
//@param:requestobj.url 请求的URL
//@param:requestobj.data请求的信息
//@param:requestobj.header 请求的头部信息
//@param:requestobj.success，onreadystatechange事件的回调
function ajax( requestobj ){
requestobj = requestobj || {};
let method = (requestobj.method == null ?
"GET" : requestobj.method.toUpperCase());
let url = requestobj.url || ' ';
if( url == "" )
return "url不能为空"
let data = requestobj.data || null;
let header = requestobj.header || 'application/x-www-form-unlenconded;charset=utf-8’;
let callback = requestobj.success;
let xmlhttp = null;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else{
xmlhttp = new ActiveObject("Microsoft.XMLHTTP");
}
//将对象转化成为querystring形式
let paramarray = [ ];
for (key in data ) {
paramarray.push(key+'='+data[key]);
}
let datapost = paramarray.join('&‘’);
xmlhttp.onreadystatechange = function (){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
callback(xmlhttp.responseText);
}
//可以自行添加其他响应，例如status == 404的情况等
};
if(method == "POST"){
xmlhttp.open(method,url,true);
xmlhttp.setRequestHeader("Content-Type",header);
xmlhttp.send(datapost);
}else if (method == "GET"){
xmlhttp.open(method,url+'?'+datapost,true);
xmlhttp.setRequestHeader("Content-Type",header);
xmlhttp.send();
}
}
6.其他XMLHttpRequest方法：
abort()方法：取消当前响应，关闭连接并且结束任何未决的网络活动。
这个方法把XMLHttpRequest对象重置为readyState为0的状态，并且取消所有未决的网络活动，如果响应不再必要时，可以调用这个方法.
getAllResponseHeaders():把HTTP响应头部作为未解析的字符串返回。
如果readyState小于3，这个方法返回null。否则，它返回服务器发送的所有HTTP响应的头部。头部作为单个字符串返回，一行一个头部，每行用换行符“\r\n”隔开。
getResponseHeader()：返回置顶的HTTP响应头部信息，参数是要返回的HTTP响应头部的名称，不区分大小写。
如果没有接受到头部参数或者readyState小于3则为空字符串，如果接受到多个有指定名称的头部，这个头部的值被链接起来并返回，使用都好和空格分隔开各个头部的值。
网友评论