锋利的JQuery学习笔记之JQuery-Ajax的应用

  今天终于看到了最令我兴奋的一章: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();             });         });

  最后,作者给出了一个实例:Ajax聊天室,用PHP+MySql写的,于是我将其改成了ASP.NET+MSSQL版。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏iKcamp

iKcamp|基于Koa2搭建Node.js实战(含视频)☞ 处理静态资源

视频地址:https://www.cctalk.com/v/15114923882788 处理静态资源 无非花开花落,静静。 指定静态资源目录 这里我们使用第...

49170
来自专栏达摩兵的技术空间

app中的webview通识篇(上)

如果你还是第一次与app合作开发webview的页面,那么对于如何调试,可能有哪些问题可能是不够了解的。本文尝试性的根据自己的经验给大家一个入门级别的了解,如果...

71620
来自专栏信安之路

信安之路挑战赛红蓝对抗题目全解析

首先,题目其实设置不是太难,主要是坑有点多,而且需要一定的时间才能完成。因为要本着贴近实战的原则出题,所以在做题的时候,很多人还是带着做传统 CTF 题目的思路...

68530
来自专栏web前端教室

定位+思路+方法,三步教你快速敲定前端JS结构

闲话少说, --定位 就是说你现在要写的是什么东西?是一个页面?还是一个组件?还是一个function方法?不同的东西它的定位不同,结构就不同。 如果是页面,那...

220100
来自专栏程序人生

深入了解IAM和访问控制

本文为InfoQ中文站特供稿件,首发地址为:http://www.infoq.com/cn/articles/aws-iam-dive-in。 访问控制,换句话...

55670
来自专栏非著名程序员

分享一款值得分享的写作工具

俗话说的好:工欲善其事,必先利其器。作为技术的工匠来说,不仅仅需要好的开发工具,好的开发工具可以提高我们的工作效率,但是我们还需要更好的写作和总结工具才行,这样...

26160
来自专栏ytkah

保存一下dedecms数据库表和字段说明,方便日后查询

玩dedecms有一段时间,对它的字段不是很了解,在此做个记录,方便日后查询 dede数据库字段说明: dede_addonarticle 附加文章...

28440
来自专栏移动端开发

Telegram学习解析系列(三) : Build Telegram报错分析总结

正好通过这次 Telegram 的运行,很想把常见的项目运行的错误好好的总结一下,在前面的博客中,又星星散散的总结过错误和一些警告的消除方法,这次把错误处理一下...

638110
来自专栏腾讯Bugly的专栏

Android 内存优化总结&实践

导语 智能手机发展到今天已经有十几个年头,手机的软硬件都已经发生了翻天覆地的变化,特别是Android阵营,从一开始的一两百M到今天动辄4G,6G内存。然而大部...

57570
来自专栏北京马哥教育

Linux 新手必会的21条命令合集

21770

扫码关注云+社区

领取腾讯云代金券