深入理解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 相关文章推荐
找到一点可怜的关于dojo资料,谢谢作者!
Dec 06 Javascript
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
Nov 14 Javascript
JQuery鼠标移到小图显示大图效果的方法
Jun 10 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
Mar 15 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 Javascript
深入解析koa之中间件流程控制
Jun 17 Javascript
node爬取新型冠状病毒的疫情实时动态
Feb 06 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
Mar 04 Javascript
javascript实现简易计算器功能
Sep 23 Javascript
javascript实现搜索筛选功能实例代码
Nov 12 Javascript
JavaScript 如何在浏览器中使用摄像头
Dec 02 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 jQuery
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
file_get_contents(&quot;php://input&quot;, &quot;r&quot;)实例介绍
2013/07/01 PHP
PHP针对JSON操作实例分析
2015/01/12 PHP
Zend Framework教程之Zend_Layout布局助手详解
2016/03/04 PHP
PHP随机数 C扩展随机数
2016/05/04 PHP
Yii2中Restful API原理实例分析
2016/07/25 PHP
PHPCMS手机站伪静态设置详细教程
2017/02/06 PHP
php实现统计IP数及在线人数的示例代码
2020/07/22 PHP
javascript eval(func())使用示例
2013/12/05 Javascript
使表格的标题列可左右拉伸jquery插件封装
2014/11/24 Javascript
jQuery中:lt选择器用法实例
2014/12/29 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
2016/06/17 Javascript
JavaScript实现输入框与清空按钮联动效果
2016/09/09 Javascript
新手学习前端之js模仿淘宝主页网站
2016/10/31 Javascript
jquery对所有input type=text的控件赋值实现方法
2016/12/02 Javascript
JS数组返回去重后数据的方法解析
2017/01/03 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
2017/01/08 Javascript
Angular2里获取(input file)上传文件的内容的方法
2017/09/05 Javascript
vue中的数据绑定原理的实现
2018/07/02 Javascript
JS中DOM元素的attribute与property属性示例详解
2018/09/04 Javascript
Vue.js中 v-model 指令的修饰符详解
2018/12/03 Javascript
你了解vue3.0响应式数据怎么实现吗
2019/06/07 Javascript
15 分钟掌握vue-next响应式原理
2019/10/13 Javascript
JavaScript观察者模式原理与用法实例详解
2020/03/10 Javascript
[02:28]DOTA2英雄基础教程 狼人
2013/12/23 DOTA
python设置windows桌面壁纸的实现代码
2013/01/28 Python
Python爬虫包BeautifulSoup简介与安装(一)
2018/06/17 Python
Django实现跨域的2种方法
2019/07/31 Python
Python pandas用法最全整理
2019/08/04 Python
python__name__原理及用法详解
2019/11/02 Python
pytorch 实现将自己的图片数据处理成可以训练的图片类型
2020/01/08 Python
世界上最大的乐谱选择:Sheet Music Plus
2020/01/18 全球购物
大学生活学习的自我评价
2013/12/03 职场文书
挂职思想汇报
2013/12/31 职场文书
政法学院毕业生求职信
2014/02/28 职场文书
经理助理岗位职责
2014/03/05 职场文书
高中课前三分钟演讲稿
2014/09/13 职场文书