Ajax 简单示例

来源：互联网发布：手机控制电脑桌面软件编辑：程序博客网时间：2024/05/19 01:58

文章来源：http://zuowangxi.iteye.com/blog/582097

<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>xmlhttprequestajaxdemo</title>
<scripttype="text/javascript"language="javascript">
varreq;//定义变量，用来创建xmlhttprequest对象
functioncreatReq()//创建xmlhttprequest,ajax开始
{
varurl="ajaxServer.aspx";//要请求的服务端地址
if(window.XMLHttpRequest)//非IE浏览器及IE7(7.0及以上版本)，用xmlhttprequest对象创建
{
req=newXMLHttpRequest();
}
elseif(window.ActiveXObject)//IE(6.0及以下版本)浏览器用activexobject对象创建,如果用户浏览器禁用了ActiveX,可能会失败.{
req=newActiveXObject("Microsoft.XMLHttp");
}

if(req)//成功创建xmlhttprequest
{
req.open("GET",url,true);//与服务端建立连接(请求方式post或get，地址,true表示异步)
req.onreadystatechange=callback;//指定回调函数
req.send(null);//发送请求
}
}

functioncallback()//回调函数，对服务端的响应处理，监视response状态
{
if(req.readystate==4)//请求状态为4表示成功
{
if(req.status==200)//http状态200表示OK
{
Dispaly();//所有状态成功，执行此函数，显示数据
}
else//http返回状态失败

}
else//请求状态还没有成功，页面等待
{
document.getElementById("myTime").innerHTML="数据加载中";
}
}

functionDispaly()//接受服务端返回的数据，对其进行显示
{
document.getElementById("myTime").innerHTML=req.responseText;
}

</script>
</head>
<body>
<divid="myTime"></div>

<inputid="Button1"type="button"value="GetTime"onclick="creatReq();"/>
</body>
</html>

对于Ajax需要注意执行的顺序

对于input 类型为text的动作有 onChange() onPropertyChange() 后者比前者的反应更加的敏感，有可能onChange()不会随着里面的改变而改变，但是onPropertyChange()肯定会随着value的值改变而改变。

对于返回的值，要把结果写在最后的条件都符合的情况下，就是注意函数的位置。

操作xml的时候用到的方法和以前操作xml的是一样的，如getElementsByTagName(),还有.firstChild.data,nodeValue.

Ajax执行的顺序是open,onreadystatechange,send 都是基于流的形式传输。

对于servlet里面注意都是用流的形式进行传输和取值。resp.setContentType()，里面得相应的设置方式。