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);

模拟GET请求和POST请求的发送相关推荐

Winform模拟post请求和get请求登录网站
引言最近有朋友问如何用winform模拟post请求,然后登录网站,稍微想了一下,大致就是对http报文的相关信息的封装,然后请求网站登录地址的样子.发现自己的博客中对这部分只是也没总结,就借着这股 ...
iOS开发网络篇—GET请求和POST请求
一.GET请求和POST请求简单说明创建GET请求 1 // 1.设置请求路径 2 NSString *urlStr=[NSString stringWithFormat:@"http ...
mvc ajax get请求,springMVC 中 ajax get 请求和 post 请求的坑以及参数传递
1, ajax 请求无论为 post ,或者 get ,url中带有?形式的参数,后台都能以String类型变量接收,变量名称和参数名称必须一致前台ajax: $.ajax( "prod ...
WEB中get请求和post请求的区别
参考:https://blog.csdn.net/weixin_39361808/article/details/81136865 GET请求和POST请求是HTTP协议发送请求的两种基本方法. W3 ...
axios中出现两次请求，OPTIONS请求和GET请求
在项目中发现ajax中出现两次请求,OPTIONS请求和GET请求查看到浏览器NetWork有两次请求,请求url一样: 查找原因是浏览器对简单跨域请求和复杂跨域请求的处理区别. XMLHttpRe ...
JSP、Servlet中get请求和post请求的区别总结
在学习JavaWeb最初的开始阶段,大家都会遇到HttpServlet中的doGet和doPost方法.前两天看<Head First Servlets & JSP>看到其中讲关于 ...
java中的post的作用,JSP、Servlet中get请求和post请求的区别总结
在学习JavaWeb最初的开始阶段,大家都会遇到HttpServlet中的doGet和doPost方法.前两天看<Head First Servlets & JSP>看到其中讲关于 ...
客户端（前端）Ajax中Get请求和Post请求的区别
我们在使用Ajax时,当我们向服务器发送数据时,我们可以采用Get方式请求服务器,也可以使用Post方式请求服务器.那么,Get请求和Post请求的区别到底在哪呢? GET请求 get是最常见的请 ...
傲娇大少之——【GET请求和POST请求】
若有来生,不婚不嫁,不孕不养,不做谁的妻,不为谁的娘. 只做自家女,养父母终老. 孑然一身,我行我素,随心所欲! ~诶,我好像不用等到来生... 关于http协议的get和post请求 get和pos ...

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