ajax课件

1、掌握基本原理2、能看懂程序3、能编写一些基础程序教学要求成绩评定1、平时成绩40%(出勤30%+平时作业70%)2、考试成绩60%AJAX李兰AjaxAjaxJSONJquery举例：注册时存在的问题传统的web开发模式（同步）：请求——刷新——显示举例：注册时存在的问题Ajax工作原理（异步）：同步交互和异步交互普通B/S模式(同步)AJAX技术(异步)同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。异步是指：发送方发出数据后，不等接收方发回响应，接着发送下一个数据包的通讯方式。*同步：提交请求-等待服务器处理-处理完毕返回这个期间客户端浏览器不能干任何事*异步:请求通过事件触发-服务器处理（这时浏览器仍然可以作其他事情）-处理完毕同步传输:你现在传输，我要亲眼看你传输完成，才去做别的事异步传输:你传输吧，我去做我的事了，传输完了告诉我一声AJAX案例之googlesuggestAJAX案例BaiduSinaSohu。。。。。。什么是AjaxAsynchronousJavascriptandXml的异步JavaScript和XMLAJAX是一种用来改善用户体验的技术，其实质是，使用浏览器提供的一个特殊对象(XMLHttpRequest)异步地向服务器发送请求服务器返回部分数据，而不是一个完整的页面，以页面无刷新的效果更改页面中的局部内容什么是AJAXAJAX包含的技术XHTML（eXtendedHypertextMarkupLanguage,使用扩展超媒体标记语言）和CSS（CascadingStyleSheet,级联样式单）标准化呈现；DOM（DocumentObjectModel,文档对象模型）实现动态显示和交互；使用XMLHTTP组件XMLHttpRequest对象进行异步数据读取服务器端语言：服务器需要具备向浏览器发送特定信息的能力。Ajax与服务器端语言无关。XML(eXtensibleMarkupLanguage，可扩展标记语言)是一种描述数据的格式。AJAX程序需要某种格式化的格式来在服务器和客户端之间传递信息，XML是其中的一种选择使用JavaScript绑定和处理所有数据AJAX工作原理在浏览器中添加了一个负责发送请求的AJAX对象，同时该对象事先会绑定一段事件处理函数。用户填写信息点击注册时，会调用AJAX对象的方法，让它来发送请求，AJAX对象发请求并不会影响页面的存在，所以在AJAX对象发送请求的同时，表单页面可以继续其他的工作。服务器接收到请求后获取数据，进行判断，响应时的数据不再是完整的页面，而是部分数据。当响应提供的部分数据到达客户端时，并不是直接由浏览器展示，而是由事先准备好的事件处理函数接收、解析。将部分数据取出来后由JavaScript代码控制这些数据及样式，然后更新至页面的某一个位置。整个过程中，Ajax负责发送请求，也负责接收返回的响应，并将响应中的数据更新至页面中。Ajax的核心Ajax的核心是JavaScript对象XMLHttpRequestXMLHttpRequest对象XMLHttpRequest对象XMLHttpRequest是XMLHTTP组件的对象，通过这个对象，AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新界面，也不用每次将数据处理的工作都交给服务器来做；这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。AJAX对象本身是浏览器中的一个对象，但在IE中表现为一个ActiveX。所以在使用JavaScript语言进行创建该对象时，需要区分不同的浏览器。经过判断window.XMLHttpRequest存在时，直接new这个核心的XMLHttpRequest对象即可。如果这个对象不存在，就有可能是IE浏览器，所以创建ActiveXObject对象即可。创建这个XMLHttpRequest对象是进行后续操作的基础，正是这个对象的存在才使得异步请求得以实现。如何创建Ajax对象需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同代码functiongetxhr(){varxhr=null;if(window.XMLHttpRequest){xhr=newXMLHttpRequest（）;//针对Firefox，Opera，IE7，IE8等}else{xhr=newActiveXObject(Microsoft.XMLHttp);//针对IE6、5.5}returnxhr;}练习一：1、简述对Ajax的理解2、如何创建Ajax对象？XMLHttpRequest对象属性XMLHttpRequest对象属性onreadystatechangeonreadystatechange:绑定一个事件处理函数，该函数用来处理readystatechange事件。该事件处理函数由服务器触发，而不是用户。在Ajax执行过程中，服务器会通知客户端当前的通信状态。这依靠更新XMLHttpRequest对象的readyState来实现。改变readyState属性是服务器对客户端连接操作的一种方式。每次readyState属性的改变都会触发readystatechange事件，只是大部分时候我们只需要知道从3变为4，即当前readyState为4时这个状态，此时数据响应已返回，并接收成功，等待下一步的处理。大部分的格式如下：onreadystatechangexhr.onreadystatachange=function(){//......//处理返回的数据}readyState：一共有5个值，分别是0,1,2,3,4，分别表示Ajax对象与服务器通信的状态。readyState属性表示Ajax请求的当前状态。它的值用数字代表。0代表未初始化。1代表正在发送请求。2代表请求完成。3代表请求成功，正在接收数据。4代表数据接收完成，响应发送完毕。每次readyState值的改变，都会触发readystatechange事件。如果把onreadystatechange事件处理函数赋给一个函数，那么每次readyState值的改变都会引发该函数的执行。readyState值的变化会因浏览器的不同而有所差异。但是，当请求结束的时候，每个浏览器都会把readyState的值统一设为4readyState状态的变化时数字从0到1到2依次的一系列的变化，判断不同的数字状态可以提供更精确的处理。最主要的情况是判断4这个状态，也就是最终状态，可以进行数据解析及展示在页面中了。对于状态的判断书写代码的格式如下：xhr.onreadystatechange=function(){if(xhr.readyState==4){vartxt=xhr.responseText;//展示数据到页面}}readyState但是状态并不能保证回来的数据就是我们想要的数据，也可能是发回的错误提示。所以要想保证接受到的数据就是成功响应的数据，还需添加对另一个属性的判断—status。statusstatus常用状态码及其含义：200表示请求成功202表示请求被接受但处理未完成400表示错误的请求404表示没有找到资源500表示内部服务器错误status在XMLHttpRequest对象中，服务器发送的状态码都保存在status属性里。通过把这个值和200比较，可以确保服务器是否已发送了一个成功的响应。最终响应函数代码如下：xhr.onreadystatechange=function(){if(xhr.readyState==4&&xhr.status==200){vartxt=xhr.responseText;//展示数据到页面}}open(method,url,asynch)open(method,url,asynch)method：请求类型，类似“GET”或”POST”的字符串。若只想从服务器检索一个文件，而不需要发送任何数据，使用GET(可以在GET请求里通过附加在URL上的查询字符串来发送数据，不过数据大小限制为2000个字符)。若需要向服务器发送数据，用POST。url：路径字符串，指向你所请求的服务器上的那个文件。可以是绝对路径或相对路径。asynch：表示请求是否要异步传输，默认值为true(异步)。指定true，服务器请求是异步进行的，也就是脚本执行send()方法后不等待服务器的执行结果，而是继续执行脚本代码。指定false，服务器请求是同步进行的，也就是脚本执行send()方法后等待服务器的执行结果返回，若在等待过程中超时，则不再等待，继续执行后面的脚本代码。send(data)send(data)：open方法定义了Ajax请求的一些细节。send方法可为已经待命的请求发送指令data：将要传递给服务器的字符串。若选用的是get请求，则不会发送任何数据，给send方法传递null即可：request.send(null);当向send()方法提供参数时，要确保open()中指定的方法是post，如果没有数据作为请求体的一部分发送，则使用null.使用get请求时send方法参数时null,如果传值的话，服务器也接收不到。XMLHttpRequest对成功返回的信息有两种处理方式：responseText：将传回的信息当字符串使用。responseXML：将传回的信息当XML文档使用，可以用DOM处理。responseTextresponseTextXMLHttpRequest的responseText属性包含了从服务器发送的数据。它是一个HTML,XML或普通文本，这取决于服务器发送的内容。当readyState属性值变成4时,responseText属性才可用，表明Ajax请求已经结束。responseXMLresponseXML如果服务器返回的是XML，那么数据将储存在responseXML属性中。只用服务器发送了带有正确首部信息的数据时，responseXML属性才是可用的。responseText和responseXML比较responseText可以获取请求页面的纯文本表示，未经过任何处理当处理的数据格式并不复杂时，需要考虑处理效率和速度等方面，可用Text方式responseXML服务器端返回的必须是一个XML格式的文档返回的HTTP头的content-type要设置为text/xml当数据比较复杂时，不用考虑带宽和处理效率或需要实现与系统其它API或其它系统进行交互，即需要作为一种数据中转的中介，或需要特定格式的输出效果，比较适合用XML注意：使用两种方法获得返回的信息，必须以HTTP请求方式运行，直接打开文件使用的是file协议(xhr.status始终为0)。发送异步请求的步骤获取Ajax对象设置回调函数：为Ajax对象的readystatechange事件设定响应函数创建请求：调用XMLHttpRequest对象的open方法发送请求：调用Ajax对象的send方法，开始和服务器端进行交互编写事件处理函数，接收响应数据（判断对象的状态是否交互成功并且http是否交互成功，获取服务器端返回的数据）发送异步请求的步骤具体流程：在浏览器客户端创建对应的XMLHttpRequest对象，提交相应请求之后，通过Ajax对象以异步方式发送请求，为Ajax核心对象的onreadystatechange指定好响应函数。浏览器客户端提交的请求被发送到服务器端，按照配置文件web.xml中的配置将请求提交给对应的Servlet进行处理，调用Java文件中的有关逻辑进行处理，在Servlet中返回相应格式的响应消息。获取Ajax对象varxhr=getxhr();functiongetxhr(){varxhr=null;if(window.XMLHttpRequest){xhr=newXMLHt