第五章jQuery与Ajax应用.pptVIP

第五章jQuery与Ajax应用 5.1、Ajax的优势和不足 Ajax的优势 不需要插件支持 优秀的用户体验 提高web程序的性能 减轻服务器和带宽的负担 Ajax的不足 浏览器对XMLHttpRequest对象的支持不够 破坏浏览器正常的“前进”、“后退” 对搜索引擎的支持不足 开发调试工具少 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); 5.3、jQuery中的Ajax jQuery对Ajax操作进行了封装 在jQuery中$.ajax()方法属于最底层的方法，第2层有load()、$.get()和$.post()方法。第3层是 $.getScript()和$.getJSON()方法。 其中我们需要重点学习的 是第2层中的三个方法。因为它们在我们的实际开发过程中使用最为频繁。 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”}); 5.4、load方法 回调参数 function(responseText,textStatus,XMLHttpRequest){} responseText:返回的内容 textStatus:请求的状态 XMLHttpRequest:XMLHttpRequest对象 这三个参数可以省略，也可以单独使用。 $(#info).load( ,function(responseText){ alert(responseText); }); 如上例中，没有使用data参数，而且在回调函数中只使用了responseText参数。 这些在jQuery中是允许的。 5.5、$.get()方法 $.get()方法使用GET方式来进行异步请求。 $.get(url [,data] [,callback] [,type]); 参数名称 类型 说明 url String 请求的html页的url地址 data(可选) Object 发送到服务器的key/value数据 callback(可选) Function 载入成功后调用的方法 type(可选) String 的格式:xml,html,script,服务器端返回内容json,text和_default 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()方法相同，可有可无，也可以单独 使用。 5.6、$.post()方法 请大家回忆在表单提交中的GET和POST方式的区别。$.get()和$.post()方法与之相同。 $.post()方法的使用和$.get()完全相同