您的位置：首页 > 其它

ajax学习笔记（二）——AJAX详解

2012-10-10 16:55 288 查看

第一篇，理解了ajax是个什么东西，现在我们来好好探索一下它吧！

先发一个我自己做的小程序（简易百度搜索），我们再来一步步理解它：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript">
var xmlHttp=false;
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
xmlHttp=false;
}
}
@end @*/
if(!xmlHttp && typeof XMLHttpRequest != 'undefined'){
xmlHttp=new XMLHttpRequest();
}
function callServer(){
var result=document.getElementById("Search").value;
if(result=="" || result==null) return;
var url="documentproc/processing1.ashx?key="+escape(result);
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange=updatePage;
xmlHttp.send(null);

}

function updatePage(){
if(xmlHttp.readyState==1){
document.getElementById("stateStr").innerHTML="正在加载文章对象……";
}
if(xmlHttp.readyState==2){
document.getElementById("stateStr").innerHTML="连接对象加载完毕！";
}
if(xmlHttp.readyState==3){
document.getElementById("stateStr").innerHTML="数据获取中，请稍后……";
}
if(xmlHttp.readyState==4){
if (xmlHttp.status==200){
var result=xmlHttp.responseText.split("_");
document.getElementById("stateStr").innerHTML=result[0];
}
else if (xmlHttp.status == 404){
document.getElementById("stateStr").innerHTML="Request URL does not exist,发送的地址错了,没有此页面";
}
else if (xmlHttp.status == 403){
document.getElementById("stateStr").innerHTML="Access denied.无权访问";
}
else{
document.getElementById("stateStr").innerHTML="Error: status code is " + xmlhttp.status;
}
}
}
</script>
<title>无标题页</title>
</head>
<body>
<input id="Search" type="text" style="width: 200px;" onkeyup="callServer();"/><span style=" font-size:12px; color:Red">*请输入字母a-e</span>
</br>
<span id="stateStr" style=" background-color:Yellow; color:Black;"></span>
</body>
</html>

附加：后台处理文件processing1.ashx

View Code

function updatePage(){
if(xmlHttp.readyState==1){
document.getElementById("stateStr").innerHTML="正在加载文章对象……";
}
if(xmlHttp.readyState==2){
document.getElementById("stateStr").innerHTML="连接对象加载完毕！";
}
if(xmlHttp.readyState==3){
document.getElementById("stateStr").innerHTML="数据获取中，请稍后……";
}
if(xmlHttp.readyState==4){
if (xmlHttp.status==200){
var result=xmlHttp.responseText.split("_");
document.getElementById("stateStr").innerHTML=result[0];
}
else if (xmlHttp.status == 404){
document.getElementById("stateStr").innerHTML="Request URL does not exist,发送的地址错了,没有此页面";
}
else if (xmlHttp.status == 403){
document.getElementById("stateStr").innerHTML="Access denied.无权访问";
}
else{
document.getElementById("stateStr").innerHTML="Error: status code is " + xmlhttp.status;
}
}
}

request.readyState 的状态

0：请求没有发出（在调用 open() 之前）。

1：请求已经建立但还没有发出（调用 send() 之前）。一般用不着这之前

2：请求已经发出正在处理之中（这里通常可以从响应得到内容头部）。

3：请求已经处理，响应中通常有部分数据可用，但是服务器还没有完成响应。

4：响应已完成，可以访问服务器响应并使用它

responseText 或 responseXML 属性

document.getElementById("stateStr").innerHTML=xmlHttp.responseText;

responseXML：后面会专门做一个xml的例子。

至此：ajax我算是入门了吧？

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航