资源描述
,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,北风网项目培训,第,8,讲：,JavaScript,中利用,Ajax,实现客户端与服务器端通信,QQ:,768580674,Email:,JavaScript-JQuery系列全程精通+图书馆管理系统实战,1,Ajax,简介,XMLHttpRequest,对象,综合案例,2,1,、,HTTP,请求,现在，很多浏览器都可以直接从,JavaScript,中初使化,HTTP,请求并获取结果,完全不用隐藏框架和其他取巧的小技巧。,这个令人振奋的新功能的核心是，微软创建的,XML HTTP,请求的对象。这个对象是与,MSXML,一起出现的，直到最近它的能力才被完全发掘。,XML HTTP,请求本质上是添加了额外的用于发送和接收,XML,代码的功能的,HTTP,请求。,与,IE,中的,XML DOM,一样，,XML HTTP,请求对象有多种版本。,3,Ajax,定义,Ajax (Asynchronous JavaScript and XML)不是一个新的技术，事实上，它是一些旧有的成熟的技术以一种全新的更加强大的方式整合在一起,Ajax的关键技术：,使用XHTML(HTML)和CSS构建标准化的展示层,使用DOM进行动态显示和交互,使用XML和XSLT进行数据交换和操纵,使用XMLHttpRequest异步获取数据,使用JavaScript将所有元素绑定在一起,4,传统,Web,应用与,Ajax,应用的比较,5,传统,Web,应用与,Ajax,应用的比较（,cont.,）,在传统的Web应用模型下，大部分的用户操作都会发送一个HTTP请求给服务器，然后服务器开始处理（接收数据，执行业务逻辑，访问数据库等），最后向浏览器返回HTML页面。当服务器处理请求时，用户能够做什么呢？只有等待！,6,传统,Web,应用与,Ajax,应用的比较（,cont.,）,在传统的,Web,应用模型下，客户机 （浏览器或者本地机器上运行的代码）向服务器发出请求。该请求是同步的，客户机等待服务器的响应。当客户机等待的时候，会用某种形式通知您正在处理：,沙漏（特别是,Windows,上）,旋转皮球（通常在,Mac,机器上）,应用程序基本上冻结了，然后过一段时间光标变化了,这正是传统,Web,应用程序让人感到笨拙或缓慢的原因,缺乏真正的交互性。按下按钮时，应用程序实际上变得不能使用，直到刚刚触发的请求得到响应。如果请求需要大量服务器处理，那么等待的时间可能很长,7,传统,Web,应用与,Ajax,应用的比较（,cont.,）,Ajax,应用通过在用户和服务器之间引入一个媒介（,Ajax engine,）来异步发送请求，消除了传统的发送请求等待发送请求等待的特性，极大的提高了用户体验,8,第一步：创建一个,XMLHTTP,对象,function XMLHttpRequest() ,var arrSignatures = MSXML2.XMLHTTP.5.0, MSXML2.XMLHTTP.4.0,MSXML2.XMLHTTP.3.0, MSXML2.XMLHTTP,Microsoft.XMLHTTP;,for (var i=0; i arrSignatures.length; i+) ,try ,var oRequest = new ActiveXObject(arrSignaturesi);,return oRequest;, catch (oError) ,/ignore,9,第二步：创建好,XML HTTP,请求对象后，可用,Open(),方法来指定要发送的请求,oRequest.open(“get”,”example.txt”,false);,该方法有三个参数：,1,、要发送的请求的类型,:GET,、,POST,、,Header,等,2,、请求的,URL,3,、异步,(true),或同步,(false),第三步：通过,send,方法发送请求,oRequest.send(null),Send,方法一定要有一个参数，不过大多数情况下为,null.,第四步：如果是异步发送请求,可以通过以下属性查看,HTTP,状态,1,、,oRequest.status:,一整型值：,200-,正常；,404-,没找到指定页面,.,2,、,oRequest.statusText:,描述状态信息,3,、,responseText,：记载由服务器返回的文本,4,、,responseXML:,如果返回的是,XML,，则可用其返回由文本构造出的,XML DOM,对象,10,如果要发送异步请求，必须使用,onreadystatechage,事件处理函数，并检查,readyState,特性是否等于,4(,与,XML DOM,一样,),response,对象在请求完毕前不可用,如：,Var oRequest = createXMLHTTP();,oRequest.open(“get”,”getUserInfo.aspx”,true);,oRequest.onreadystatechange = function(),if (oRequest.readyState = 4),alert(“status = “+oRequest.status+”n”+oRequest.statusText+”n”+oRequest.responseText);,oRequest.send(null);,11,示例,1,12,使用,HTTP,首部,每个,HTTP,请求发送时都包含一组带有额外信息的首部,.,在我们使用浏览器时，这些首部被隐藏了，因为对于终端用户来讲，这些信息是没用的然而，这些首部信息对开发人员来说可能是很重要的,、,getAllResponseHeaders(),方法,用于返回所有响应的,HTTP,首部信息,、,getResponseHeader(“,参数“,),用于获取指定的某个首部,、,setRequestHeader(“myheader”,”value”);,用于设置,XML HTTP,请求的首部信息,13,一个,HTTP,请求如下所示：,Server: Microsoft-IIS/5.1,Date: Mon, 04 Aug 2008 14:46:05 GMT,X-Powered-By: ASP.NET,X-AspNet-Version: 2.0.50727,Cache-Control: private,Content-Type: text/xml; charset=utf-8,Content-Length: 15812,14,oRequest.getAllResponseHeaders() /,得到上述信息,oRequest.getResponseHeader(“Content-Type”),/text/xml; charset=utf-8,oRequest.setRequestHeader(“myHeader”,”myvalue”);,这里可以假设你设计了一些服务器逻辑来根据这些首部信息提供额外的功能或者对请求的计算,15,进行,GET,请求,Web,上最常见的请求类型就是,GET,请求,.,每次在浏览器中输入,URL,并打开页面时，就是在向服务器发送一个,GET,请求：,如：,可用以下函数处理,URL,参数,function addURLParam(sURL,sParamName,sParamValue),sURL+=(sURL.indexOf(“?”) = -1?”?”:”,return sURL:,使用：,Var sURL = ;,sURL = addURLParam(sURL,”search”,”ajax”);,sURL = addURLParam(sURL,”name”,”aaa”);,var result=new Date().getTime();,sURL = addURLParam(sURL,”catch”,result);,oRequst.open(“get”,sURL,true);,oRequse.send(null);,说明：对于,ajax,请求，通过情况下为了清除服务器缓取，通常会采取此种做法应使参数不同,16,进行,POST,请求,与,Get,请求一样，,POST,请求的参数也必须进行编码，并用,&,进行分割，尽管这此参数不会被附加到,URL,上，发送,POST,请求时，要将参数传入,send(),方法：,oRequst.open(“post”,”,false);,oRequest.send(“username=admin,注意：利用,post,方法进和,ajax,请求时：必须将请求“,Content-Type”,首部设置为”,application/x-”,故：,oRequst.open(“post”,”,false);,oRequst.setRequestHeader(“Content-Type”,” application/x-”);,oRequest.send (“username=admin,17,综合示例,1:,用户登录,演示,18,总结,Ajax,简介,XMLHttpRequest,对象,19,本课程版权归北风网所有,相关代码及视频请访问：,20,
展开阅读全文