深入理解JavaScript中Ajax


Posted in Javascript onAugust 02, 2016

Ajax不是一种新的编程语言,而是使用现有标准的新方法。AJAX可以在不重新加载整个页面的情况下,与服务器交换数据。这种异步交互的方式,使用户单击后,不必刷新页面也能获取新数据。

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

通过检测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);
}
}
};
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);

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

以上所述是小编给大家介绍的JavaScript中Ajax的深入理解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript操作cookie_获取与修改代码
May 21 Javascript
JavaScript 判断判断某个对象是Object还是一个Array
Jan 28 Javascript
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
Jul 24 Javascript
JavaScript实现将UPC转换成ISBN的方法
May 26 Javascript
js限制文本框只能输入中文的方法
Aug 11 Javascript
详解js前端代码异常监控
Jan 11 Javascript
js获取元素下的第一级子元素的方法(推荐)
Mar 05 Javascript
react-router中的属性详解
Jun 01 Javascript
vue init webpack 建vue项目报错的解决方法
Sep 29 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
Jun 26 Javascript
详解element-ui动态限定的日期范围选择器代码片段
Jul 03 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
Aug 10 Javascript
AngularJS基础 ng-open 指令简单实例
Aug 02 #Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
Aug 02 #Javascript
实例详解jQuery的无new构建
Aug 02 #Javascript
AngularJS基础 ng-mouseover 指令简单示例
Aug 02 #Javascript
JavaScript比较当前时间是否在指定时间段内的方法
Aug 02 #Javascript
图文详解JavaScript的原型对象及原型链
Aug 02 #Javascript
AngularJS基础 ng-mousemove 指令简单示例
Aug 02 #Javascript
You might like
《PHP边学边教》(01.开篇――准备工作)
2006/12/13 PHP
php采集速度探究总结(原创)
2008/04/18 PHP
php获取本地图片文件并生成xml文件输出具体思路
2013/04/27 PHP
PHP include任意文件或URL介绍
2014/04/29 PHP
PHP中$this和$that指针使用实例
2015/01/06 PHP
PHP中number_format()函数的用法讲解
2019/04/08 PHP
JavaScript 提升运行速度之循环篇 译文
2009/08/15 Javascript
jquery 按钮状态效果 正常、移上、按下
2013/08/12 Javascript
js获取html文件的思路及示例
2013/09/17 Javascript
JavaScript Math.ceil() 函数使用介绍
2013/12/11 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
2015/05/04 Javascript
AngularJS equal比较对象实例详解
2016/09/14 Javascript
jQuery中on方法使用注意事项详解
2017/02/15 Javascript
jQuery模拟下拉框选择对应菜单的内容
2017/03/07 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
2017/06/26 Javascript
Js利用Canvas实现图片压缩功能
2017/09/13 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
2018/03/13 Javascript
JavaScript中的回调函数实例讲解
2019/01/27 Javascript
Vue的H5页面唤起支付宝支付功能
2019/04/18 Javascript
如何通过shell脚本自动生成vue文件详解
2019/09/10 Javascript
vue开发拖拽进度条滑动组件
2019/09/21 Javascript
vue2.x 对象劫持的原理实现
2020/04/19 Javascript
Node.js 中判断一个文件是否存在
2020/08/24 Javascript
python版本坑:md5例子(python2与python3中md5区别)
2017/06/20 Python
python pandas.DataFrame选取、修改数据最好用.loc,.iloc,.ix实现
2018/06/11 Python
如何在python字符串中输入纯粹的{}
2018/08/22 Python
详解python方法之绑定方法与非绑定方法
2020/08/17 Python
python如何设置静态变量
2020/09/07 Python
三只松鼠官方旗舰店:全网坚果销售第1
2017/11/25 全球购物
简短的公司员工自我评价分享
2013/11/13 职场文书
怎样填写就业意向
2014/04/02 职场文书
促销活动总结怎么写
2014/06/25 职场文书
个人查摆问题及整改措施
2014/10/16 职场文书
2015年会计工作总结范文
2015/05/26 职场文书
2015年社区重阳节活动总结
2015/07/30 职场文书
Pandas数据类型之category的用法
2021/06/28 Python