深入理解JavaScript中Ajax

站长资源 2024/11/28 佚名

24 1538 24

DDR爱好者之家 Design By 杰米

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

XMLHttpRequest对象

Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。

在浏览器中创建对象(只支持IE7及更高的版本)：

var xhr = new XMLHttpRequest();

XHR的用法

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

"get", "index.jsp", false);
针对index.jsp的GET请求。URL相对于执行代码的当前页面；调用open()方法并不会真正发送请求，只是启动一个请求以备发送。

调用send()发送请求：

xhr.send(null);

send()接收一个参数，即要作为请求主体发送的数据。如果不需要通过请求主体发送数据，则必须传入null。

相应数据会填充到XHR对象的相关属性：

"htmlcode">

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属性，可以确定请求/响应过程的当前活动阶段。

"htmlcode">

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请求的同时，还会发送下列头部信息。

"htmlcode">

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", 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,ajax

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“深入理解JavaScript中Ajax”

暂无评论...

深入理解JavaScript中Ajax

AngularJS基础 ng-options 指令详解

AngularJS基础 ng-open 指令简单实例

评论“深入理解JavaScript中Ajax”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接