Lession06jQueryAJAX教案解析.pptVIP

Write Less, Do More. Lession06 AJAX  主题 Load（） Get VS. Post Ajax()细节设置 AjaxSetup()全局设置 等待处理方式 AJAX优势 不需要插件支持 优秀的用户体验 提高Web程序的性能 减轻服务器和宽带的负担 AJAX的不足 浏览器对XMLHttpRequest对象的支持不足 破坏浏览器“前进”和“后退”的正常功能 对搜索引擎的支持的不足 开发和调试工具的缺乏 Js 实现AJAX 第一步：创建XMLHttpRequest对象 Var xmlHttp; function createXMLHttpRequest() { if(window.ActiveXObject)//IE5.或IE6的IE内核 {xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);} else //火狐mozilla等 {xmlHttp=new XMLHttpRequest();} } Js 实现AJAX（续1） 第二步：异步发送AJAX请求，并接受返回的内容 function GetResult() { createXMLHttpRequest(); xmlHttp.open(“get”,”test.aspx?name=rao”,true); xmlHttp.onreadystatechange=RequestCallBack; xmlHttp.send(null); } Js 实现AJAX(续2) 第三步：判断返回状态并接收数据 function RequestCallBack() { if(xmlHttp.readystate==4 xmlHttp.status==200) { alert(xmlHttp.responseText); } } 例子：demo1 Jquery中的AJAX 刚才就是实现XMLHttpRequest对象使用的所有细节，它不必将WEB页面的所有内容都发送到服务器，而是按需发送。使用JAVASCRIPT启动一个请求并处理相应的返回值，然后使用浏览器DOM方法更新页面中的数据。显然，这种无刷新的模式能给网站带来更好的用户体验。但是XMLHttpRequest对象的很多属性和方法，对于想快速入门AJAX的人来说，似乎并不是容易的过程。 幸运的是，JQUERY提供了一些日常开发中需要的快捷操作，例如：load、ajax、get和post等等，使用jquery开发ajax将变得极其简单。这样开发人员就可以将程序开发集中在业务和用户体验上，而不需要理会那些繁琐的XMLHttpRequest对象。 Load()方法 1、载入HTML文档 load()方法是jquery中最为简单和常用的ajax方法，能载入远程的HTML代码并插入到DOM中。它的结构为： load(url[,data][,callback]]) url string类型 请求HTML页面的URL地址 data object类型 发送至服务器的KEY/VALUE数据 callback function类型 请求完成时的回调函数，无论请求成功或失败 使用Load方法异步读取test.html上的内容，并显示在ID为resTest的对象上 $(function(){ $(#send).click(function(){ $(#resText).load(test.html); }) }) 例子:demo2_load.html test.html 2、筛选载入的HTML文档 load()方法的URL参数的语法结构为:“url selector”。注意，URL和选择器之间有一个空格 $(function(){ $(#send).click(function(){ $(#resText).load(test.html .para); }) }) 例子：demo3_load.html 3、传递方式 Load()方法的传递方式根据参数data来自动指定。如果没有参数传递，则采用GET方式传送；反之，则会自动转换为POST方式。 无参数传递，则是GET方式 $(“#resText”).load(“test.html”,function(){ //….. }) 有参数传递，则是POST方式 $(“#resText”).load (“test.html”,{name:”raoqi”,age:”28”},function(){ //….. }) 4、回调参数 对于必须在加载完成后才能继续的操作，load()方法提供了回调函