第六讲 jQuery_Ajax的应用
相信大家对 Ajax的大名一定早有耳闻，因为它的出现，给网页带来革命性的历史突破，它让用户的体验感受大大的提高了，很多人相信它一定会成为网页技术的主流（当然我也是这样认为），所以对这一门技术的掌握显得尤为重要。
异步的Javascript+XML解析技术。（Ajax可以实现浏览器的局部刷新）
2. 如何使用Ajax？
Ajax的核心编程语言：Javascript
异步对象：XMLHttpRequest
异步对象常用属性和方法：
| open(“方式（post、get）”，URL，是否异步) |
创建一个Http的请求。 |
| send( 参数 ); |
发送一个异步的Http请求。 |
| readyState |
表示当前请求的状态。 0——初始化 1——表示请求已经创建 2——请求已经发送 3——发送成功、还未收到响应 4——响应已经完成 |
| status |
表示返回的状态码。 404 —— 路径错误 500 —— 服务器内部错误 200 —— 交易成功 |
| responseText |
服务器返回的内容 |
| onreadystatechange |
事件。请求状态发生改变的时候，将触发此事件。 |
传统的Ajax示例：
unction getServerData(){ //1. 创建一个能够发送异步请求的对象 var xmlobj = new XMLHttpRequest(); //2. 创建一个HTTP请求 xmlobj.open("get","http://19-jiaoshiji:8080/TestAjax/index.jsp",true); //3. 设置监听数据 document.getElementById("divobj").innerHTML="<img src='loading_circle.gif' align='absmiddle'>数据加载中，请稍后......"; xmlobj.onreadystatechange=function(){ if(xmlobj.readyState==4 && xmlobj.status==200){ //获取返回的数据 var data = xmlobj.responseText; document.getElementById("divobj").innerHTML=data; } }; //4. 发送请求 xmlobj.send(null); }
3. 如何在Jquery中使用Ajax？
Jquery已经封装好了一些系列的Ajax操作；使用Jquery的时候Ajax更简洁。
Jquery提供四种方法操作Ajax：
第一种使用load（）函数：
load(url,参数({}),function(data—返回的数据){});
第二种方式get（）函数：
第三种方式post（）函数：
$.post(url,参数，function(data—返回的数据){}) \ $.get()
load与post、get异同：
相同点：都可以用来发送异步请求。
不同点：load（）一般用于返回数据，不处理的情况。get、post一般用于，对返回的数据进行处理。
现在再来看一些实际生活中的例子吧
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script type="text/javascript"> function getServerData(){ //1. 创建一个能够发送异步请求的对象 var xmlobj = new XMLHttpRequest(); //2. 创建一个HTTP请求 xmlobj.open("get","http://19-jiaoshiji:8080/TestAjax/index.jsp",true); //3. 设置监听数据 document.getElementById("divobj").innerHTML="<img src='loading_circle.gif' align='absmiddle'>数据加载中，请稍后......"; xmlobj.onreadystatechange=function(){ if(xmlobj.readyState==4 && xmlobj.status==200){ //获取返回的数据 var data = xmlobj.responseText; document.getElementById("divobj").innerHTML=data; } }; //4. 发送请求 xmlobj.send(null); } </script> </head> <body> <form id="form1" name="form1" method="post" action=""> <label> <input type="button" name="Submit" value="使用Ajax获取网页的数据" onclick="getServerData()" /> </label> </form> <div id="divobj"> </div> </body> </html>
使用JQuery的方式1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script type="text/javascript" src="../JQuery 第五章/jquery-1.4.1.js"></script> <script type="text/javascript"> $(function(){ $("input[type=button]").click(function(){ /*$("#divobj").html("<img src='loading_circle.gif' width='20' height='20' align='absmiddle'>数据加载中，请稍后......").load("http://19-jiaoshiji:8080/TestAjax/test.txt",{name:"admin"});*/ $("#divobj").html("<img src='loading_circle.gif' width='20' height='20' align='absmiddle'>数据加载中，请稍后......"); $.get("http://19-jiaoshiji:8080/TestAjax/TestAjaxServlet",function(data){ eval("var cdata = "+data); $.each(cdata,function(i,item){ alert(i+":"+item.name+":"+item.sex+":"+item.score.java); }); },"JSON"); }); }); </script> </head> <body> <form id="form1" name="form1" method="post" action=""> <label> <input type="button" name="Submit" value="使用Ajax获取网页的数据" /> </label> <p> <label>用户名: <input type="text" name="textfield" /> </label> </p> <p> Email： <input type="text" name="textfield2" /> </p> </form> <div id="divobj"> </div> </body> </html>
传统方式：
浅谈ajax的优点
Ajax的给我们带来的好处大家基本上都深有体会，在这里我只简单的讲几点：
1、最大的一点是页面无刷新，在页面内与服务器通信，给用户的体验非常好。
2、使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。
3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。
ajax的缺点
下面我着重讲一讲ajax的缺陷，因为平时我们大多注意的都是ajax给我们所带来的好处诸如用户体验的提升。而对ajax所带来的缺陷有所忽视。
下面所阐述的ajax的缺陷都是它先天所产生的。
1、ajax干掉了back按钮，即对浏览器后退机制的破坏。后退按钮是一个标准的web站点的重要功能，但是它没法和js进行很好的合作。这是ajax所带来的一个比较严重的问题，因为用户往往是希望能够通过后退来取消前一次操作的。那么对于这个问题有没有办法？答案是肯定的，用过Gmail的知道，Gmail下面采用的ajax技术解决了这个问题，在Gmail下面是可以后退的，但是，它也并不能改变ajax的机制，它只是采用的一个比较笨但是有效的办法，即用户单击后退按钮访问历史记录时，通过创建或使用一个隐藏的IFRAME来重现页面上的变更。（例如，当用户在Google Maps中单击后退时，它在一个隐藏的IFRAME中进行搜索，然后将搜索结果反映到Ajax元素上，以便将应用程序状态恢复到当时的状态。）
但是，虽然说这个问题是可以解决的，但是它所带来的开发成本是非常高的，和ajax框架所要求的快速开发是相背离的。这是ajax所带来的一个非常严重的问题。
2、安全问题
技术同时也对IT企业带来了新的安全威胁，ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于credentials的安全漏洞等。
3、对搜索引擎的支持比较弱。
4、破坏了程序的异常机制。至少从目前看来，像ajax.dll，ajaxpro.dll这些ajax框架是会破坏程序的异常机制的。关于这个问题，我曾经在开发过程中遇到过，但是查了一下网上几乎没有相关的介绍。后来我自己做了一次试验，分别采用ajax和传统的form提交的模式来删除一条数据……给我们的调试带来了很大的困难。
5、另外，像其他方面的一些问题，比如说违背了url和资源定位的初衷。例如，我给你一个url地址，如果采用了ajax技术，也许你在该url地址下面看到的和我在这个url地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。
6、一些手持设备（如手机、PDA等）现在还不能很好的支持ajax，比如说我们在手机的浏览器上打开采用ajax技术的网站时，它目前是不支持的，当然，这个问题和我们没太多关系。