好久没来写东西了,不是没空就是懒得动笔,今天正好有空,写一写吧!!
都说Ajax是好东西,看了google新东东一个个推出,发现还真是个好东西啊,赶快自学!!高手有路过麻烦留言啊!!
创建异步请求的对象:
对于不同浏览器有不同实现
以下方法可以根据不同的浏览器返回不同的实例:
function getRequestByBrowser(){
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一般适合用在返回的数据比较少或应用十分简单时。