《jQuery与Ajax的应用》由会员分享，可在线阅读，更多相关《jQuery与Ajax的应用（77页珍藏版）》请在金锄头文库上搜索。
1、jQuery与Ajax的应用（第五讲 )知识回顾n页面载入？ n事件处理？n事件委派？n事件切换?n常用事件？教学内容n使用XMLHttpRequest对象与服务器通信 n在jQuery中实现Ajax编程 n应用实例使用Ajax实现登录页面重点、难点n重点 p使用XMLHttpRequest对象与服务器通信 p在jQuery中实现Ajax编程 p应用实例使用Ajax实现登录页面n难点 p使用XMLHttpRequest对象与服务器通信 p在jQuery中实现Ajax编程 p应用实例使用Ajax实现登录页面使用XMLHttpRequest对象与服 务器通信在Ajax中，可以使用XMLHttpRe
2、quest对象与服务 器进行通信。XMLHttpRequest是一个浏览器接口 ，开发者可以使用它提出HTTP和HTTPS请求，而 且不用刷新页面就可以修改页面的内容。 XMLHttpRequest的两个最常见的应用是提交表单 和获取额外的内容。 使用XMLHttpRequest对象可以实现下面的功能： n 在不重新加载页面的情况下更新网页； n 在页面已加载后从服务器请求数据； n 在页面已加载后从服务器接收数据； n 在后台向服务器发送数据。创建XMLHttpRequest对象n 对于不同的浏览器，创建XMLHttpRequest对象也可能不同 。在微软的IE浏览器中使用Active对象创
3、建XMLHttpRequest 对象，代码如下： xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP“); n 当window.ActiveXObject等于True时，可以使用这种方法。 n 在其他浏览器中可以下面的代码创建XMLHttpRequest对象 ： xxmlhttp=new XMLHttpRequest(); n 当window.XMLHttpRequest等于True时，可以使用这种方法 。以在各种浏览器中创建 XMLHttpRequest对象的代码var xmlHttp; if(window.XMLHttpRequest)xmlHttp
4、= new XMLHttpRequest(); else if(window.ActiveXObject) xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP“); 发送HTTP请求在发送HTTP请求之前，需要调用open()方法初始化HTTP请 求的参数，语法如下： open(method, url, async, username, password)参数说明如下。 n method：用于请求的 HTTP 方法。值包括GET、POST 和HEAD。 n url：所调用的服务器资源的URL。 n async：布尔值，指示这个调用使用异步还是同步， 默
5、认为true（即异步）。 n username：可选参数，为url所需的授权提供认证用 户。 n password：可选参数，为url所需的授权提供认证密码 。send()方法nopen()方法只是初始化HTTP请求的参数，并 不真正发送HTTP请求。可以调用send()方法 发送HTTP请求，语法如下： nsend(body)send()方法发送的HTTP请求通常由以下几部分组成n 之前调用open()时指定的 HTTP 方法、URL 以及认证资格（如果有的话）。 n 如果之前调用setRequestHeader()方法发送 了HTTP 请求的头部，则包含指定的请求头 部。 n 传递给这个方
6、法的body参数。ReadyState属性的取值n 当XMLHttpRequest对象把一个HTTP请求发送到服 务器时将经历若干种状态，XMLHttpRequest对象的 ReadyState属性可以表示请求的状态，它的取值如 表10-1所示。值具 体 说 明0表示已经创建一个XMLHttpRequest对象，但是还没有初始化，即还没调用 open()方法 1表示正在加载，此时对象已建立，已经调用open()方法，但还没调用 send()方法 2表示请求已发送，即方法已调用send()，但服务器还没有响应3表示请求处理中。此时，已经接收到HTTP响应头部信息，但是消息体部分 还没有完全接收结
7、束 4表示请求已完成，即数据接收完毕，服务器的响应完成从服务器接收数据n 发送HTTP请求之后，就要准备从服务器接收数据了。首先 要指定响应处理函数。定义相应处理函数后，将函数名赋 值给XMLHttpRequest对象的onreadystatechange属性即可， 例如： xmlHttp.onreadystatechange = callback/指定响应函数 function callBack()/函数体 提示n响应处理函数没有参数。指定时也不带 括号。也可以不定义响应处理函数的 函数名，直接定义函数体request.onreadystatechange = function() /函数体
8、 3开发自定义选择器的插件n 可以使用jQuery. expr定义自定义选择器，基本方 法如下：$.expr:.withjQuery = function(obj)/ 自定义选择器的代码return 匹配HTML元素的条件，;XMLHttpRequest的常用属性值具 体 说 明responseText包含客户端接收到的HTTP响应的文本内容。当 readyState值为0、1或2时，responseText属性为一个空 字符串。当readyState值为3时，responseText属性为还 未完成的响应信息。当readyState为4时，responseText 属性为的响应信息respo
9、nseXML用于当接收到完整的HTTP响应时（readyState为4）描述 XML响应。如果readyState值不为4，那么responseXML 的值为nullstatus用于描述HTTP状态代码，其类型为short。仅当 readyState值为3或4时，status属性才可用 statusText用于描述HTTP状态代码文本；仅当readyState值为3或4 才可用常用的响应处理函数框架function callBack()if(request.readyState =4) / 服务器已经响 应if(request.status = 200) / 请求成功/ 显示服务器响应 n r
10、equest.status等于200表示请求成功。【例1】n 在网页中定义一个按钮，单击此按钮时，使用 XMLHttpRequest对象从服务器获取并显示一个XML文 件的内容。 n 定义3个标签，用来显示服务器的响应数据， 定义代码如下： Status:statusText:responseText:按钮的定义代码获 取XML文件loadXMLDoc()函数function loadXMLDoc(url) if (window.XMLHttpRequest)/ code for IE7, Firefox, Opera, etc.xmlhttp=new XMLHttpRequest(); el
11、se if (window.ActiveXObject)/ code for IE6, IE5xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP“); if (xmlhttp!=null)xmlhttp.onreadystatechange=state_Change;xmlhttp.open(“GET“,url,true);xmlhttp.send(null); elsealert(“您的浏览器不支持 XMLHTTP.“); 程序首先创建一个 XMLHttpRequest对象，然 后指定响应处理函数为 state_Changefunction state_
12、Change() if (xmlhttp.readyState=4) / 服务器已经响应if (xmlhttp.status=200) / 请求成功/ 显示服务器的响应数据document.getElementById(A1).innerHTML=xmlhttp.status;document.getElementById(A2).innerHTML=xmlhttp.statusText;document.getElementById(A3).innerHTML=xmlhttp.responseText;elsealert(“接收XML数据时出现问题:“ + xmlhttp.statusTex
13、t); 浏览【例1】的界面在jQuery中实现Ajax编程nload()方法 n$.get()方法 n$.post()方法 n$.getJSON()方法 n$.ajax()方法 n利用Ajax提交表单 nAjax的事件load()方法n 调用load()方法可以动态地从服务器加载数据 ，并填充调用它的HTML元素的内容，语法如 下： #(选择器).load( url , data , complete(responseText, textStatus, XMLHttpRequest) )参数说明如下。 n url：需要加载的资源的url。 n data：可选参数，在提交请求时发送到服务 器的数
14、据对象或字符串。 n complete(responseText, textStatus, XMLHttpRequest)：可选参数，请求结束后， 调用的回调函数。例如n将服务器端的ajax/test.html文件的内容显示 在id= #result的HTML元素中，代码如下： $(#result).load(ajax/test.html);【例2】n在网页中定义一个按钮，单击此按钮时， 使用load()方法从服务器获取test.txt文件 的内容，并显示在一个div元素中。n按钮的定义代码如下： 改变内容定义一个div元素n 用来显示从服务器获取的test.txt文件的内容，定义代 码如下：
15、 通过 AJAX 改变文本n 单击按钮的代码如下：$(document).ready(function()$(“#b01“).click(function()$(#myDiv).load(test.txt);); );访问Web服务器的【例2】网页，然后单击按钮的结果要查看【例2】的运行效果就需要搭建一个 Web服务器。可以使用IIS或Apache。搭建成功 后将【例2】的网页、jquery.js和请求的test.txt 复制到网站的根目录下。然后再浏览器中访问 Web服务器的【例2】网页。提示n 在IE中，load()方法去是从缓存中加载数据而 不是向服务器加载数据。因此，在调用load 方
16、法之前应该执行下面的代码方法禁止load 方法调用IE缓存文件： $.ajaxSetup ( cache: false );$.get()方法n 使用$.get()方法可以通过HTTP GET请求从服务器 加载数据，语法如下： jQuery.get( url , data , success(data, textStatus, jqXHR) , dataType )n 参数说明如下： n url：需要加载的资源的url。 n data：可选参数，在提交请求时发送到服务 器的数据对象或字符串。 n success(data, textStatus, jqXHR)：可选参数， 请求成功后，调用的回调函数。【例3】n在网页中定义一个按钮，单击此按钮时，使用$.get()方法从服务器
