深入理解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 相关文章推荐
Jquery iframe内部出滚动条
Feb 11 Javascript
基于jquery的给文章加入关键字链接
Oct 26 Javascript
js实现的仿新浪微博完美的时间组件升级版
Dec 20 Javascript
JS实现随机化快速排序的实例代码
Aug 01 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
Feb 19 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
Oct 17 Javascript
开源的javascript项目Kissy介绍
Nov 28 Javascript
使用jquery插件qrcode生成二维码
Oct 22 Javascript
JS把内容动态插入到DIV的实现方法
Jul 19 Javascript
jquery实现下拉框多选方法介绍
Jan 03 Javascript
vue2实现数据请求显示loading图
Nov 28 Javascript
vue.js轮播图组件使用方法详解
Jul 03 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 事务处理数据实现代码
2010/05/13 PHP
PHP数据类型的总结分析
2013/06/13 PHP
PHP学习笔记之字符串编码的转换和判断
2014/05/22 PHP
php源码之将图片转化为data/base64数据流实例详解
2016/11/27 PHP
innerText和innerHTML 一些问题分析
2009/05/18 Javascript
javascript中的parseInt和parseFloat区别
2013/07/12 Javascript
node.js WEB开发中图片验证码的实现方法
2014/06/03 Javascript
Jquery Post处理后不进入回调的原因及解决方法
2014/07/15 Javascript
nodejs 整合kindEditor实现图片上传
2015/02/03 NodeJs
JS实现定时自动关闭DIV层提示框的方法
2015/05/11 Javascript
详解vuejs之v-for列表渲染
2017/06/22 Javascript
NodeJS使用七牛云存储上传文件的方法
2017/07/24 NodeJs
JavaScript实现单例模式实例分享
2017/12/22 Javascript
vue.js使用3DES加密的方法示例
2018/05/18 Javascript
vue.js动画中的js钩子函数的实现
2018/07/06 Javascript
js实现同一个页面,多个enter事件绑定的示例
2018/10/10 Javascript
微信小程序全局变量的设置、使用、修改过程解析
2019/09/24 Javascript
jQuery实现tab栏切换效果
2020/12/22 jQuery
[01:51]2014DOTA2西雅图邀请赛 MVP 外卡赛black场间采访
2014/07/09 DOTA
Python3中在Anaconda环境下安装basemap包
2018/10/21 Python
Python爬虫爬取Bilibili弹幕过程解析
2019/10/10 Python
Python中base64与xml取值结合问题
2019/12/22 Python
python GUI库图形界面开发之pyinstaller打包python程序为exe安装文件
2020/02/26 Python
将pymysql获取到的数据类型是tuple转化为pandas方式
2020/05/15 Python
用Python 爬取猫眼电影数据分析《无名之辈》
2020/07/24 Python
Pycharm Plugins加载失败问题解决方案
2020/11/28 Python
英国现代绅士品牌:Hackett
2017/12/17 全球购物
Belvilla德国:在线预订度假屋
2018/04/10 全球购物
环卫工人节活动总结
2014/08/29 职场文书
高中军训的心得体会
2014/09/01 职场文书
考试作弊检讨书
2015/01/27 职场文书
车间主任岗位职责范本
2015/04/08 职场文书
焦点访谈观后感
2015/06/11 职场文书
张丽莉观后感
2015/06/16 职场文书
2015年治庸问责工作总结
2015/07/27 职场文书
Java 超详细讲解hashCode方法
2022/04/07 Java/Android