精通Javascript+JQuery--第9讲.pptxVIP

精通JavaScript+jQuery 第9章：Ajax 理解同步和异步 什么是Ajax 为什么使用Ajax 怎么使用Ajax 同步和异步 同步：提交请求-等待服务器处理-处理完毕返回(这个期间客户端浏览器不能干任何事. 异步: 请求通过事件触发-服务器处理（这是浏览器仍然可以作其他事情）-处理完毕 3 什么是Ajax Ajax 中文译为：阿贾克斯 异步JavaScript和XML (Asynchronous JavaScript and XML)的缩写 Ajax的核心理念：使用异步方式来构建胖客户端 Ajax处理数据的特点 异步 按需索取 4 什么是Ajax 5 传统的Web应用模型(同步) 等待 6 Ajax的Web应用模型（异步） 7 Ajax的优势 加快了响应速度 ，减少用户的等待时间 减轻服务器负担，充分利用带宽资源 可以调用外部数据 基于标准化，并被广泛支持，不需下载插件或程序 进一步促进页面呈现与数据处理的分离 8 使用Ajax 创建异步请求对象 设置请求参数 设置callback函数,以处理服务端响应消息. 发送异步请求. callback函数处理服务端响应消息. 9 使用Ajax 创建异步调用对象 在IE浏览器中创建 在firefox浏览器中创建 var xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”); var xmlhttp=new XmlHttpRequest(); 10 异步调用对象(XMLHttpRequest) XMLHttpRequest对象的三个重要的属性 onreadystatechange 属性 onreadystatechange 属性存有处理服务器响应的函数 readyState 属性 readyState 属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行 0 -- 请求未初始化（在调用 open() 之前） 1 -- 请求已提出（调用 send() 之前） 2 -- 请求已发送（这里通常可以从响应得到内容头部） 3 -- 请求处理中（响应中通常有部分数据可用，但是服务器还没有 完成响应） 4 -- 请求已完成（可以访问服务器响应并使用它） xmlHttp.onreadystatechange=function() { // 我们需要在这里写一些代码 } Callback函数 xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { //从服务器的response获得数据 } } 11 异步调用对象(XMLHttpRequest) responseText 属性 可以通过 responseText 属性来取回由服务器返回的数据。 xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { document.myForm.time.value=xmlHttp.responseText; } } 12 使用Ajax 发送异步请求 open()方法 open()方法需要三个参数。第一个参数定义发送请求所使用的方法（GET 还是 POST）。第二个参数规定服务器端脚本的 URL。第三个参数规定应当对请求进行异步地处理。 send()方法 send() 方法可将请求送往服务器 xmlhttp.open(Method,URL,Aysc); xmlhttp.send(); 或 xmlhttp.send(“id=yang”); 13 使用Ajax 服务端为Java的处理方式 response.setContentType(text/xml); response.setHeader(Cache-Control,no-cache); response.setHeader(Pragma,no-cache); response.setDateHeader(Expires,0); PrintWriter out=response.getWriter(); …….. out.write(…); out.close(); //out.