XMLHttpRequest

最新推荐文章于 2024-05-23 09:30:17 发布

chenxiaoyi0207

最新推荐文章于 2024-05-23 09:30:17 发布

阅读量1.4k

点赞数

分类专栏： JavaScript 文章标签： Javascript XMLHttpRequest 请求/响应

本文链接：https://blog.csdn.net/sinat_38783046/article/details/82558531

版权

JavaScript 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

一、概念
1.XHR：XHR的每个实例都表示一个独立的请求/响应对，并且这个对象的属性和方法允许指定请求细节和提取响应数据。

2.请求分为两类：

指定请求get：用于常规请求，适用于当URL完全指定请求资源，当请求对服务器没有任何副作用以及当服务器的响应是可缓存时；
取得响应post：常用于HTML表单，它在请求主体中包含额外数据，且这些数据常存储到服务器上的数据库中。

3.结构
（1）一个HTTP请求

HTTP请求方法
一个可选的请求头集合（可能包括身份验证信息）
一个可选的请求主体

（2）服务器返回的HTTP响应

一个数字和文字组成的状态码（显示请求的成功和失败）
一个响应头集合
响应主体

4.HTTP的基础请求/响应架构的复杂问题：客户端和服务端交换cookie，服务器重定向浏览器到其他服务器，缓存某些资源而剩下的不缓存，某些客户端通过代理服务器发送所有的请求等。（cookie，重定向，缓存和代理四个方面）

二、XHR使用
1.get

var request=new xMLHttpRequest();//实例化XHR对象
request("GET","data.csv");//开始一个HTTP GET请求
request.send(null);//get请求没有请求主体，应该传递null或省略这个参数

2.post

function postMessage(msg){ 
	var request=new XMLHttpRequest();//新请求 
	request.open("POST","/log.php");//用post向服务器端发送脚本
	request.setRequestHeader("Content-Type","text/plain;charset=UTF-8"); //设置请求头，Content-Type指定请求主题的MIME类型
	request.send(msg);//把msg作为请求主体发送 
}

三、XHR方法
1.open()：指定请求的方法和URL。

2.setRequestHeader() ：设置请求头。

3.send()：启动请求（异步处理HTTP响应）。

4.getResponseHeader()和getAllResponseHeaders()：查询响应头。

5.readystatechange

四、XHR属性
1.status和statusText属性：以数字和文本的形式返回HTTP状态码。例如，200和"OK"表示成功请求，404和"Not Found"表示URL不能匹配服务器上的任何资源。

2.responseText和responseXML属性：得到文本形式和document形式的响应主体。

3.readyState属性：指定了HTTP请求的状态。每次该属性改变都会触发readystatechange事件。

4.onreadystatechange属性：为了监听readystatechange事件，要把事件处理函数设置为XHR对象的onreadystatechange属性。
例如，

request.onreadystatechange=function(){
	if(request.readyState===4 && request.status===200){
		...
	}
}

五、JSON编码的请求

function postJSON(url,data,callback){
	var request=new XMLHttpRequest();
	request.open("POST",url);
	request.onreadystatechange=function(){
		if(request.readyState===4 && callback)
			callback(request);
	};
	request.setRequestHeader("Content-Type","application/json");
	request.send(JSON.stringify(data));
}

六、HTTP进度事件
1.过程：