模拟GET请求和POST请求的发送

XHR对象的常用属性和方法

方法：

1、open( ) -方法
作用：创建请求
语法：open(“method”,”url”,isAsyn)
1.1. method 请求方式：POST或GET
1.2. url 请求地址
1.3. isAsyn 使用 同步(false) 还是 异步(true) 的方式发送请求
2、onreadystatechange - 事件（每一次readystate的值有变化时会触发）
当xhr的readyState发生改变时，要自动激发的操作。用于监听readyState状态改变的

xhr.onreadystatechange=function(){
//每当readyState状态码发生改变的时候要执行的操作
if(xhr.readyState==4 && xhr.status==200){
//当xhr已经完全接收响应了，并且服务器也正常给出响应的时候要做的事
var txt=xhr.responseText;//服务器端响应回来的数据
}
}

3、send( ) -方法
作用：发送请求
语法：xhr.send(body);
body：发送的请求数据。如果是get提交方式，此处为null；如果是post提交方式，此处就是提交的数据

4、setRequestHeader(name,value); 设置请求消息头部
5、getResponseHeader(name);获取响应消息头部
6、getAllResponseHeaders();获取响应消息中的所有头部

属性：

1、readyState（XHR的当前状态）
作用：
2.0：请求发送还未发送
2.1：已经打开到WEB服务器的连接
2.2：xhr对象已经接受响应消息的头部
2.3：xhr对象已经接受响应消息的主体
2.4：xhr已经接受完成响应消息
注意：当readyState为4的时候，表示所有的响应消息都接受完毕
2、status （响应消息状态码 只有在xhr.readystate 变为2以后才值）
作用：表示服务器相应状态码
常见的状态码值：
3.1、200 正常接受请求以及给出响应
3.2、404 要请求的资源不存在
3.3、500 服务器内部错误
注意：当status值是200的时候
状态码的详细解释网址如下：https://www.douban.com/note/734269029/

3、statusText：" " 响应消息中原因消息，只有在xhr.readystate 变为2以后才值
4、responseText： “”,响应消息的主体内容，只有在xhr.readystate 变为3开始有值，变为4值稳定下来

创建发送请求的步骤：

第一种提交方式是get的提交方式，这个一共有四个步骤：
第一步是创建xhr的方式：

1、var xhr = new XMLHTTPRequest();//这个是不考虑浏览器的兼容问题的

2、考虑浏览器兼容的问题的代码：

if(window.XMLHttpRequest){
	        xhr = new XMLHttpRequest();
	    }else if(window.ActiveXObject){
	         xhr = new ActiveXObject('Microsoft.XMLHTTP');
	    }else{
	        alert('该浏览器不支持Ajax网络请求！');
	    }

第二步是给创建的xhr加上回调函数进行监听其请求的状态
代码如下：

xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){//判断请求是否完成
            if(xhr.status == 200){//-判断请求是否成功
                doResponse(xhr);//后序的操作
            }
        }

    }

第三部是打开数据请求的方式
这个方法有两个参数：
参数1：数据请求方式 get post
参数2：请求的接口，参数在接口后面进行拼接
参数3：参数指示请求使用应该异步地执行。如果这个参数是 false，请求是同步的，后续对 send() 的调用将阻塞，直到响应完全接收。如果这个参数是 true 或省略，请求是异步的，且通常需要一个 onreadystatechange 事件句柄。
参数4和参数5：参数是可选的，为 url 所需的授权提供认证资格。如果指定了，它们会覆盖 url 自己指定的任何资格。
代码如下：

xhr.open('GET',`01-reg-ajax.php`,true);

第四步是发送请求：
代码如下：

xhr.send(null);

第二种提交方式就是POST的提交方式，这个和get的提交方式多了一个第三步和第四步之间加了一个中间步骤：
代码如下：

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');//设置请求消息头

GET请求和POST请求的同步代码和异步代码：

GET请求的代码：

第一是同步代码：

var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP.3.0");
xmlhttp .onreadystatechange = function(){
        if(xmlhttp .readyState == 4){//判断请求是否完成
            if(xmlhttp .status == 200){//-判断请求是否成功
                doResponse(xhr);//后序的操作
            }
        }

    }
xmlhttp.open("GET","http://localhost/books.xml", false);  没有参数且不会发生改变的用GET，否则用POST
xmlhttp.send();

第二是异步代码：

function UpdateData() 
{ 
	if(window.XMLHttpRequest){
		    xmlhttp = new XMLHttpRequest();
	}else if(window.ActiveXObject){
		    xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
	}else{
		   alert('该浏览器不支持Ajax网络请求！');
	}
	xmlhttp .onreadystatechange = function(){
	        if(xmlhttp .readyState == 4){//判断请求是否完成
	            if(xmlhttp .status == 200){//-判断请求是否成功
	                doResponse(xhr);//后序的操作
	            }
	        }
	    }
	xmlhttp.Open("POST",“http://window.location.href/GetTemp.aspx”, false); 
	xmlhttp.Send("adst"); 
} 

POST请求的代码：

1、同步方式

var xmlhttp=newXMLHttpRequestObj ();

xmlhttp.open('post','xxx.asp?s=dc',false);

xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlhttp.send(true);

2、异步方式

var sendStr='?a=1&b=2'; //url 的参数

var xmlhttp=newXMLHttpRequestObj ();
xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4){    
        if(xmlhttp.status==200){
           alert(xmlhttp.responseText);
        }
    }
}
xmlhttp.open('post','xxx.asp',true);
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlhttp.send(sendStr);