自学ing..Ajax循序渐近...
自学ing..Ajax循序渐近... 好久没来写东西了，不是没空就是懒得动笔，今天正好有空，写一写吧！！
都说Ajax是好东西，看了google新东东一个个推出，发现还真是个好东西啊，赶快自学！！高手有路过麻烦留言啊！！
创建异步请求的对象：
对于不同浏览器有不同实现
以下方法可以根据不同的浏览器返回不同的实例：
var result;
if (window.XMLHttpRequest) { // 如果为Mozilla等浏览器
// 为Mozilla等浏览器创建适用的的实例
result = new XMLHttpRequest();
} else if (window.ActiveXObject) { // 如果是IE
var ieReqs = ['MSXML3', 'MSXML2', 'Microsoft']
for (var i = 0; i < ieReqs.length; ++ i) {
try {
result= new ActiveXObject(ieReqs[i] + '.XMLHTTP')
} catch (e) {
continue;
}
break;
}
}
// 如果以上创建方法都不能成功创建实例，则给出一个提示
if (typeof result == 'undefined'){
alert('妖怪，你用的是什么浏览器？');
}
return result;
}这里是对所返回的对象的详细分析：
首先分析这个request的几种常用方法：
abort()
中止当前的请求
getAllResponseHeaders()
以字符串形式返回headers
getResponseHeader('header')
以字符串形式返回某个header值
open('method', 'URL'[, async[, 'userName'[, 'password']]])
设置未决的请求的目标 URL, 方法, 和其他参数
method - 请求方法如GET、POST
URL- 请求的url
async - 是否异步true|false
userName、password - 偶暂时还不知道具体用处，省略先~~
[ ]包含的都可省略
send(content)
发送请求：具体content的要求暂时不清楚，只知道GET时为null，POST时需要，确认前留空先~~
setRequestHeader('label', 'value')
设置header并和请求一起发送：这个应该不用解释了吧...
然后了解一下属性：
onreadystatechange
该属性是状态改变的事件触发器
readyState
对象状态(integer型)，包含以下几种情况：
0 = 未初始化
1 = 读取中
2 = 已读取
3 = 交互中
4 = 完成
responseText 服务器进程返回数据的文本版本
responseXML 服务器进程返回数据的兼容DOM的XML文档对象
status 服务器返回的状态码, 如:404 = '文件末找到' 、200 ='成功'
statusText 服务器返回的状态文本信息
然后看看调用代码：
var url = 'http://www.csdn.net';
var handlerCallback = getTextCompleteHandler(request, callback);
request.onreadystatechange = handlerCallback;
request.open('GET', url, true);
request.send(null);
再看看回调代码：
function getTextCompleteHandler(req, processFunction) {
// 返回一个监听request实例的匿名函数
return function () {
// 如果请求的状态是“完成”
if (req.readyState == 4) {
// 如果已经成功接收了服务器响应
if (req.status == 200) {
// 一切正常，取出响应的文本，交给处理函数
processFunction(req.responseText);
} else {
// 异常的http响应
alert('HTTP error: ' + req.status);
}
}
}
}
接下来就太太太太简单了
只需要写一个callback就可以开始工作了！
function callback(str){
alert(str);
}
理一下流程先：
调用函数是这样的：
var handlerCallback = getTextCompleteHandler(request, callback);
也就是用request和最终期望调用的处理实际业务逻辑的函数名作为参数，让getTextCompleteHandler自动生成一个函数handlerCallback
而这个handlerCallback接着被以下代码作为回调参数：
request.onreadystatechange = handlerCallback;
至此开始，每当request出现状态的改变，都会去的调用一次这个被自动生成的handlerCallback函数，而我们可以从这个函数的定义了解到，它只是用来简单的判断request的运行状态，在执行完毕并且返回的响应也为正常（200）时，拿出返回的Text对象，交给实现定义好的执行函数（本例中就是callback），如下：
processFunction(req.responseText);
这个时候，callback就被调用了，这个处理函数就可以用来解析获得的text，并且对document对象做适当的修改，本例没有做逻辑，只是简单的alert出来而已
整理后的代码基本上象这样！测一下吧！
<html>
<head>
<script>
function getRequestByBrowser(){
var result;
if (window.XMLHttpRequest){
result= new XMLHttpRequest();
} else if (window.ActiveXObject){
var ieReqs = ['MSXML3', 'MSXML2', 'Microsoft']
for (var i = 0; i < ieReqs.length; ++ i) {
try {
result= new ActiveXObject(ieReqs[i] + '.XMLHTTP')
} catch (e) {
continue;
}
break;
}
}
if (typeof result == 'undefined'){
alert('浏览器不支持哦！你的操作将被取消！');
}
return result;
}
function doAction(){
var request = false;
request = getRequestByBrowser();
if (!request) {
return;
}
var url = '#任意可以访问的网址#';
var handlerCallback = getTextCompleteHandler(request, callback);
request.onreadystatechange = handlerCallback;
request.open('GET', url, true);
request.send(null);
}
function getTextCompleteHandler(req, processFunction) {
return function () {
if (req.readyState == 4) {
if (req.status == 200) {
processFunction(req.responseText);
} else {
alert('出现HTTP错误，错误号为： ' + req.status);
}
}
}
}
function callback(str){
alert(str);
}
</script>
</head>
<body>
我的第一个Ajax的HelloWorld！<br/>
<div>
<a href='javascript:doAction();' >Click Here</a>
</div>
</body>
</html>用这些代码在本地新建一个htm文件，打开（XP-sp2的话记得先点掉限制提示），点链接...
沉默数秒（取决与服务器的处理速度与响应包含数据的大小）后，将会看到一个硕大无比的alert框....看看代码，url指定网址的html源码码哦！！
注意：完整和规范的Ajax应用中getTextCompleteHandler应该被替换成getXmlCompleteHandler实现，由回掉的函数获取一个XML的DOM对象来处理数据及页面表现。Text一般适合用在返回的数据比较少或应用十分简单时。
