0. 读者对象和先验知识
这个教程将包括Ajax的基础知识. 在此之前, 你需要知道CSS, DHtml以及Javascript的相关知识. 我们有关于使用ajax所必须知道的这些知识的相应的教程.
1. 简介
1.1 什么是Ajax
Ajax 是异步Javascript和XML(Asynchronous JavaScript and XML)的缩写. 它是一种创建交互式web应用的开发技术. 不像一般的网页一样当页面内容有所变化的时候需要重新加载整个页面, Ajax允许在后台只和服务器端交换少量的数据, 以及实现异步刷新.
这里有一些例子,点击查看.
Ajax 就是以下技术的结合:
onreadystatechange 来设置我们的回调函数.var obj;下面介绍一下XMLHttpRequest 类的属性和方法:
function ProcessXML(url) {
// native object
if (window.XMLHttpobject) {
// obtain new object
obj = new XMLHttpobject();
// set the callback function
obj.onreadystatechange = processChange;
// we will do a GET with the url; "true" for asynch
obj.open("GET", url, true);
// null for GET with native object
obj.send(null);
// IE/Windows ActiveX object
} else if (window.ActiveXObject) {
obj = new ActiveXObject("Microsoft.XMLHTTP");
if (obj) {
obj.onreadystatechange = processChange;
obj.open("GET", url, true);
// don't send null for ActiveX
obj.send();
}
} else {
alert("Your browser does not support AJAX");
}
}
属性
| readyState | 在一个请求周期里readyState 将从0到4间变化: 0: 未初始化. 1: 建立链接. 2: 收到请求. 3: 正在处理. 4: 完毕并准备反馈. |
| status | 200: "OK" 404: 页面不存在. |
| onreadystatechange | 通过这个属性设置回调函数 |
| responseText | 数据以文本的形式返回. |
| responseXml | 数据以XML的形式返回. |
方法
| open(mode, url, boolean) | mode: request(请求)的类型: GET 或者 POST url: 文件位置 boolean: true (异步) 或者false (同步). |
| send("string") | 使用GET则为null (in native mode; null not passed with ActiveX) |
function processChange() {
// 4 means the response has been returned and ready to be processed
if (obj.readyState == 4) {
// 200 means "OK"
if (obj.status == 200) {
// process whatever has been sent back here:
// anything else means a problem
} else {
alert("There was a problem in the returned data:n");
}
}
}1.3 其他部分<BODY>注意, 从服务器端返回的数据需要被转换成文本或者XML格式. 函数
Enter your Username: < id="username" name="username" type="text" onblur="checkUserName(this.value,'')" >
</BODY>
下面就是客户端缺少的那部分代码: html代码中调用的这个函数来使整个过程顺利执行:
function checkUserName(input, response) {
// if response is not empty, we have received data back from the server
if (response != '') {
// the value of response is returned from checkName.php: 1 means in use
if (response == '1') {
alert("username is in use");
} else {
// if response is empty, we need to send the username to the server
url = 'http://localhost/xml/checkName.php?q=' + input;
ProcessXML(url);
}
}
}
processChange()处理返回数据. 下面是这个函数的实现详细信息:function processChange() {
// 4 means the response has been returned and ready to be processed
if (obj.readyState == 4) {
// 200 means "OK"
if (obj.status == 200) {
// process whatever has been sent back here:
// we need to parse the returned data (text or XML)
// and then call checkUserName again with response set
// to the appropriate value.
// anything else means a problem
} else {
alert("There was a problem in the returned data:n");
}
}
}现在我们只需要有服务器端的代码就可以是这个应用正常工作了, 需要一个客户端的脚本或者servlet来获取GET请求, 并检验用户名, 然后返回一个反馈信息. 下面是使用php实现的示例, 所有的东西都被硬编码, 所以可能看起来和真实应用的还有差距, 不过意思基本一样.<?php header('Content-Type: text/xml');
function checkName($q) {
if (isset($q)){
switch(strtolower($q)) {
case 'maggie' :
return '1';
break;
...
default:
return '0';
}
} else {
return '0';
}
}
?>
2. Google 和Ajax
Ajax 在最近几年得以如此流行, 部分原因是因为Google 在Gmail, Google Maps 以及其他的基于web的应用里成功使用了此技术. 另外, Google还发布了一个针对网站管理员, 博客或者其他任何网站拥有者的API, 允许他们在站点中插入搜索.【本文翻译仅为外语学习及阅读目的，原文作者个人观点与译者及译言网无关】
