Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML)由HTML、JavaScript技术、DHTML和DOM组成,这一杰出的方法可以将笨拙的Web页面转化成交互性的Ajax应用程序。使高效的Web开发成为现实。
核心:XMLHttpRequest对象
Ajax用到的基本技术:
HTML用于建立Web表单并确定应用程序其他部分使用的字段。
JavaScript代码是运行Ajax应用程序的核心代码,帮助改进与服务器应用程序的通信。
DHTML用于动态更新表单。我们将使用div、span和其他动态HTML元素来标记HTML。
文档对象模型DOM用于(通过JavaScript代码)处理HTML结构和(某些情况下)服务器返回的XML。
问题:
传统的Web应用采用同步交互过程,这种情况下,用户首先向HTTP服务器触发一个行为或请求的调用。反过来,服务器执行某些任务,再向发出请求的用户返回一个HTML页面。这是一种不连贯的用户体验,服务器在处理请求的时候,用户多数时间处于等待的状态,屏幕内容也是一片空白。
与传统的Web应用不同,AJAX采用异步交互过程。AJAX在用户与服务器之间引入一个中间媒介,从而消除了网络交互过程中的处理—等待—处理—等待缺点。用户的浏览器在执行任务时即装载了AJAX引擎。AJAX引擎用JavaScript语言编写,通常藏在一个隐藏的框架中。它负责编译用户界面及与服务器之间的交互。AJAX引擎允许用户与应用软件之间的交互过程异步进行,独立于用户与网络服务器间的交流。现在,可以用JavaScript调用AJAX引擎来代替产生一个HTTP的用户动作,内存中的数据编辑、页面导航、数据校验这些不需要重新载入整个页面的需求可以交给AJAX来执行。
AJAX的优点:
l 减轻服务器的负担。AJAX的原则是“按需取数据”,可以最大程度的减少冗余请求和响应对服务器造成的负担。
l 无刷新更新页面,减少用户心理和实际的等待时间。特别的,当要读取大量的数据的时候,不用像reload那样出现白屏的情况,AJAX使用XMLHttp对象发送请求并得到服务器响应,在不重新载入整个页面的情况下用JavaScript操作DOM最终更新页面。所以在读取数据的过程中,用户所面对的不是白屏而是原来的页面内容(也可以加一个Loading的提示框让用户知道处于读取数据过程),只有当数据接收完毕之后才更新相应部分的内容。这种更新是瞬间的,用户几乎感觉不到。带来更好的用户体验。
l 可以把以前一些服务器负担的工作转嫁到客户端
l 可以调用外部数据
l 基于标准化的并被广泛支持的技术,不需要下载插件或者小程序
l 进一步促进数据呈现和数据处理的分离
XMLHttpRequest简介
l open():建立到服务器的新请求
l send():向服务器发送请求
l abord():退出当前请求
l readyState():提供当前HTML的就绪状态
l responseText():服务器返回的响应文本
Ajax基本上就是把JavaScript技术和XMLHttpRequest对象放在Web表单和服务器之间。
创建新的XMLHttpRequest对象:
<script language= “javascript” type= “text/javascript”>
var request = false;
try {
request = new XMLHttpRequest();
} catch (failed) { // js中只有异常变量,没有异常对象(Java中)
request = false;
}
if (!request) {
alert(“Error initializing XMLHttpRequest”);
} else {
alert(request);
}
</script>
增加对Microsoft浏览器的支持:
<script language= “javascript” type= “text/javascript”>
var request = false;
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject(“Msxml2.XMLHTTP”);
} catch (othermicrosoft) {
try {
request = new ActiveXObject(“Microsoft.XMLHTTP”);
} catch (failed) {
request = false;
}
}
}
if (!request) {
alert(“Error initializing XMLHttpRequest”);
} else {
alert(request);
}
</script>
打开请求:
有了要连接的URL后就可以配置请求了。可以用XMLHttpRequest对象的open()方法来完成,该方法有五个参数:
l request-type:发送请求的类型。典型的值是GET或POST,但也可以发送HEAD请求
l url:要连接的URL
l asynch:如果希望使用异步连接则为true,否则为false,默认为true
l username:如果需要身份验证,则可以在此指定用户名,该可选参数没有默认值
l password:如果需要身份验证,则可以在此指定口令,该可选参数没有默认值
发送请求:
可以使用send()方法发送数据,也可以通过URL本身发送数据。事实上,GET请求(在典型的Ajax应用中大约占80%)中,用URL发送数据要容易得多。如果需要发送安全信息或XML,可能要考虑使用send()方法发送内容。如果不需要通过send()方法传递数据,则只要传递null作为该方法的参数即可。
指定回调方法:
l 服务器完成了请求之后会发生什么?服务器在完成通过XMLHttpRequest发送给它的请求处理之后需要某种指示说明怎么做。
l onreadystatechange属性允许指定一个回调函数。回调允许服务器反向调用Web页面中的代码。它也给了服务器一定程度的控制权,当服务器完成请求之后,会查看XMLHttpRequest对象,特别是onreadystatechange属性。然后调用该属性指定的任何方法。之所以称为回调时因为服务器向网页发起调用,无论网页本身在做什么。
l 这就是称之为异步的原因:用户在一层上操作表单,而在另一层上服务器响应请求并触发onreadystatechange属性指定的回调方法。
HTTP就绪状态
Ajax应用程序中需要了解五种就绪状态:
l 0:请求没有发出(在调用open()之前)
l 1:请求已经建立但还没有发出(在调用open()之前)
l 2:请求已经发出正在处理之中(这里通常可以从响应得到内容头部)
l 3:请求已经处理,响应中通常有部分数据可用,但是服务器还没有完成响应
l 4:响应已经完成,可以访问服务器响应并使用它
HTTP状态码
我们期望的状态码是200,它表示一切顺利
如果就绪状态是4而且状态码200,就可以处理服务器的数据了,而且这些数据应该就是要求的数据(而不是错误或者其他有问题的信息)。
例子:
function getCustomerInfo() {
var phone = document.getElementbyId(“phone”).value;
var url = “/cgi-local/lookupCustomer.php?phone=” + escape(phone);
request.open(“GET”, url, true);
request.onreadystatechange = updatePage;
request.send(null);
}
function updatePage() {
if (request.readyState == 4) {
if (request.status == 200) {
alert(“Server is done!”);
var text = response.responseText;
alert(text);
document.getElementById(“order”).value = response[0];
document.getElementById(“address”).innerHTML = response[1].replace(//n/g, “”);
}
} else {
alert(“Error: status code is ” + request.status);
}
}
<div id=“address”></div>