初识AJAX


1 简介

Asynchronous JavaScript + XML(异步的JavaScript和XML), 其本身不是一种新技术,而是一个在2005年被 Jesse James Garrett 提出的新术语,用来描述一种使用现有技术集合的‘新’方法,包括: HTML or XHTML, Cascading Style Sheets, JavaScript, The Document Object Model, XML, XSLT, 以及最重要的 XMLHttpRequest object。当使用结合了这些技术的AJAX模型以后网页能够快速地将 增量更新 呈现在用户界面上,而不需要重载(刷新)整个页面。这使得程序能够更快地回应用户的操作

尽管X在Ajax中代表XML, 由于JSON的许多优势,比如更加轻量以及作为Javascript的一部分,目前JSON的使用比XML更加普遍。JSON和XML都被用于在Ajax模型中打包信息。

2 AJAX入门

2.1 原理

AJAX 使用XMLHttpRequest对象与服务器进行通信。它可以以各种格式发送和接收信息,包括JSON,XML,HTML和文本文件。AJAX最吸引人的特性是它的“异步”特性,这意味着它可以与服务器通信,交换数据和更新页面而无需刷新页面

2.2 主要功能

AJAX的主要功能允许您执行以下操作:
在不重新加载页面的情况下向服务器发出请求(无刷新发请求
接收和处理来自服务器的数据(接收并处理响应

2.3 发送AJAX请求

JavaScript使用XMLHttpRequest对象向服务器发送HTTP请求。

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    // Process the server response here.
}
xhr.open('GET', 'http://www.example.org/some.file', true);
xhr.send();

var xhr = new XMLHttpRequest();
创建一个XMLHttpRequest对象,有向服务器发起HTTP请求,并接收服务器给出的响应的功能

xhr.onreadystatechange = function() {}
声明readyState改变时触发的事件

xhr.open('GET', 'http://www.example.org/some.file', true);
xhr.send();
调用HTTP请求对象的open()和send()方法用于发送实际的请求

open()方法

第一个参数是HTTP 请求方法。GET,POST,HEAD或服务器支持的其他方法。按照HTTP标准 保持方法全大写,否则某些浏览器(如Firefox)可能无法处理请求。
第二个参数是您要发送 请求的URL。作为安全功能,默认情况下,您无法在第三方域上调用URL。无法进行跨域请求
第三个参数(可选)设置请求是否是异步请求。如果true(默认值),JavaScript执行将继续,并且用户可以在服务器响应尚未到达时与页面进行交互。这是AJAX中的第一个A.

send()方法

方法的参数可以是您在发送POST请求时要发送到服务器的任何数据。表单数据应以服务器可以解析的格式发送,如查询字符串:

"name=value&anothername="+encodeURIComponent(myVar)+"&so=on"
或其他格式,如multipart/form-dataJSON,XML等。

请注意,如果您想要POST数据,则可能必须设置请求的MIME类型。例如,在调用send()作为查询字符串发送的表单数据之前,请使用以下命令:

httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

2.4 处理服务器返回的响应

发送请求时,声明了readyState改变时处理响应的函数,也可以按下面的方式来声明处理响应的函数。
xhr.onreadystatechange = nameOfTheFunction;
这个函数应该做什么?首先,该函数需要检查请求的状态。如果状态的值为XMLHttpRequest.DONE(对应于4),则表示已收到完整的服务器响应,您可以继续处理它。

if (httpRequest.readyState === XMLHttpRequest.DONE) {
    // Everything is good, the response was received.
} else {
    // Not ready yet.
}

完整的readyState值列表记录在XMLHTTPRequest.readyState中,如下所示:

readyState 状态描述 说明
0 UNSENT 代理被创建,但尚未调用 open() 方法。
1 OPENED open() 方法已经被调用。
2 HEADERS_RECEIVED send() 方法已经被调用,并且头部和状态已经可获得。
3 LOADING 下载中; responseText 属性已经包含部分数据。
4 DONE 下载操作已完成。

接下来,检查HTTP响应的HTTP响应状态代码 。在下面的示例中,通过检查200 OK响应代码来区分成功和不成功的AJAX调用。

if (httpRequest.status === 200) {
    // Perfect!
} else {
    // There was a problem with the request.
    // For example, the response may have a 404 (Not Found)
    // or 500 (Internal Server Error) response code.
}

在检查请求的状态和响应的HTTP状态代码之后,您可以使用服务器发送的数据执行任何操作。您有两种方法可以访问该数据

httpRequest.responseText - 将服务器响应作为一串文本返回
httpRequest.responseXML- 将响应作为XMLDocument可以使用JavaScript DOM函数遍历的对象返回
请注意,只有在使用异步请求(第三个参数open()未指定或设置为true)时,上述步骤才有效。如果您使用 同步请求,则不需要指定功能,但这是非常不鼓励的,因为它会带来糟糕的用户体验。

详细内容请参考:https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX/Getting_Started

posted @ 2018-10-27 17:56  jqjquery  阅读(117)  评论(0编辑  收藏  举报