Ajax

Ajax

什么是Ajax？

*允许浏览器与服务器通信而无须刷新当前页面的技术。Ajax技术(异步)

同步交互和异步交互的区别？

1）同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方  式。

2）异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯  方式。

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

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

 *  异步: 请求通过事件触发->服务器处理（这时浏览器仍然可以作其他事情）->处理   完毕。
 Ajax模型比传统的web模型好在哪里？

1）页面数量少，性能高

2）对带宽的要求低

3）对服务器端造成的压力小

除了Ajax技术之外，还有哪些技术可以进行异步交互？

1）Flash技术(问题：性能不好;不是浏览器原生)

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

3）iframe：Ajax技术出现之前，存在异步交互，实现异步交互的技术就是iframe问题：   实现异步交互之后，处理完毕后，加载的效果依旧还在。

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

Ajax的缺陷：

1）Ajax技术并不适用于任何场景

2）大量使用javascript引擎和Ajax引擎，取决于浏览器的支持

3）客户端与服务器端交互时，不刷新当前页面。使浏览器的前进和后退功能失效，用    户经常搞不清楚，数据是新的还是旧的。需单独地拿出一个地方，专门进行提示。

4）对流媒体的支持不太好

 

扩： AJAX包含的技术：面试题

* Ajax是不是一个技术？不是

* 包含哪些技术：Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest

 

Ajax的工作原理

Ajax的核心是JavaScript对象XmlHttpRequest。

该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之， XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。

 

 

 

1）AJAX采用异步交互过程。AJAX在用户与服务器之间引入一个中间媒介，从而消除了

   网络交互过程中的处理—等待—处理—等待缺点。

 

2）用户的浏览器在执行任务时即装载了AJAX引擎。AJAX引擎用JavaScript语言编写，

   通常藏在一个隐藏的框架中。它负责编译用户界面及与服务器之间的交互。

 

3）AJAX引擎允许用户与应用软件之间的交互过程异步进行，独立于用户与网络服务器

   间的交流。现在，可以用Javascript调用AJAX引擎来代替产生一个HTTP的用户动作

   内存中的数据编辑、页面导航、数据校验这些不需要重新载入整个页面的需求可以交

   AJAX来执行。 

 

 

 

详细代码：

*创建XMLHttpRequest对象：有些笔试题，要求写出创建的代码！

function ajaxFunction(){

var xmlHttp;

try{ // Firefox, Opera 8.0+, Safari

     xmlHttp=new XMLHttpRequest();

   }catch (e){

  try{// Internet Explorer

   xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

   }

  catch (e){

   try{

      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

   }catch (e){}

  }

}

return xmlHttp;

}

 

* 注册监听

     * 使用XMLHttpRequest对象的onreadystatechange属性：监听服务器端的通信状态

 * 使用XMLHttpRequest对象的readyState属性：获取服务器端的通信状态

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

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

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

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

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

* 最终关注的状态为"4"，响应完毕

* 使用XMLHttpRequest对象的status属性：获取响应首部信息中的三位状态码：

404 没找到页面(not found)

403 禁止访问(forbidden)

500 内部服务器出错(internal service error)

200 一切正常(ok)

304 没有被修改(not modified)(服务器返回304状态，表示源文件没有被              修改 )

 

* 客户端与服务器端之间建立连接:

    * 使用的是XMLHttpRequest对象的open(method, url, asynch)方法

    * 请求类型是GET方式

* method：请求类型，为"get"

* url：请求路径，可以是绝对路径或相对路径

* asynch：表示是否异步加载，true是默认值(异步)

* 请求类型是POST方式

* method：请求类型，为"post"

* url：请求路径，可以是绝对路径或相对路径

* asynch：表示是否异步加载，true是默认值(异步)

* 需要设置请求首部信息：

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

 

* 向服务器端发送请求数据：

* 使用XMLHttpRequest对象的send()方法：

* 如果请求类型是GET方式的话，send()方法发送请求数据，服务器端不能接收

* 可以将要发送的请求数据，放置在请求连接的后面

* 该步骤不能省略，写法：send(null)

* 如果请求类型是POST方式的话，send()方法发送请求数据，服务器端可以接收

* 必须要设置请求首部信息的内容：Content-Type

 

* 实现Ajax的六个步骤是什么？

* 创建XMLHttpRequest对象

* 建立连接

* 发送请求

* 注册监听

* 获取服务器端的通信状态

* 获取服务器端的响应状态码

 

* 使用Ajax异步交互时，客户端接收服务器端的响应数据：

* 使用XMLHttpRequest对象的responseText属性：

 

 

接收的格式是文本内容或HTMlL代码

* 客户端接收服务器端的响应时，数据格式：XML

    * 服务器端：

    * 设置响应首部信息："Content-Type"为"text/xml"

response.setContentType("text/xml;charset=utf-8");

* 手动构建的xml格式数据：真实开发不可能这样做

* 构建的数据格式是xml格式，是String类型

* 数据来源于查询数据库，封装在javabean、List、Map和Array集合等

 

* 如何将javabean、List、Map和Array集合内容转换成xml数据格式？

* xstream工具包：

* xstream-1.4.4.jar包：核心包

* xpp3_min-1.1.4c.jar包：必要依赖包

 

* 处理逻辑：

//1 创建一个XStream的实例

XStream xStream = new XStream();

/*

 * 2 为javabean起别名(默认是包结构)

 *  * 利用XStream的实例alias(String name,Class type)

 *  * name：别名

 *  * type：指定为哪个javabean其别名

 */

xStream.alias("province", Province.class);

xStream.alias("city", City.class);

/*

 * 3 将javabean的属性作为转换后的xml格式的标签属性使用

 *  * 利用XStream的实例useAttributeFor(Class type,String fieldName)

 *  * type：指定要使用哪个javabean的属性

 *  * fieldName：指定对应javabean的属性名

 */

xStream.useAttributeFor(Province.class, "provinceId");

xStream.useAttributeFor(Province.class, "provinceName");

xStream.useAttributeFor(City.class, "cityId");

xStream.useAttributeFor(City.class, "cityName");

//4   利用XStream的toXML()方法，将javabean转换成xml数据格式

String xml = xStream.toXML(province1);

System.out.println(xml);

* 客户端：

* 使用XMLHttpRequest对象的responseXML属性：接收的格式是XML格式

* 利用DOM解析XML格式数据

 

* 第三种数据格式：json

定义：

1）是JavaScript Object Notation的缩写

2）是一种轻量级的数据交换格式。

特点：

1）易于人的阅读和编写

2）易于机器解析和生成

3）基于ECMA-262标准，采用完全独立于语言的文本格式。

数据格式和特点：

1）“名称/值”对的集合：类似于Map集合

* 这种结构其实就是javascript对象的直接量定义方式

* 是以"{}"开始和结束

* 数据是以"key/value"形式

* 多个数据之间，用","隔开

* 访问形式：json.key或json['key']

2）值的有序列表：类似于数组

* javascript中具有Array类型，内建对象

* 是以"[]"开始和结束的

* 数据之间用","隔开

 

3）json数据格式：是浏览器原生支持

*元素值可具有的类型：string, number, object, array, true, false, null

 

* 扩展：

* Map集合中嵌套数组结构

* 数组结构中嵌套Map集合

* "key/value"格式和数组格式可以混合嵌套，而且无限嵌套下去

 

 *客户端接收服务器端的响应时，数据格式：json

     * 服务器端：

* 不需要设置响应首部信息

* 构建的是String类型的json数据格式内容

* 如何将javabean、List、Array和Map集合等转换成json数据格式？

* json-lib工具包：

* json-lib-2.4-jdk15.jar：核心包

* 必要依赖包：

* commons-beanutils-1.8.3.jar

* commons-collections-3.2.1.jar

* commons-lang3-3.1-bin.zip

* commons-lang-2.5.jar

* commons-logging-1.1.1.jar

* ezmorph-1.0.6.jar

* morph-1.1.1.jar

* morph-sandbox-1.1.1.jar

* 使用我们自己的工具类：JSONUtil

* 客户端：

* 接收服务器端响应的json数据格式：

* 使用XMLHttpRequest对象的responseText属性

* 将其当做文本格式接收

 

* 利用eval()函数将其转换成json数据格式：

* 调用eval()函数时，将要转换成的内容，用"()"进行包装：(假如传递的是"{}")

                * 利用"()"将其包装，eval()函数会强行将其转化成json数据格式(object)

        * 不用"()"将其包装，eval()函数会将其解释为一个空的语句块

 

小结：

 数据格式(HTML\XML\JSON)

1）HTML

              * 优点：

* 在客户端接收后，不需任何解析

* 可读性比较好

* 配合innerHTML属性使用，效率好

              * 缺点：

* 更新一个页面多个部分时，使用Ajax异步交互，HTML不合适

2）XML

  * 优点：

* XML 是一种通用的数据格式。

* XML格式是自定义标签名

* DOM可以解析XML，不需要第三方的工具

  * 缺点：

* DOM解析复杂的XML时，代码量比较大，性能低

* 服务器端，必须设置正确的响应首部信息："Content-Type"为   "text/xml"

* 如果服务器端构建的xml数据格式不正确，客户端接收是不报错   的！

3）JSON

  * 优点：

* json更专注数据内容

* 服务器端构建json数据格式时，使用默认设置即可

* 客户端解析json数据格式，DOM解析json数据格式

  * 缺点：

* eval()函数：有可能转换不成功

 

扩展内容：反向Ajax

定时发送原理图：

 

 

按需发送原理图：