前言:
Ajax让web开发丰富多彩,增强了用户的体验度。Ajax是web开发的必修课。Ajax的原理大家都知道,而且实现起
来也并不复杂,但是因为它强大的作用,所以它有很多不同的实现方式。其中jquery就对Ajax进行了封装,提供了一系
列的Ajax函数,来简化我们对Ajax的使用。
本篇文章先来对传统的Ajax实现和jquery的实现做一个简单的对比,让大家了解一下这种简化带来的便利。
原始的Ajax实现:
<span style="font-size:18px;"><span style="font-size:18px;">
</span>
<span style="font-size:18px;"><!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>OldAjax</title>
<scripttype="text/javascript">
$(function()
{
var xhr = new AjaxXmlHttpRequest(); //创建XmlHttpRequest对象
$("#btnAjaxOld").click(function(event)
{
var xhr = new AjaxXmlHttpRequest();
xhr.onreadystatechange = function()
{
//判断请求状态
if (xhr.readyState == 4)
{
document.getElementById("divResult").innerHTML =xhr.responseText;
}
}
xhr.open("GET","data/AjaxGetPropertyContract.aspx?resultType=html", true);
xhr.send(null);
});
})
//跨浏览器获取XmlHttpRequest对象
function AjaxXmlHttpRequest()
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp = newActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp = newActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("您的浏览器不支持AJAX!");
return false;
}
}
}
return xmlHttp;
}
</script>
</head>
<body>
<buttonid="btnAjaxOld">原始Ajax调用</button><br />
<br />
<divid="divResult"></div>
</body>
</html></span></span>
大家可以看到,原始的Ajax我们需要手动的去做很多事,比如创建XmlHttpRequest对象,判断请求状态,编写回调
函数以及判断浏览器的兼容性等。而我们如果使用jqury,就可以简化我们的代码,甚至相对与上面的例子,我们使
用jQuery的Load方法,只需要一句话:
<span style="font-size:18px;"><span style="font-size:18px;">$("#divResult").load("data/AjaxGetCityInfo.aspx",{ "resultType": "html" });</span></span>
使用jquery的Ajax的界面代码:
<span style="font-size:18px;"><span style="font-size:18px;"><!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Ajax</title>
<scriptsrc="javascript/jquery-1.4.3.js"type="text/javascript"></script>
<scripttype="text/javascript">
$(function()
{
$("#btnAjaxJquery").click(function(event)
{
$("#divResult").load("data/AjaxGetPropertyContract.aspx",{ "resultType": "html" });
});
})
</script>
</head>
<body>
<buttonid="btnAjaxJquery">使用jQuery的load方法</button>
<br />
<divid="divResult"></div>
</body>
</html></span></span>
总结:
当然原始的Ajax拥有它自己的优势,它可以提高我们代码的灵活性,当你是代码的创始者的话,原始的Ajax可以
让你更好的完成的你的工作,但是,如果你是后来者,当你阅读别人写的代码并进行维护时,你会发现你很难去理
清Ajax中的逻辑,到处的XmlHttpRequest方法和差劲的结构性大大降低了代码的阅读性和提高了维护的成本。当然,我
们也可以把这些公共的方法写成js文件,然后供大家调用,但是我不觉得你写的js类库会比jquery要好,而且新人也不
一定只能这样的js文件的存在。所以,如果大家都使用jquery编写的Ajax方法,就可以在解决各种差异性问题的同时,
大大提高我们工作的效率。
下篇文章我们详细的了解jquery中的Ajax。