Ajax并不是什么新技术，只要有少量JS的语言基础和基本的WEB开发知识，可以在很快时间内掌握之。
Ajax的核心是XMLHttpRequest 对象，关于其具体的信息，请参考
http://www.w3school.com.cn/xmldom/dom_http.asp
下面以一个具体的程序为例，相信诸位可以很快学会Ajax的基本知识了。
这个程序主要是实现的功能是：用户点击页面上的一个按钮，后台将该页面对应的商品添加到购物车，成功后返回一个消息，并以对话框形式弹出。整个过程页面无刷新，这也是Ajax最重要的特征之一。
所有的Ajax代码位于一个单独的JS文件libajax.js中。
页面上的触发代码如下:
<
a
href
="javascript:addToCart();"
cssStyle
="color: #FFFFFF;"
/>
在libajax.js文件中，程序创建一个XMLHttpRequest对象，代码如下:
var request;
//全局变量，用来接收创建的对象
function createRequest() {
try {
request = new XMLHttpRequest();//针对FireFox,Opera等浏览器
} catch (trymicrosoft) {
try {
request = new ActiveXObject( "Msxml2.XMLHTTP");//针对MS IE 7,8浏览器
} catch (othermicrosoft) {
try {
request = new ActiveXObject( "Microsoft.XMLHTTP");// 针对MS IE 6浏览器
} catch (failed) {
request = false;//一般不会到这里的，但也有可能
}
}
}
if (!request)
alert( "Error initializing XMLHttpRequest!");
}
function createRequest() {
try {
request = new XMLHttpRequest();//针对FireFox,Opera等浏览器
} catch (trymicrosoft) {
try {
request = new ActiveXObject( "Msxml2.XMLHTTP");//针对MS IE 7,8浏览器
} catch (othermicrosoft) {
try {
request = new ActiveXObject( "Microsoft.XMLHTTP");// 针对MS IE 6浏览器
} catch (failed) {
request = false;//一般不会到这里的，但也有可能
}
}
}
if (!request)
alert( "Error initializing XMLHttpRequest!");
}
下面则是核心的addToCart()
function addToCart() {
var numOfGoods = document.getElementById( "numOfGoods").value;
var numOfGoods = document.getElementById( "numOfGoods").value;
//numOfGoods是页面上的一个文本框，用于输入要购买的商品数量
var goodsID = document.getElementById( "goodsID").value;
var url = "/Shop/ccc/addToCart.action?goodsID=" + escape(goodsID) + "&numOfGoods=" + escape(numOfGoods);
createRequest();
request.open( "GET", url, true);
request.onreadystatechange = updatePage;
request.send( null);
}
var goodsID = document.getElementById( "goodsID").value;
var url = "/Shop/ccc/addToCart.action?goodsID=" + escape(goodsID) + "&numOfGoods=" + escape(numOfGoods);
createRequest();
request.open( "GET", url, true);
request.onreadystatechange = updatePage;
request.send( null);
}
回调函数的代码如下:
function updatePage() {
if (request.readyState == 4) {
if (request.status == 200) {
var response = request.responseText;
document.getElementById( "cartStatus").value = response;
alert( "Adding to cart successfully!");//显示成功对话框
} else
alert( "Please login to your account. ErrorCode: " + request.status);
}
}
if (request.readyState == 4) {
if (request.status == 200) {
var response = request.responseText;
document.getElementById( "cartStatus").value = response;
alert( "Adding to cart successfully!");//显示成功对话框
} else
alert( "Please login to your account. ErrorCode: " + request.status);
}
}
程序自动将返回的字符串显示在cartStatus这个HTML标签中。
以上是Ajax最常用的操作，一般的Ajax程序均可按照这个模式来进行。
本文转自 kevx 51CTO博客，原文链接：http://blog.51cto.com/spinlock/287188，如需转载请自行联系原作者
