jquery中的AJAX使用--与原始ajax的比较

最新推荐文章于 2021-09-29 21:16:42 发布

王永俊

最新推荐文章于 2021-09-29 21:16:42 发布

阅读量1.7k

点赞数

分类专栏： BS jQuery+ajax

本文链接：https://blog.csdn.net/wj8023/article/details/42277103

版权

BS 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

jQuery+ajax

6 篇文章 0 订阅

订阅专栏

前言：

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。

王永俊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
8
评论
jquery中的AJAX使用--与原始ajax的比较

前言： Ajax让web开发丰富多彩，增强了用户的体验度。Ajax是web开发的必修课。Ajax的原理大家都知道，而且实现起来也并不复杂，但是因为它强大的作用，所以它有很多不同的实现方式。其中jquery就对Ajax进行了封装，提供了一系列的Ajax函数，来简化我们对Ajax的使用。本篇文章先来对传统的Ajax
复制链接

扫一扫

专栏目录