• 1. 第五章jQuery与Ajax应用
  • 2. 5.1、Ajax的优势和不足Ajax的优势 不需要插件支持 优秀的用户体验 提高web程序的性能 减轻服务器和带宽的负担 Ajax的不足 浏览器对XMLHttpRequest对象的支持不够 破坏浏览器正常的“前进”、“后退” 对搜索引擎的支持不足 开发调试工具少
  • 3. 5.2常规Ajax示例var xmlHttp; if(window.ActiveXObject) xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); else if(window.XMLHttpRequest) xmlHttp=new XMLHttpRequest(); var userObj = document.getElementById(userId); var url = "chkuser.asp?user=" +escape(userObj.value); xmlHttp.open("GET", url, true); xmlHttp.onreadystatechange = function(){ if(xmlHttp.readyState==4) if(xmlHttp.status==200) info.innerHTML=xmlHttp.responseText; } xmlHttp.send(null);
  • 4. 5.3、jQuery中的AjaxjQuery对Ajax操作进行了封装 在jQuery中$.ajax()方法属于最底层的方法,第2层有load()、$.get()和$.post()方法。第3层是 $.getScript()和$.getJSON()方法。 其中我们需要重点学习的 是第2层中的三个方法。因为它们在我们的实际开发过程中使用最为频繁。
  • 5. 5.4、load()方法Load(url [,data] [,function]) url为访问的地址 Data为传递的参数,如果没有参数则为get方法提交,如果有参数则为 post提交。 Function为调用完成之后的处理函数(回调函数) $(“#resText”).load(“getresult.asp”); Load载入筛选后的html $(“#resText”).load(“getresult.asp .para”); 传递参数的实现 $(“#resText”).load(“getuser.asp”,{name:”admin”,age:”22”});
  • 6. 5.4、load方法回调参数 function(responseText,textStatus,XMLHttpRequest){} responseText:返回的内容 textStatus:请求的状态 XMLHttpRequest:XMLHttpRequest对象 这三个参数可以省略,也可以单独使用。 $("#info").load("http://www.woyaokaixin.com ",function(responseText){ alert(responseText); }); 如上例中,没有使用data参数,而且在回调函数中只使用了responseText参数。 这些在jQuery中是允许的。
  • 7. 5.5、$.get()方法$.get()方法使用GET方式来进行异步请求。 $.get(url [,data] [,callback] [,type]);参数名称类型说明urlString请求的html页的url地址data(可选)Object发送到服务器的key/value数据callback(可选)Function载入成功后调用的方法type(可选)String的格式:xml,html,script,服务器端返回内容json,text和_default
  • 8. 5.5、$.get()方法使用参数 $.get(“register.asp”,{username:”admin”,userpass:”123456”},回调函数); $.get()方法回调函数只有两个参数:data和textStatus. data:返回的内容,可以是xml,json,html,text和_default。 textStatus:请求状态:success、error、notmodified、timeout 4种 注意:$.get()方法的回调函数只有当数据成功返回(success)后才被调用。 $.get()方法中的可选参数说明和load()方法相同,可有可无,也可以单独 使用。
  • 9. 5.6、$.post()方法请大家回忆在表单提交中的GET和POST方式的区别。$.get()和$.post()方法与之相同。 $.post()方法的使用和$.get()完全相同。这里不再详细描述.仅给出一个简单示例: $.post(“register.asp”,{username:”admin”,userpass:”123456”},function(data,textStatus){ $(“#info”).append(data); })
  • 10. 5.7、$.getScript()有时候,在页面初次加载时就取得所有的全部JavaScript文件是完全没有必要的。虽然我们可以动态创建”).appendTo(“head”); $.getScript()方法使用示例 。使指定层的背景色渐变动画。 $(function(){ $.getScript("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js",function(){ $("#info").animate({backgroundColor:"pink"},1000) .animate({backgroundColor:"blue"},1000); }) })
  • 11. 5.8、$.ajax()方法$.ajax()方法是jQuery最底层的ajax实现。 语法结构: $.ajax(option); 该方法只有1个参数,但在这个对象里包含了$.ajax()方法所需要的请求设置以及回调函数等信息,参数以key/value键值形式存在,所有参数都是可选 的,常用参数见下表:
  • 12. 5.8、$.ajax()方法参数名称类型 说明typeStringPOST和GET,默认为GETurlString发送请求的地址timeoutNumber请求超时时间(毫秒)dataObject或String 发送到服务器的数据如: {user:”admin”,pass:”123”}dataTypeString预期服务器返回的数据类型:xml,html,script,json,jsonp,textbeforeSendFunction发送请求前用来修改XMLHttpRequest对象的函数completeFunction请求完成后调用的回调函数successFunction请求成功后的回调函数,有两个参数 function(data,textStatus)errorFunction请求失败时被调用的函数。有3个参数, function(XMLHttpRequest,textStatus,errorThrown)globalBoolean默认为True,表示是否触发全局Ajax事件,设置为false则不会触发全局Ajax事件,AjaxStart或AjaxStop可用于控制各种Ajax事件。
  • 13. 5.8、$.ajax()方法$(“#send”).click(function(){ $.ajax({ type:”get”, url:”getuser.asp”, data:{user:”admin”,pass:”123456”}, success:ShowSuccess, Error:ShowError, }); }) function ShowSuccess(data,textStatus){} function ShowSuccess(XMLHttpRequest,textStatus,errroThrown){}
  • 14. 5.9、jQuery中的Ajax全局事件ajaxStart()和ajaxStop()全局事件 通过示例来理解jQuery中Ajax的全局事件。
    加载中…
    $(“#loading”).ajaxStart(function(){ $(this).show(); }) $(“#loading”).ajaxStop(function(){ $(this).hide(); })