Ajax介绍

1，同步交互与异步交互：(面试)

同步交互：就是以前javaweb的场景，即：客户端想服务器端发送请求，服务器端处理并响应给客户端，客户端才能向服务器端发送下一个请求的模式，就是同步交互。

异步交互：ajax，就是客户端向服务器端发送请求，不必等待服务器端处理并向客户端响应结果，客户端就可以服务器端发送下一个请求的模式就是异步交互。

2，关于ajax

AJAX被认为是（asynchronous(异步)javascript and XML）的缩写。

AJAX的定义：现在，允许浏览器与服务器通信而无需刷新当前页面的技术都叫做ajax。(不严谨，因为还有很多其他技术也能完成ajax做的事情)

AJAX的核心对象：XMLHttpRequest对象。

举例：用户登录

同步交互：点击登陆，将请求发送到服务器端，无论是显示成功页面还是失败页面，当前的页面都不存在了，也就是说，在用户点击完登陆之后，服务器将整个相应页面返回之前，用户什么都不能做。

异步交互：点击登陆，将请求发送到服务器端，用户不必等待服务器响应，仍然可以在当前页面进行其他操作，在服务器响应的这段期间内，用户的体验不受影响。

但其实用ajax做登录是不科学的，如果用Ajax做登录，用户点击登录后，如果登录失败还好说，可以上用户在当前页面继续输入，但是如果登陆成功，页面也不发生改变的话，用户就不知道是不是登陆成功了，影响了用户的体验。

 

Ajax的特点：

首先要知道，不是任何场景都适合用ajax的。

Ajax可以使工程包变小，导致性能上的提升，因为我们可以通过ajax来代替大量的用于显示的jsp页面，ajax可以操作页面内容，而用户关心的只是页面内容，所以通过ajax生成页面内容，就可以将工程包缩小。

性能要高一些。

 

AJAX比较成功的案例：

(1)，谷歌搜索。在搜索框中搜索时，输入一些信息，就会在列表中显示包含输入文字的相关信息，而这些数据来自服务器端的数据库，也就是说在列出这个列表的时候，页面与服务器进行了交互，但是页面却没有动，满足ajax的描述。

(2)，谷歌地图。每次只显示一小块，用鼠标拖动的时候，也会一小块一小块的加载，数据来自服务器，说明用户与服务器交互了，但是当前页面没有动，满足ajax的描述。

 

3,AJAX入门

案例：依然是之前的登录案例。

同步交互：客户端向服务器端发送请求，请求的是整个页面，服务器端进行处理并响应，响应的也是整个页面，所以，在传统的web模型中，客户端与服务器端进行交互，交互的是整个页面。

异步交互：客户端向服务器端发送请求，请求的是数据层面，服务器端进行处理并响应，响应的也是数据层面，在ajax模型中，客户端与服务器端进行交互，交互的是数据层面。

这个案例中，通过ajax的方式更优，因为传统web模型要将整个页面打包发送到服务器端，而我们只需对用户名和密码进行校验，这样的打包显得过于臃肿。而ajax模型只将用户名和密码打包发送到服务器端，数据包就会小得多，所以ajax更优。二者的根本区别就在于一个请求的整个页面，一个请求的是数据。

 

4，除了ajax，还有哪些技术能完成ajax做的事情

（1）Flash：页面上必须有Flash插件才可以观看视频，点击播放时会加载视频，整个加载过程中，页面并没有动，但与服务器交互了，因为数据在服务器，符合描述。

Flash的致命弱点是：

一个是，当同时打开多个含有Flash页面的时候，可能就卡住了，就是说Flash的性能并不好。

另一个是它需要安装第三方插件才可以使用。

现在出的HTML5中可以解决这些问题，HTML5中有个新的标签叫做<video>。HTML5的出现干掉了Flash，因为HTML5是浏览器原生支持的，性能远比Flash好。很多网页游戏都是Flash做出来的，但现在很多都是HTML5做出来的，而且HTML5做出的游戏在性能和效果方面已经可以和Flash媲美了。所以HTML5是下一个PC端的趋势。

现在，Flash的主公司已经宣称放弃更新Flash，最火的移动互联网也宣布不支持Flash，以后都沿用HTML5。

（2）Java Applet:

小应用程序，开发的产品都类似C/S模式。

（3）框架：HTML中的框架<frameset>，这其实是一种视觉上的异步交互，其实还是同步交互。意思就是说，在左边的菜单栏点击超链接的时候，会在右边显示相应的页面，从用户角度看，只有右面的页面变动了，其他的没有改变，也符合异步交互的描述。但是我们知道，它其实是在一个页面中分割成多个窗口，每个窗口请求的都是整个页面，所以当我们点击左边菜单栏的时候，是请求了一整个页面显示在右边的窗口中。

（4）隐藏的iframe:

是HTML的一个标签。在ajax之前，可以实现异步交互，使用的就是iframe。但是iframe做异步交互有问题，不够好，所以需要ajax。

Iframe的问题所在：通常我们发送请求后，屏幕中会有小圈转动，表示正在加载，加载完毕将显示内容。但iframe的致命问题就是，当这个小圈转动完以后，依旧不消失，还在转。就会给用户产生还没有加载完毕的错觉。

现在也有用iframe做异步交互的产品，GoogleTop，是Google做的B/S模式的聊天工具。但是谷歌的工程师做了一个组件解决了上述问题。

（5）XMLHttpRequest:

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