XMLHttpRequest对象Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。在浏览器中创建对象(只支持IE7及更高的版本)：

var xhr = new XMLHttpRequest();

XHR的用法首先要介绍的是open()方法。它接收3个参数：

• 要发送的请求的类型(POST、GET等)
• 请求的URL
• 表示是否异步发送请求的布尔值

调用open()示例：xhr.open("get", "index.jsp", false);针对index.jsp的GET请求。URL相对于执行代码的当前页面；调用open()方法并不会真正发送请求，只是启动一个请求以备发送。调用send()发送请求：xhr.send(null);send()接收一个参数，即要作为请求主体发送的数据。如果不需要通过请求主体发送数据，则必须传入null。相应数据会填充到XHR对象的相关属性：

• responseText:作为响应主体被返回的文本
• responseXML:作为响应的内容类型是“text/xml”或“application/xml”
• status:响应的HTTP状态
• statusText:HTTP状态的说明

在接收响应后，首先检查status属性，确定响应已经返回，一般200作为成功的标志。状态码304表示资源没有修改，可以直接使用浏览器中缓存的版本。为了接收到合适的响应，应该以如下方式检测两种状态码：

xhr.open("get", "index.jsp", false);xhr.send(null);if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {alert(xhr.responseText);} else {alert("Request was unsuccessful: " + xhr.status);}//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流：864305860

通过检测readyState属性，可以确定请求/响应过程的当前活动阶段。

• 0：未初始化。未调用open()方法
• 1：启动。已经调用open()方法，未调用send()方法
• 2：发送。已经调用send()方法，未接收到响应
• 3：接收。已经接收到部分数据
• 4：完成。已经接收到全部数据，可以在客户端使用
• readyState属性的值发生变化时，都会触发一次readystatechange事件。在调用open()之前指定onreadystatechange事件处理程序才能确保浏览器兼容性。

var xhr = new XMLHttpRequest();xhr.onreadystatechange = function () {if (xhr.readyState == 4) {if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {alert(xhr.responseText);} else {alert("请求成功：" + xhr.status);}//欢迎加入前端全栈开发交流圈一起学习交流：864305860}//面向1-3年前端人员};//帮助突破技术瓶颈，提升思维能力xhr.open("get", "index.jsp", true);xhr.send(null);

在接收响应之前，可以取消异步请求：xhr.abort();HTTP头部信息XHR对象提供了操作请求头部和响应头部信息的方法。默认情况下，在发送XHR请求的同时，还会发送下列头部信息。

• Accept:浏览器能够处理的内容类型
• Accept-Charset:浏览器能够显示的字符集
• Accept-Encoding:浏览器能够处理的压缩编码
• Accept-Language:浏览器当前设置的语言
• Connection:浏览器与服务器之间连接的类型
• Cookie:当前页面设置的任何Cookie
• Host:发出请求的页面所在的域
• Referer:发出请求的页面的URL
• User-Aent:浏览器的用户代理字符串
• 使用setRequestHeader()可以设置自定义的请求头部信息。必须在调用open()方法之后，且在调用send()之前，调用
• setRequestHeader()：

xhr.open("get", "index.jsp", true);xhr.setRequestHeader("MyHeader", "MyValue");xhr.send(null);

调用getResponseHeader()并传入字段名称，可以取得相应的响应头部信息。getAllResponseHeader()取得包含所有头部信息的长字符串。

var myHeader = xhr.getResponseHeader("MyHeader");var allHeaders = xhr.getAllResponseHeader();

GET请求GET用于向服务器查询某些信息。可以将查询字符串参数追加到URL的末尾，查询字符串中的每个参数的名称和值都必须使用encodeURIComponent()编码：

xhr.open("get", "login.jsp?name1=value1&name2=value2", false); addURLParam()接收三个参数：要添加参数的URL、参数的名称和参数的值。var url = "login.jsp";// 添加参数url = addURLParam(url, "username", "xxyh");url = addURLParam(url, "password", "xxyh123");// 初始化请求xhr.open("get", url, false);//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流：864305860

POST请求POST请求用于向服务器发送应该被保存的数据。POST请求的主体可以包含非常多的数据，而且格式不限。初始化请求：

xhr.open("post", "login.jsp", true); 

首先将Content-Type头部信息设置为application/x-www-form-urlencoded,然后建立一个字符串格式。如果需要将页面中的表单数据进行序列化，然后再通过XHR发送到服务器，可以使用serialize()函数来创建这个字符串：

xhr.open("get", "login.jsp", false);xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");var form = document.getElementById("user-info");xhr.send(serialize(form));

结语感谢您的观看，如有不足之处，欢迎批评指正。对前端的技术，前端全栈技术感兴趣的同学关注我的头条号，并在后台私信发送关键字：“前端”即可获取免费的前端开发攻城师学习资料知识体系已整理好，欢迎免费领取。还有视频分享可以免费获取。关注我，可以获得没有的经验哦！本文仅代表作者个人观点，不代表巅云官方发声，对观点有疑义请先联系作者本人进行修改，若内容非法请联系平台管理员，邮箱2522407257@qq.com。更多相关资讯，请到巅云www.yinxi.net学习互联网营销技术请到巅云建站www.yx10011.com。