一. AJAX的概述
1.1 什么是ajax
同步:
异步:
1.AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
说明:异步:就是不同步。例如我们向后台发送请求,同步的方式是后台必须返回响应数据才可以在浏览器上进行下一步操作,而异步方式可以在不需要等待后台服务器响应数据,直接可以进行其他操作。
2.AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
3.AJAX 是与服务器交换数据并更新部分网页的技术,在不重新加载整个页面的情况下。
小结:
简而言之:ajax就是一项通过js技术发送异步请求 的技术。 异步请求,局部更新,不是整个网页更新。
1.2 同步和异步的区别
#同步
1. 浏览器与服务器是串行的操作,浏览器发起请求的时候,服务器在处理该请求的时候,浏览器只能等待。响应返回,然后才能够发送下一个请求,如果该请求没有响应,不能发送下一个请求,客户端会处于一直等待过程中。
2. 缺点:执行效率低,用户体验差。
#异步
1. 浏览器与服务器是并行工作的,浏览器发送一个请求,不需要等待响应返回,随时可以再发送下一个请求,即不需要等待。
2. 优点:执行效率高,用户体验更好。
AJAX使用异步的提交方式,浏览器与服务器可以并行操作,即浏览器后台发送数据给服务器。用户在前台还是可以继续工作。用户感觉不到浏览器已经将数据发送给了服务器,并且服务器也已经返回了数据。
小结:
【1】同步请求存在的问题:
- 阻塞:请求发出后必须得等到响应结束才能操作页面信息。
- 全部更新:整个页面更新。
【2】异步请求好处:
1.非阻塞:请求发出后不用等到响应结束才能操作页面信息。随时可以操作。
2.局部更新:页面的局部位置更新
1.3 AJAX的应用场景
Ajax通常用需要发送异步请求的地方,如表单的异步校验,搜索框的自动补全,异步加载数据;
1.3.1 注册表单的用户名异步校验
很多站点的注册页面都具备自动检测用户名是否存在的友好提示,当用户输入的账号已经存在,那么在输入框位置会出现提示信息。该功能整体页面并没有刷新,但仍然可以异步与服务器端进行数据交换,查询用户的输入的用户名是否在数据库中已经存在。
1.3.2 内容自动补全
不管是专注于搜索的百度,还是站点内商品搜索的京东,都有搜索功能,在搜索框输入查询关键字时,整个页面没有刷新,但会根据关键字显示相关查询字条,这个过程是异步的。
二.AJAX 的交互模型和传统交互模型的区别
AJAX 的交互模型和传统交互模型的区别如下图所示:
【1】传统交互模型:浏览器客户端向服务器直接发送请求数据,然后后台服务器接收到请求,处理请求数据,期间浏览器客户端只能等待服务器处理数据,并响应数据,最后服务器将响应数据响应给浏览器客户端,浏览器接收到响应之后才可以继续下一步操作。
【2】AJAX 的交互模型:就是浏览器内部多了一个ajax引擎,浏览器客户端向服务器发送请求的数据,都是先由浏览器将请求数据交给ajax引擎,注意,ajax引擎位于浏览器内部,是由js编写的一个软件。然后接下来都是由ajax引擎和服务器进行交互,此时用户可以在浏览器上进行其他操作,如果再次向服务器发送请求,那么依然是交给ajax引擎处理,并且服务器响应的数据也是交给ajax引擎处理,由ajax引擎来分配浏览器的操作。
注意:ajax引擎内部具有一个核心对象:XMLHttpRequest。都是由该对象进行异步请求交互数据的。 new XMLHttpRequest()启用ajax引擎
小结:ajax支持异步访问,网页局部刷新。主要是依赖于核心对象:XMLHttpRequest。Ajax就是通过XMLHttpRequest对象来发送异步的请求。