现在的位置: 首页 > 综合 > 正文

day31_ajax

2018年05月17日 ⁄ 综合 ⁄ 共 3811字 ⁄ 字号 评论关闭

同步交互和异步交互:

 

举个例子:普通B/S模式(同步)       AJAX技术(异步)

      *  同步:提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事

      *   异步: 请求通过事件触发->服务器处理(这时浏览器仍然可以作其他事情)->处理完毕

     同步是指:发送方发出数据后,等接收方发回响应以后才发下一个

                        数据包的通讯方式。  
异步是指:发送方发出数据后,不等接收方发回响应,接着发送下

                       个数据包的通讯方式

    

     易懂的理解:

    异步传输:   你传输吧,我去做我的事了,传输完了告诉我一声  
同步传输:   你现在传输,我要亲眼看你传输完成,才去做别的

 

l  Ajax的技术的产生

•    Ajax被认为是(Asynchronous JavaScript and XML的缩写)。现在,允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax.

Ajax:一种不用刷新整个页面便可与服务器通讯的办法

 

不用刷新整个页面便可与服务器通讯的办法:

•    Flash

•    Java applet

•    框架:如果使用一组框架构造了一个网页,可以只更新其中一个框架,而不必惊动整个页面

•    隐藏的iframe

•    XMLHttpRequest:该对象是对JavaScript 的一个扩展,可使网页与服务器进行通信。是创建Ajax 应用的最佳选择。实际上通常把Ajax 当成XMLHttpRequest 对象的代名词

Ajax的工作原理

AJAX采用异步交互过程。AJAX在用户与服务器之间引入一个中间媒介,从而消除了网络交互过程中的处理等待处理等待缺点。

用户的浏览器在执行任务时即装载了AJAX引擎。AJAX引擎用JavaScript语言编写,通常藏在一个隐藏的框架中。它负责编译用户界面及与服务器之间的交互。

AJAX引擎允许用户与应用软件之间的交互过程异步进行,独立于用户与网络服务器间的交流现在,可以用Javascript调用AJAX引擎来代替产生一个HTTP的用户动作,内存中的数据编辑、页面导航、数据校验这些不需要重新载入整个页面的需求可以交给AJAX来执行。

使用AJAX,可以为JSP、开发人员、终端用户带来可见

也就是说,它把所有的请求都给了ajax引擎这个东西,让它来替用户做,自己不用管,只需要在引擎完成任务以后告诉用户,我完了,你来调用我吧。

 

 

AJAX包含的技术:

      AJAX:(Asynchronous JavaScript and XML)并不是一项新技术,其实是多种技术的综合,包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest.

•    服务器端语言:服务器需要具备向浏览器发送特定信息的能力。Ajax与服务器端语言无关。

•    XML (eXtensible Markup Language,可扩展标记语言) 是一种描述数据的格式。AJAX 程序需要某种格式化的格式来在服务器和客户端之间传递信息,XML 是其中的一种选择

•    XHTML(eXtendedHypertext Markup Language,使用扩展超媒体标记语言)和 CSS(Cascading Style Sheet,级联样式单)标准化呈现;

•    DOM(DocumentObject Model,文档对象模型)实现动态显示和交互;

•    使用XMLHTTP组件XMLHttpRequest对象进行异步数据读取

•    使用JavaScript绑定和处理所有数据


AJAX
的缺陷:

AJAX不是完美的技术。也存在缺陷:

1    AJAX大量使用了Javascript和AJAX引擎,而这个取决于浏览器的支持。IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持,Mozilla虽然也支持AJAX,但是提供XMLHttpRequest的方式不一样。所以,使用AJAX的程序必须测试针对各个浏览器的兼容性。

2   AJAX更新页面内容的时候并没有刷新整个页面,因此,网页的后退功能是失效的;有的用户还经常搞不清楚现在的数据是旧的还是已经更新过的。这个就需要在明显位置提醒用户“数据已更新”。

3    对流媒体的支持没有FLASH、Java Applet好。

4    一些手持设备(如手机、PDA等)现在还不能很好的支持Ajax。

 

XMLHttpRequest对象方法

方法

描述

abort()

停止当前请求

getAllResponseHeaders()

把http请求的所有响应首部作为键/值对返回

getResponseHeader("headerLabel")

返回指定首部的串值

open(“method”,”url”)

建立对服务器的调用,method参数可以是GET,POSTurl参数可以是相对URL或绝对URL。这个方法还包括3个可选参数。

send(content)

向服务器发送请求

setRequestHeader("label", "value")

把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()

 

Ajax就相当于第三者,用户不再与服务器直接通信,而是用户把请求交给了第三者,让第三者去与之通信,结束后再告知用户。

 

XMLHttpRequest对象属性:

 

同步:客户端获取的是最终的处理完的信息

异步:服务端发生的每一次变化,都要返回客户端。

所以在用ajax时间,我们可以在客户端获取服务器的每一次变化。即我方可以实时获取服务器的每一次变化,因为有的时间它要是很久不返回最终结果呢,虽然我们要的是最终的结果,但是我们知道其中的每一个过程,这样才能对敌方了如指掌。

 

readyState

•   readyState
属性表示Ajax请求的当前状态。它的值用数字代表。

•   0
代表未初始化。还没有调用 open方法

•   1
代表正在加载。 open方法已被调用,但 send
方法还没有被调用

•   2
代表已加载完毕。send
已被调用。请求已经开始

•   3
代表交互中。服务器正在发送响应

•   4
代表完成。响应发送完毕

•    每次 readyState
值的改变,都会触发 readystatechange
事件。如果把 onreadystatechange
事件处理函数赋给一个函数,那么每次 readyState
值的改变都会引发该函数的执行。

•   readyState
值的变化会因浏览器的不同而有所差异。但是,当请求结束的时候,每个浏览器都会把 readyState
的值统一设为 4

 

每次服务器端readyState状态的改变都会触发readystatechange事件。这样我们把一个函数事件的处理赋给一个函数,那么每次readyState值的改变都会引发该函数的执行。

 

 

xmlRequest.open("get","../testServlet01?timeStamp="+new
Date().getTime(),
true);

 

* 在路径单独后面加上时间戳,保证每次请求的路径不一样,此时,浏览器会认为是一次新的请求 
因为你如果不加时间这个东西,当浏览器第二次之后访问时间,它会发现路径没有发生变化,从而不再访问新的,而是直接使用缓存

 

公司的eclipse总是不是能用servlet是不是因为这个,它没有默认加载J2EEJAR包,

ServeràRunTIme,配置tomat,然后在该项目下点击属性,然后加入buildPathRunTime加进去,因为tomcat里面有servelt
jsp
jar包。

 

 

Elicpse真是大不一样,当它部署以后它是在space\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\项目名称。

为什么在js中访问servelt要加../ 
它表示什么?一个点表示当前目录,再加一个/
结合起来

./  表示当前目录,再前面再加一个点表示上一级目录,所以在访问的时间要加上这个,

而在jsp页面引入JS时间用了

<script
charset="gb2312" 
type="text/javascript"src="./test.js"></script>

可以不加./是一样的,都表示当前目录。

 

•   setRequestHeader(header,value方法的作用是当使用post方法传递时间,需要将Content-type”
的首部设置为application/x-www-form-urlencoded”.它会告知服务器正在发送数据,并且数据已经符合URL编码了。该方法必须在open()之后才能调用

 

现在我们已经可以向服务器发送ajax请求了,那么如何接收从服务器送过来的数据呢?

xmlRequest还有两属性:responseTextresponseXML

responseText

•    XMLHttpRequest
responseText
属性包含了从服务器发送的数据。它是一个HTML,XML或普通文本,这取决于服务器发送的内容。

•    readyState
属性值变成 4
, responseText
属性才可用,表明 Ajax
请求已经结束。

 

【上篇】
【下篇】

抱歉!评论已关闭.