首页手记 JQuery-Ajax的应用

JQuery-Ajax的应用

标签：

JQuery JavaScript

　　今天终于看到了最令我兴奋的一章：JQuery与Ajax的应用。AJAX即“Asynchronous JavaScript and XML”（异步JavaScript和XML)，AJAX并非缩写词，而是由Jesse James Gaiiett创造的名词，是指一种创建交互式应用的网页开发技术。在最初学习Ajax的日子里，我被ASP.NET AJAX框架提供的UpdatePanel迷惑了，以后Ajax就这么简单，所以在最初做的几个项目里，前台代码里必至少有一个UpdatePanel区域，把要局部刷新的内容全放到这个Panel里面，殊不知一个UpdatePanel只适合于局域网的内部信息系统，不适合在前台互联网中使用，这样效率很低。

　　于是，我带着好奇的心情观看了itcast杨中科老师的2010版视频第13季Ajax，明白了应该是从XMLHttpRequest对象开始学起，它是Ajax的核心内容，也是实现的关键-发送异步请求、接收响应以及执行回调都是通过它来完成的。Ajax最大的优势就在于：1.不需要插件的支持，可以被绝大多数浏览器所支持；2.优秀的用户体验，使得Web应用程序能够更为迅速的回应用户的操作；3.提高Web程序的性能，即通过XMLHttpRequest按需发送；4.减轻服务器和宽带的负担，即在客户端和服务器端增加了一个中间层，使用户操作与服务器响应异步化；金无赤金，人无完人，Ajax也是如此，那么Ajax的不足在哪里呢？这个问题在去年秋季的中软国际校园招聘上被技术面试官问到过，我当时顿时没想起来，失误啊。Ajax主要有以下几点不足：1.浏览器对XMLHttpRequest对象的支持度不足！！2.破坏浏览器“前进”、“后退”按钮的正常功能；3.对搜索引擎支持的不足；4.开发和调试工具的缺乏；

　　下面看一段最经典的实现Ajax的js脚本代码：

<script language="javascript" type="text/javascript">
//通过这个函数来异步获取信息
function Ajax(){ 
   var xmlHttpReq = null; //声明一个空对象用来装入XMLHttpRequest
   if (window.ActiveXObject){//IE5 IE6是以ActiveXObject的方式引入XMLHttpRequest的
    xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
   }else if (window.XMLHttpRequest){//除IE5 IE6 以外的浏览器XMLHttpRequest是window的子对象
    xmlHttpReq = new XMLHttpRequest();//实例化一个XMLHttpRequest
   }

   if(xmlHttpReq != null){ //如果对象实例化成功 
    xmlHttpReq.open("GET","test.ashx",true); //调用open()方法并采用异步方式
    xmlHttpReq.onreadystatechange=RequestCallBack; //设置回调函数
    xmlHttpReq.send(null); //因为使用get方式提交，所以可以使用null参调用
   }

   function RequestCallBack(){//一旦readyState值改变，将会调用这个函数
      if(xmlHttpReq.readyState == 4){
        if(xmlHttpReq.status == 200){
         //将xmlHttpReq.responseText的值赋给ID为 resText 的元素
         document.getElementById("resText").innerHTML = xmlHttpReq.responseText;
        }
      }
   }
}
</script>

这里test.ashx里面只有一句context.Response.Write("Hello World!");

　　幸运的是，我们强大的JQuery库为我们封装了许多Ajax操作，在JQuery中$.ajax()属于最底层的方法，第2层则是load,get,post方法，第3层是getScript和getJSON方法。于是，如果我们可以实现一个极其简单的AJAX获取评论的功能：

$(function() {
            $("#send").click(function() {
                $("#resText").load("test.htm");
            });
        });

通过设置id为send的按钮点击事件，在id为resText的div中加载test.htm里面的评论信息，简单的一行代码就实现了ajax效果，太方便了！！至于get和post方法，更是封装的非常好，指定服务页面，提供参数，获取返回数据，三位一体。

　　在这里碰到了一些问题，学习了下JSON，JSON文件非常简洁，容易阅读。参考一篇博文：http://www.cnblogs.com/zhaozhan/archive/2011/01/09/1931340.html，这里面主要讲了在ASP.NET中JSON的序列化与反序列化。

　　$.ajax()方法是最底层的Ajax实现，它可以代替load，get，post，getScript和getJson这些方法，但是要使用$.ajax()方法需熟悉一些常用的参数，例如url,type,timeout,data等，不如上面两层的方法方便，但毕竟是最底层的实现，效率上应该高一点。于是，就写下了如下的代码：

 $(function() {
            $("#send").click(function() {
                $.ajax({
                    type: "GET",
                    url: "../App_Themes/default/js/test.json",
                    dataType: "json",
                    success: function(data) {
                        $('#resText').empty();
                        var html = '';
                        $.each(data, function(commentIndex, comment) {
                            html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>';
                        })
                        $('#resText').html(html);
                    }
                });
            });
        });

　　当需要传递的form里面的参数较多时，就可以使用serialize()序列化方法，一个很实用的方法。即使在表单中增加多个字段，脚本仍然能够使用，并且不需要做其他多余的工作。于是，我可以写下如下的代码：

　　$(function() {
        $("#send").click(function() {
            $.get("jqajax-test-2.ashx", $("#form1").serialize(), function(data, textStatus) {
                $("#resText").html(data);
            });
        });
        $("#loading").ajaxStart(function() {
            $(this).show();
        }).ajaxStop(function() {
            $(this).hide();
        });
    })

点击查看更多内容