什么是AJAX?
AJAX的意思就是异步的JavaScript和XML。简而言之,它是使用XMLHttpRequest对象与服务器端通信的脚本语言。它可以发送及接收各种格式的信息,包括JSON、XML、HTML和文本文件。AJAX最为吸引人的就是它的“异步”特性,这意味着AJAX可以无需刷新页面而与服务器端进行通信。允许你根据用户事件来更新部分页面内容。
可以考虑的两个特性:
- 向服务器端发送请求,而不用重新加载页面。
- 从服务器端接收数据并处理。
第一步:如何发送一个HTTP请求
需要通过XMLHttpRequest实现使用JavaScript向服务器端发送一个HTTP请求。而Internet Explorer(IE)中引入一个名为XMLHTTP的ActiveX对象实现与XMLHttpRequest相同的功能,Mozilla、Safari和其他浏览器则使用XMLHttpRequest。
如果要兼容各个浏览器的话,可以这样来做:
var httpRequest;
if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ...
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 6 and older
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
注意:出于演示目的,上面创建XMLHTTP实例是简化了的代码。关于更加真实的例子,请参阅本文的第三步。
接下来,当接收到服务器端响应时,需要告诉HTTP请求对象使用JavaScript函数来处理响应。将XMLHttpRequest对象的onreadystatechange属性设置为该函数的名称,当请求的状态变化时,该函数会被调用。
httpRequest.onreadystatechange = nameOfTheFunction;
注意:该函数名没有传递参数的括号和参数,这表示只是分配了一个函数的引用,而不是真正调用该函数。当然,也可以动态定义一个匿名函数,这样可以实时地处理响应。
httpRequest.onreadystatechange = function(){
};
在处理完服务器端的响应之后,我们就可以调用XMLHttpRequest对象的open()和send()方法向服务器端发送请求了。
httpRequest.open('GET', 'http://www.example.org/some.file', true);
httpRequest.send(null);
- open()方法的第一个参数:HTTP请求方法 - GET、POST、HEAD及任何服务器端支持的方法。根据HTTP标准保持大写,否则一些浏览器(例如火狐)可能无法处理请求。关于HTTP请求方法的更多信息,你可以查看W3C规范
- open()方法的第二个参数:请求的URL。出于安全考虑,不能调用第三方域的页面内容。当调用open()方法时,一定确认使用相同域名内的页面,否则会得到“permission denied”的错误提示。常见的错误是使用domain.tld访问网站,却使用www.domain.tld来请求页面。如果真的需要发送一个请求到另一个域的话,可以查看HTTP访问控制
- open()方法的第三个参数:可选,是否是异步请求。如果是true(默认值),表示是异步请求。
send()方法的参数表示当请求为POST时,向服务器端发送请求的数据内容。如果发送的是表单数据格式的话,服务器端可以向字符串一样地解析。
"name=value&anothername="+encodeURIComponent(myVar)+"&so=on"
向服务器端发送的数据格式也可以是JSON、SOAP等格式。
注意:如果使用POST方式发送数据的话,在调用send()方法前,需要设置请求的MIME类型。:
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
第二步:处理服务器端的响应
当发送请求时,已经定义了一个函数来处理响应。
httpRequest.onreadystatechange = nameOfTheFunction;
这个函数可以做什么呢?首先,该函数需要检查请求的状态。如果状态值为4的话,这表示接收到完成的服务器端响应,可以继续处理。
if (httpRequest.readyState === 4) {
// everything is good, the response is received
} else {
// still not ready
}
readyState的值列表如下:
- 0 - 未初始化
- 1 - 正在加载
- 2 - 加载完毕
- 3 - 交互中
- 4 - 完成
接下来需要检查HTTP服务器端响应的状态代码,W3C网站 列出了所有的状态代码。下面的例子中,通过是否为200 OK的状态码来判断AJAX调用是否是成功的。
if (httpRequest.status === 200) {
} else {
}
在检查了请求的状态和响应的状态码后,就可以接收服务器端发送的数据并处理。有两种选项访问这些数据:
- httpRequest.responseText - 将服务器端响应作为文本字符串返回
- httpRequest.responseXML - 将响应作为一个XMLDocument对象返回,该对象可以使用JavaScript DOM函数进行遍历。
注意,上述步骤只有异步请求(open()方法的第三个参数设置为true)时才是有效的。如果使用同步请求的话,是不需要指定函数的。在调用send()方法后就可以访问到服务器端返回的数据,因为脚本会停止并等待服务器端的响应。
第三步:一个简单的例子
下面来做一个简单的HTTP请求。JavaScript将请求一个包含“I’m a test.”文本的“test.html”HTML文档,然后使用alert()方法打印test.html文件的内容。
<span id="ajaxButton" style="cursor: pointer; text-decoration: underline">
Make a request
</span>
<script type="text/javascript">
(function() {
var httpRequest;
document.getElementById("ajaxButton").onclick = function() { makeRequest('test.html'); };
function makeRequest(url) {
if (window.XMLHttpRequest) {
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {}
}
}
if (!httpRequest) {
alert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}
httpRequest.onreadystatechange = alertContents;
httpRequest.open('GET', url);
httpRequest.send();
}
function alertContents() {
if (httpRequest.readyState === 4) {
if (httpRequest.status === 200) {
alert(httpRequest.responseText);
} else {
alert('There was a problem with the request.');
}
}
}
})();
</script>
在这个例子中:
- 在浏览器中用户单击“Make a request”链接;
- 事件处理器调用makeRequest()方法,通过向该函数传递的参数,请求一个处在同一目录中的“test.html”HTML文件;
- 请求后,(onreadystatechange)执行 alertContents()方法;
- alertContents()方法用于检查如果正确地接收到响应,利用alert()方法打印“test.html”文件包含的内容。
注意:如果你发送一个请求后返回的是一段XML代码,而不是一个静态的XML文件的话,在Internet Explorer中必须设置一些响应头。如果没有设置响应头“Content-Type: application/xml”的话,当试图访问XML元素时IE将抛出一个”Object Expected”的JavaScript错误。
注意:如果没有设置头“Cache-Control: no-cache”的话,浏览器将缓存响应并不会重新提交请求。可以添加像时间戳或一个随机数的不同GET请求参数(参考 bypassing the cache)。
注意:如果httpRequest变量是全局的,makeRequest()方法因为冲突可能会被重写。将httpRequest变量定义在一个闭包中的话,可以避免AJAX函数的冲突。
注意:如果出现通信错误(如服务器端被关闭),当试图访问状态字段时在onreadystatechange的方法中将会抛出一个异常。确保if语句声明在try..catch语句中。
function alertContents() {
try {
if (httpRequest.readyState === 4) {
if (httpRequest.status === 200) {
alert(httpRequest.responseText);
} else {
alert('There was a problem with the request.');
}
}
}
catch( e ) {
alert('Caught Exception: ' + e.description);
}
}
第四步:使用XML进行响应
在前面的例子中,当接收到响应后使用XMLHttpRequest对象的responseText属性访问“test.html”文件包含的内容。现在尝试一下responseXML属性。
首先,创建一个用于请求的名为“test.xml”的有效XML文档,代码如下:
<?xml version="1.0" ?>
<root>
I'm a test.
</root>
在脚本中,只需要修改请求行:
onclick="makeRequest('test.xml')">
然后在alertContents()方法中,需要使用如下代码替换alert(httpRequest.responseText);这一行代码:
var xmldoc = httpRequest.responseXML;
var root_node = xmldoc.getElementsByTagName('root').item(0);
alert(root_node.firstChild.data);
这段代码需要由responseXML给予的XMLDocument对象,然后使用DOM方法来访问XML文档中的数据。
第五步:处理数据
最后,向服务器端发送一些数据并接收响应。这次JavaScript脚本请求一个动态页面“test.php”,该页面将根据发送的数据返回一个“computedString”-“Hello, [user data]!”,并使用alert()方法进行打印。
首先,向HTML页面中添加一个文本框,用户可以通过该文本框输入他们的名字:
<label>Your name:
<input type="text" id="ajaxTextbox" />
</label>
<span id="ajaxButton" style="cursor: pointer; text-decoration: underline">
Make a request
</span>
还需要添加一行事件处理器用于从文本框获取用户的数据,并将该数据随着URL传递给makeRequest()方法:
document.getElementById("ajaxButton").onclick = function() {
var userName = document.getElementById("ajaxTextbox").value;
makeRequest('test.php',userName);
};
修改makeRequest()方法用于接收用户数据并发送给服务器端。将请求方式从GET修改为POST,用户数据作为参数传递给httpRequest.send()方法:
function makeRequest(url, userName) {
...
httpRequest.onreadystatechange = alertContents;
httpRequest.open('POST', url);
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
httpRequest.send('userName=' + encodeURIComponent(userName));
}
alertContents()方法可以向第三步一样利用alert()方法打印服务器端返回的数据。假设服务器端返回的是computedString和用户数据的话,如果用户在文本框中输入“Jane”服务器端响应的内容会像是这样:
{“userData”:”Jane”,”computedString”:”Hi, Jane!”}
在alertContents()方法中使用这些数据,不仅可以使用alert()方法打印responseText的内容,还可以将其解析并打印computedString属性内容:
function alertContents() {
if (httpRequest.readyState === 4) {
if (httpRequest.status === 200) {
var response = JSON.parse(httpRequest.responseText);
alert(response.computedString);
} else {
alert('There was a problem with the request.');
}
}
}
注明:
本文翻译于Mozilla Developer Network
翻译者:金云龙
原文地址:https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started
<script type="text/javascript">
$(function () {
$('pre.prettyprint code').each(function () {
var lines = $(this).text().split('\n').length;
var $numbering = $('<ul/>').addClass('pre-numbering').hide();
$(this).addClass('has-numbering').parent().append($numbering);
for (i = 1; i <= lines; i++) {
$numbering.append($('<li/>').text(i));
};
$numbering.fadeIn(1700);
});
});
</script>
相关推荐
AJAX (Asynchronous JavaScript and XML, 异步 JavaScript 及 XML 技术) 是个新词,但内涵是两个存在已有一段时间的 JavaScript 功能。这两种功能以往一直被忽略,在 Gmail、Google suggest 及 Google Maps 出现后才...
的离线浏览版,共收录网页计4143页,包括AJAX,CSS,DOM,HTML,Javascript,NSS,RDF,RSS,SVG,XBL,XForms,XML,XML Web Services,Xpath,XSLT,XUL等技术手册,以及Mozilla系列浏览器的技术信息,为网页开发...
兼容IE6之前版本,IE7,Mozilla、Opera、Safari 和 大部分非 Microsoft 浏览器的AJAX发送类。 兼容IE6之前版本,IE7,Mozilla、Opera、Safari 和 大部分非 Microsoft 浏览器的AJAX发送类。
用于 Spark 的 Mozilla 遥测分析入门套件 这个包提供了一个 API 来将一组遥测 ping 加载到 RDD。 以下示例打印所选 ping 的操作系统分布。 import org . apache . spark . SparkContext import org . apache . ...
Ajax最简单例子,一个例子让你明白Ajax原理,XMLHttpRequest原理 var http_request = false; function createRequest(url) { http_request = false; if (window.XMLHttpRequest) { // Mozilla浏览器 ...
org.mozilla.javascript
org.mozilla.javascript-1.7.2.jar资源包
org.mozilla.universalchardet.jar org.mozilla.universalchardet.jar
IE和Mozilla兼容性汇总
1.1 为什么需要Ajax富客户端? 1.1.1 比较用户体验 1.1.2 网络延迟 1.1.3 异步交互 1.1.4 独占或瞬态的使用模式 1.1.5 忘掉Web 1.2 Aiax的四个基本原则 1.2.1 浏览器中的是应用而不是内容 1.2.2 服务器交付的是数据而...
mozilla 平台介绍书籍和开发手册 方便进行PC,浏览器等客户端应用程序开发
Mozilla FireFox V2Mozilla FireFox V2Mozilla FireFox V2
Mozilla Firefox V3.5.4,若需要最新版本,请去mozilla官方网站:http://www.mozilla.com/en-US/
mozilla_源码编译简介 首先必须使用GNU make来编译mozilla的代码,其他make程序可能会有问题。编译最简单的方法就是
mozilla绑定基本用法示例 .xul .xbl .css
Mozilla Firefox 3.6 Opera 1050Mozilla Firefox 3.6 Opera 1050Mozilla Firefox 3.6 Opera 1050
Mozilla上使用Git的工具。 为了进行此设置,请将此存储库克隆到某个地方,运行git submodule init ,然后运行git submodule init git submodule update命令,然后将您的克隆添加到$ PATH中。 有些命令需要python2 。...
mozilla firefox 开发者文档,把所有的网页下载下来的打包。有的朋友上网不方便,直接下载阅读。能上网的直接上网看了。
本分详细对Mozilla的结构和对其进行扩展的基本步骤。
Readability.js一个mozilla的网页主体内容解析库