在Ajax中所以说的Ajax引擎实际上说的就是Ajax的核心对象XMLHttpRequest对象。
Ajax核心对象的方法和属性
XMLHttpRequest对象的方法:
方法
描述
Open(String method,String URL,boolean asynch)
建立对服务器的调用,其中参数一表示HTTP协议调用的方法,URL表示调用的服务器的地址,asynch表示是否采用异步方式
Send(content)
先服务器发出请求,如果采取异步方式,该方法会立即执行
XMLHttpRequest对象的属性:
属性
描述
Onreadystatechange
请求状态改变的事件触发器(readyState变化时会调用此方法)
readyState
请求状态0表示未初始化1表示open方法调用成功2表示服务器已经应答客户端的请求3表示交互中4表示数据接收完成
responseText
服务器返回的文本内容
responseXML
服务器返回的兼容的DOM的XML内容
Status
服务器返回的状态码,200表示成功404表示未找到
使用Ajax对象实现无刷新只编写用户自定义的Javascript脚本来实现Ajax的无刷新。
要实现Ajax无刷新也需要以下几步:
·首先取得文本框中的内容;由于不是在jQuery环境下,所以此时只能用DOM的方式取出节点;
·创建XMLHttpRequest对象,该步骤是最为复杂的,需要针对不同的浏览器建立不同的对象;
·注册回调函数,当请求状态改变时调用该函数;
·设置与服务器的连接信息;
·发送数据;
·创建回调函数,处理服务器返回的数据,将返回的数据动态地显示在JSP页面上。
针对于第一步,由于是在DOM下,所以要用Javascript取得文本框中的内容,如下:
//使用DOM的方式获取文本框中的值
varuserName = document.getElementById("uname").value;
针对于第二步,由于浏览器之间的差异,所以要分别为不同浏览器创建Ajax核心对象,如下:
//创建XHR对象
if(window.XMLHttpRequest)
{
//针对Firefox、Opera、Safari、IE7.0 IE8.0
varxmlHttp =newXMLHttpRequest();
//针对某些特定版本的Mozilla浏览器Bug进行修复
if(xmlHttp.overrideMimeType)
{
xmlHttp.overrideMimeType("text/xml");
}
}
elseif(window.ActiveXObject)
{
//针对于IE6.0 IE5.0及以下版本
//可以创建XMLHttpRequest对象的控件名称,保存在一个js数组中
varactivexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for(vari = 0; i < activexName.length; i++)
{
try
{
//取出一个控件进行创建,如果创建成功就终止循环
xmlHttp =newActiveXObject(activexName[i]);
break;
}
catch(e)
{
}
}
}
针对于第三步,当Ajax核心对象的请求状态发生改变时要调用回调函数,如下:
xmlHttp.onreadystatechange = callback;
针对于第四步,就是建立与服务器端的连接,准备与服务器进行交互,如下:
xmlHttp.open("GET","TestServlet?uname="+ userName,true);
针对于第五步,就是将准备好的数据发送给服务器端,如下:
xmlHttp.send(null);
针对于第六步,创建回调函数,处理服务器端返回的数据,如下:
functioncallback()
{
if(xmlHttp.readyState == 4)
{
if(xmlHttp.status == 200)
{
varresponseText = xmlHttp.responseText;
//将数据显示在DIV上
vardivNode = document.getElementById("result");
divNode.innerHTML = responseText;
}
}
}
以上就是一个完整的以Ajax的方式,不依赖于任何框架、库来实现的Ajax无刷新。
ajax实现自动刷新现在的时间是:
var xmlobj;
var count=0;
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlobj=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
xmlobj=new XMLHttpRequest();
}
}
function Autofresh(){
createXMLHttpRequest();
count=count+1;
xmlobj.open("GET","currenttime.php?count="+count,true);
xmlobj.onreadystatechange=doAjax;
xmlobj.send("r="+Math.random());//使用随机数处理缓存
}
function doAjax(){
if(xmlobj.readyState==4 && xmlobj.status==200){
var time_span=document.getElementById('currenttime');
time_span.innerHTML=xmlobj.responseText;
setTimeout("Autofresh()",2000);
}
}