客户端高级应用AJAX初步.ppt

动态网页设计之客户端高级应用,AJAX初步,AJAX概念,Ajax由HTML、JavaScript技术、DHTML和DOM组成，这一杰出的方法可以将笨拙的Web界面转化成交互性的Ajax应用程序。桌面应用程序操作起来基本上不需要等待。Web应用程序以页面为主，需要等待服务器响应，等待屏幕刷新，等待请求返回和生成新的页面。Ajax尝试改变WEB页页的等待情况Ajax主要用到JavaScript，通过DOM改变页面上的部分内容。,XMLHttpRequest对象,AJAX的核心是通过服务操作XMLHttpRequest对象。XMLHttpRequest是一套可以在脚本语言中通过http协议向服务器传送或从服务器接收XML及其他数据的一套API。,XMLHttpRequest对象,在一般的Web应用程序中，用户填写表单字段并单击Submit按钮。然后整个表单发送到服务器，服务器处理再发送回全新的页面。在返回前用户必须等待。Ajax基本上就是把JavaScript技术和XMLHttpRequest对象放在Web表单和服务器之间。当用户填写表单时，数据由JavaScript通过XMLHttpRequest发送给服务器。请求是在幕后发送的用户一般是不知道请求是何时发出。请求是异步发送的，就是说JavaScript代码（和用户）不用等待服务器的响应。因此用户可以继续输入数据、滚动屏幕和使用应用程序。服务器将数据返回给XMLHttpRequest对象，XMLHttpRequest调用相应的JavaScript代码或函数来处理服务器返回的数据：更新页面，让人感觉应用程序是立即完成的，表单没有提交或刷新而用户得到了新数据。,AJAX应用-1,1创建XMLHttpRequest对象varxmlHttp=newXMLHttpRequest();在Microsoft浏览器上创建XMLHttpRequest对象varxmlHttp=false;tryxmlHttp=newActiveXObject(Msxml2.XMLHTTP);catch(e)tryxmlHttp=newActiveXObject(Microsoft.XMLHTTP);catch(e2)xmlHttp=false;,AJAX应用-1,以支持多种浏览器的方式创建XMLHttpRequest对象varxmlHttp=false;tryxmlHttp=newXMLHttpRequest();catch(trymicrosoft)tryxmlHttp=newActiveXObject(Msxml2.XMLHTTP);catch(othermicrosoft)tryxmlHttp=newActiveXObject(Microsoft.XMLHTTP);catch(failed)xmlHttp=false;if(!xmlHttp)alert(创建XMLHttpRequest失败!);,AJAX应用-2,2获取表单数据和修改表单上的数据可以用formName.domainName.value或document.getElementById(domainID)两种方法都可,AJAX应用-3,3发出Ajax请求functioncallServer()/获取数据varuid=document.getElementById(uid).value;if(uid=null|uid=)return;/建立请求的URLvarurl=/testUID.asp?uid=+escape(uid);/建立与服务器的连接xmlHttp.open(GET,url,true);/告诉XMLHttpRuquest对象，谁来处理返回的数据xmlHttp.onreadystatechange=updatePage;/发送请求如果有数据主体，则需要先加上xmlHttp.setRequestHeader(Content-Type,application/x-www-form-urlencoded);/不管数据是GET方式跟在URL后还是POST方式放到send中发送，都是name=value,AJAX应用-4,4定义处理服务器返回数据的函数functionupdatePage()if(xmlHttp.readyState=4)varresponse=xmlHttp.responseText;document.getElementById(uidResult).value=response;,AJAX应用-5,5挂到表单的域的某个事件上onChange=callServer();onBlur=callServer();,AJAX应用-附,open()方法第一个参数是HTTP请求的方式GET、POST、HEAD或者任何其它你想使用的，你的服务器支持的方式。方式的名称要大写，否则有些浏览器（如Firefox）可能就不会处理请求。可以去W3Cspecs获取更多的你可以使用的HTTP请求方式的信息。第二个参数是你所请求页面的URL。第三个参数是用来设置请求是否为异步的。如果是TRUE，则在服务器尚未返回响应的时候，JavaScript的函数会继续执行。这也就是AJAX中的A的含义。,AJAX应用-附,readyState全部值的列表如下：0（未初始化/uninitialized）1（正在加载/loading）2（加载完毕/loaded）3（交互/interactive）4（完成/complete）,AJAX应用-附,访问返回值,都是只读的属性：responseBody返回某一格式的服务器响应数据,以unsignedarray格式表示直接从服务器返回的未经解码的二进制数据语法：strValue=xmlHttp.responseBody;属性：responseStream以AdoStream对象的形式返回响应信息语法：strValue=xmlHttp.responseStream;属性：responseText将响应信息作为字符串返回,XMLHTT