《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()方法从服务器