Ajax目前是社区内最热门的话题之一了,最近在我们的项目中用了大量的Ajax,现在把我们的使用方法在这儿写出来,希望大家能指教。
因为要用到Ajax就肯定要用到XMLHttpRequest对象,但由于不同的浏览器版本,相应的生成它的方法也有所不同,所以我们不得不对浏览器的版本进行判断,试想,如果我们要在很多地方都要写那些繁琐的代码会觉的很麻烦,代码的重用也很低,所以我们写一个Ajax的对象。代码如下:
//*********************************************************
// 目的: AJAX类
// 输入: 无
// 返回: 返回XMLHttp对象
// 例子: var myConn = new XHConn();
//
// if (!myConn) alert("XMLHTTP not available. Try a newer/better browser.");
//
// var fnWhenDone = function (oXML) { alert(oXML.responseText); };
//
// myConn.connect("mypage.php", "POST", "foo=bar&baz=qux", fnWhenDone);
//
//*********************************************************
function XHConn()
{
var xmlhttp = false, bComplete = false;
try
{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
try
{
xmlhttp = new XMLHttpRequest();
}
catch (e)
{
xmlhttp = false;
}
}
}
if (!xmlhttp) return null;
this.connect = function(sURL, sMethod, sVars, fnDone)
{
if (!xmlhttp) return false;
bComplete = false;
sVars = (sVars == '') ? Math.random() : sVars + "&" + Math.random();
sMethod = sMethod.toUpperCase();
try
{
if (sMethod == "GET")
{
xmlhttp.open(sMethod, sURL+"?"+sVars, true);
xmlhttp.setRequestHeader("Content-Type", "text/html;charset=GB2312");
sVars = "";
}
else
{
xmlhttp.open(sMethod, sURL, true);
xmlhttp.setRequestHeader("Method", "POST "+sURL+" HTTP/1.1");
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
}
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && !bComplete)
{
bComplete = true;
fnDone(xmlhttp);
}
};
xmlhttp.send(sVars);
}
catch(z)
{
return false;
}
return true;
};
return this;
}
通过这个对象,我们把那些繁琐的代码都封装到里面,这样大大提高了代码的重用性,每次要用Ajax时我们只需要在我们的页面上 new一个XHConn()对象就行了,然后通过调用它的方法connect(sURL, sMethod, sVars, fnDone)就可以和服务器进行异步交互了。