javascript第十七讲：Ajax基础.ppt

1、第17课：Ajax基础，讲师：罂粟电子邮件：课程内容排列，介绍现有web技术和Ajax的由来，原理Ajax技术组件XMLHttpRequest对象部分更新的实现Ajax，引言，最近出现的Ajax Ajax的含义是异步JavaScript基于这些技术，网页可以动态刷新、现有web技术和Ajax的由来、使用异步通信组件与服务器通信XMLHttpRequest组件显示网页内容更新、现有web浏览器和服务器之间的同步交互技术、用户表单完全发送到服务器端进行处理，然后将新页面返回到浏览器。在此过程中，由于网速延迟，浏览器有一定的等待时间，所以交互经验不好。浏览器和服务器之间的交互，Ajax技术的组件，A

2、jax技术的组件，Ajax不是新技术，而是旧技术的组合。JavaScript Ajax引擎是在浏览器中运行的一组JavaScript程序。XMLHttpRequest XMLHttpRequest允许您从服务器异步获取数据，而不必每次刷新网页或将所有数据提供给服务器。CSS控制在浏览器中呈现数据的样式。DOM脚本程序通过DOM操作文档。XML用于说明和服务器之间交换的数据。XMLHttpRequest对象、XMLHttpRequest对象是浏览器通过http协议和服务器交换DOM数据的程序集合。Ajax应用程序主要使用Ajax应用程序和服务器之间的异步调用机制。XMLHttpRequest创建

3、XMLHttpRequest的方式与创建任何其它JavaScript对象一样。但是，IE浏览器在IE中显示为ActiveX控件，因此略有不同。语法如下：通常，检查当前浏览器的类型，然后对不同的浏览器使用不同的生成方法。varxmlhttprqobj=newxmlhttprequest()；/一般建立方法varxmlhttprqobj=newactivexobject( Microsoft . xmlhttp )；/IE浏览器的方法，Ajax实现，Ajax实现步骤：创建XMLHttpRequest对象。生成HTTP请求。设定HTTP要求的回应回呼函数。发送HTTP请求。等待听证答复。使用DOM执

4、行本地刷新。创建HTTP请求。HTTP请求是web浏览器向web服务器发送加载web页的请求。HTTP请求通常包括服务器的地址、要请求的文件和传递的参数。XMLHttpRequest必须在设置HTTP请求后才能知道加载数据的位置。这与上述浏览器HTTP请求的机制相同。调用XMLHttpRequest对象的open方法以设置请求和请求方法。01 var xmlhtprq=new ActiveX(“Microsoft . xmlhttp”)；/XMLHttpRequest对象02xmlhtprq.open (get ， index.php )？id=12 )；/HTTP请求生成，提示：HTTP请求

5、方法分为POST和GET两种方法。设置HTTP响应回调函数会导致XMLHttpRequest对象根据状态更改调用该函数，从而使用户可以捕获处理数据的时间。您可以设定Readystatechange事件的处理常式，以侦听XMLHttpRequest物件状态的变更。01/启动程序02 var xmlhtprq=new ActiveX(“Microsoft . xmlhttp”)；/XMLHttpRequest创建对象03 xmlhtprq . readystate change=function(obj)/ready state change事件处理程序04 05/其中，根据状态执行其他操作如果请

6、求是POST方法，则此，xmlhttprequest.send(数据)；/包含参数xmlhttprequest . send(null)；/如果没有参数的完整Ajax实例、许多网站的会员注册页、使用Ajax技术的用户填写表单但尚未发送表单，则将填写的用户名发送到服务器进行验证。如果存在具有相同用户名的用户，则输出提示。在会员注册页面上实现用户重复名称检测功能，如果输入的用户名已经存在，则提供替换提示。客户端程序包括：完整Ajax实例，05 06用户名：07 08(输入用户名(例如admin) 09 10 /脚本开始11 var xmlHtpRq/XMLHttpRequest保存对象引用12 f

7、unction OnStatusChange()/状态事件处理程序13 14 if(xmlhtprq . ready state=4)/常规响应状态15 166接收响应数据11inner html=xmlhtprq . response text；19 20else/状态不正常21 22 document . getelementbyid(message)。innerhtml=xmlhtprq.status/输出状态代码23 24 25，整个Ajax实例，26 function OnBlur(obj )/文本框没有焦点时27 28 xmlhtprq=new ActiveX object(Microsoft ./XMLHttpRequest创建对象29 URL=http:/localhost/server . PHP？Username=obj.value/构建url30xmlhtprq.open (get，url，true)；/打开