ajax的简单实现及源码(asp,php,jsp……)

客户端ajax实现的简单说法，就是通过调用客户端的xmlhttp组件，远程得到数据，然后通过js赋值到页面的过程，所以，简单的说ajax分为以下几部分

1、调用xmlhttp组件

function GetXmlHttpObject(handler)
{
var objXmlHttp=null
if (navigator.userAgent.indexOf(“Opera”)>=0)
{
objXmlHttp=new XMLHttpRequest()
objXmlHttp.onload=handler
objXmlHttp.onerror=handler
return objXmlHttp
}
if (navigator.userAgent.indexOf(“MSIE”)>=0)
{
var strName=”Msxml2.XMLHTTP”
if (navigator.appVersion.indexOf(“MSIE 5.5″)>=0)
{
strName=”Microsoft.XMLHTTP”
}
try
{
objXmlHttp=new ActiveXObject(strName)
objXmlHttp.onreadystatechange=handler
return objXmlHttp
}
catch(e)
{
alert(“Error. Scripting for ActiveX might be disabled”)
return
}
}
if (navigator.userAgent.indexOf(“Mozilla”)>=0)
{
objXmlHttp=new XMLHttpRequest()
objXmlHttp.onload=handler
objXmlHttp.onerror=handler
return objXmlHttp
}
}

这里设定了根据客户端浏览器的不同调用不同的xmlhttp组件，IE下为Msxml2.XMLHTTP或Microsoft.XMLHTTP，而Firefox和opera浏览器下，则调用XMLHttpRequest()

2、使用xmlhttp得到远程页面数据

function showHint(str)
{
if (str.length > 0)
{
var url=”gethint.asp?sid=” + Math.random() + “&q=” + str
xmlHttp=GetXmlHttpObject(stateChanged)
xmlHttp.open(“GET”, url , true)
xmlHttp.send(null)
}
else
{
document.getElementById(“txtHint”).innerHTML=”"
}
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState==”complete”)
{
document.getElementById(“txtHint”).innerHTML=xmlHttp.responseText
}else
{
document.getElementById(“txtHint”).innerHTML=”<img src=’loading12.gif’ width=’51′ height=’36′>”
}
}

这里一段说明的是，从网址gethint.asp得到数据，然后根据返回的情况将结果赋值到页面中的txtHint上

3、数据提供页面

在我们的演示中，是个asp的数据输出页面，其实，不论哪种语言，只要能根据要求输出结果就行，ajax的核心是xmlhttp，而不是数据来源，所以，不管是php ajax还是asp ajax，他们的ajax部分都是一样的，不同的只在数据提供页面上

这里提供一个asp版本ajax演示程序：http://www.ai-2.cn/tools/ajax.rar