Ajax与封装AJAX

创建ajax

//IE7以下使用
var xhr=new ActiveXObject("Microsoft.XMLHTTP");
//IE7+、Firefox、Opera、Chrome、Safari等浏览器使用
var xhr=new XMLHttpRequest();
//给XMLHttpRequest对象增加侦听器，用来侦听各种情况，包括各种链接状态，readyState 的值为0，1，2，3，4。
xhr.addEventListener("load",loadHandler);
xhr.open("请求方式","地址","同步/异步","用户名","密码");
//如果是get请求
xhr.send();
//如果是post请求，参数为json字符串
xhr.send(data);
function loadHandler(e){
            console.log(xhr.response);
        } 

var obj = JSON.parse(str); //由JSON字符串转换为JSON对象(常用)
var obj = eval(’(’ + str + ‘)’);//由JSON字符串转换为JSON对象
var last=JSON.stringify(obj); //将JSON对象转化为JSON字符
状态码 status，状态主要分：
1、信息 100-101
2、成功 200-206
3、重定向 300-307
4、客户端错误 400-417
5、服务器错误 500-505

客户端中，写入请求头，读取响应头。

使用 xhr.setRequestHeader ( ) 来设置请求头；
请求头消息，必须在open后，send前写入；
如果ajax与php通信使用POST方法时，在消息头中必须写入 “content-type”,“application/x-www-form-urlencoded”；
如果请求头有自定义的数据，服务器必须做允许跨域请求头设置，“Access-Control-Allow-Headers”；
使用 xhr.getAllResponseHeaders ( ) 获取所有响应头；
使用 xhr.getResponseHeader (“content-type”) 获取到响应头的结果；

var  xhr=new XMLHttpRequest();
xhr.addEventListener("load",loadHandler);
xhr.open("GET","http://127.0.0.1:8001");
// 请求消息，必须在open后，send前写入
// 如果ajax与php通信使用POST方法时，必须这样写入消息头，PHP才可以解析POST数据
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
// 如果请求头有自定义的数据，服务器必须做允许跨域请求头设置
xhr.setRequestHeader("names","lvy");
xhr.send();

function loadHandler(e){
	console.log(xhr.getAllResponseHeaders());//获取所有响应头
	console.log(xhr.getResponseHeader("content-type"));//获取到响应头的结果
}

超时事件，超时时间

超时时间：request.timeout，代表着一个请求在被自动终止前所消耗的毫秒数。默认值为 0，意味着没有超时。
设置超时时间后，不应该用在同步请求中，否则将会抛出一个 InvalidAccessError 类型的错误。
超时发生，会被触发 timeout 事件
超时时间必须设置在open以后，send之前。
超时事件：timeout ，当进度由于预定时间到期而终止时，会触发 timeout 事件。
xhr.abort ( )，该方法将终止请求，它的 readyState 属性将被置为0（ UNSENT ），但是并不触发 readystatechange 事件。

var xhr=new XMLHttpRequest();
xhr.addEventListener("load",loadHandler);
// 超时事件
xhr.addEventListener("timeout",timeoutHandler);
xhr.open("GET","http://127.0.0.1:8001");
// 超时时间
xhr.timeout=2000;
xhr.send();

function timeoutHandler(e){
    xhr.abort();//关闭当前通信，因为超时，服务器一直没有返回消息，属于挂起状态
}
function loadHandler(e){
	//...
}

send ( )

发送请求。如果该请求是异步模式(默认)，该方法会立刻返回。相反，如果请求是同步模式，则直到请求的响应完全接受以后，该方法才会返回。
注意：所有相关的事件绑定必须在调用 send() 方法之前进行。
void send();
void send(ArrayBuffer data);类型化数组
void send(Blob data);二进制大对象，是一个可以存储二进制文件的容器。
void send(Document data); 文档对象
void send(DOMString? data); 文本数据
void send(FormData data); 数据对象，可以直接封装内容
FormData 使用 for of 来遍历

使用Promise封装ajax

import QueryString from "./js/QueryString.js";
function ajax(data,type="GET"){
    if(type!=="GET") type="POST";
    return new Promise(function(resolve,reject){
        let getData="";
        let postData="";
        if(type==="GET"){
            getData="?"+QueryString.stringfiy(data);
        }else{
            postData=QueryString.stringfiy(data);
        }
        let xhr=new XMLHttpRequest();
        xhr.open(type,"http://localhost:4002"+getData);
        xhr.onreadystatechange=function(){
            if(xhr.readyState<4) return;
            if(xhr.status===200){
                resolve(xhr.response);
            }else{
                reject(xhr.response);
            }
        }
        xhr.onerror=function(){
            reject("地址错误");
        }
        
        xhr.send(postData);
    })
}
ajax().then(data=>{
    console.log(data)
})

get和post官方解释

GET和POST的区别
GET是从服务器上获取数据，POST是向服务器传送数据。
GET把参数包含在URL中，POST通过request body传递参数。
对于GET方式，服务器端用Request.QueryString获取变量的值，对于POST方式，服务器端用Request.Form获取提交的数据。
GET传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。（这里有看到其他文章介绍GET和POST的传送数据大小跟各个浏览器、操作系统以及服务器的限制有关）
GET安全性非常低，POST安全性较高。
GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
GET请求只能进行url编码，而POST支持多种编码方式。

node开启服务

var http=require("http");
var querystring=require("querystring");
var server=http.createServer(function(req,res){
   
    // 获取请求头消息
    // console.log(req.headers.names);
    var data="";
    // POST方式获取客户端发来的消息，转换为字符串就可以得到
    req.on("data",function(_data){
        data+=_data;
    });
    req.on("end",function(){
        if(req.url.indexOf("favicon.ico")>-1) return;
    //    设置响应头
        res.writeHead(200,{
            "content-type":"text/html;charset=utf-8",
            "Access-Control-Allow-Origin":"*",//跨越
            "Access-Control-Allow-Headers":"*"
        })
        res.write("aaa");
        res.end();
    })
});
// 创建好的服务开启侦听,第一个参数是网络的端口号,第二个参数是网络的ip,第三个参数是开启后的回调函数
server.listen(8001,"localhost",function(){
    console.log("服务已开启");
})