网站架构基本知识/杭州关键词排名工具

在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无刷新。

现在的时间是：

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);

}

}