Ajax简介

Ajax概述

1、同步请求和异步请求

根据之前我们的学习，我们已经知道浏览器客户端向服务器端发送请求的请求方式主要由两种：get和post.只有form表单的method位置书写post才是post请求，其余都是get请求。

1.1 同步方式发送请求

发送一个请求，需要等待响应返回，然后才能够发送下一个请求，如果该请求没有响应，不能发送下一个请求，客户端会处于一直等待过程中。

我们之前学习的所有由浏览器向服务器发送的请求都属于同步请求.

a标签：<a href=""></a>
location：location.href = "";
form表单：
直接在浏览器地址栏输入地址：

1.2异步方式发送请求

发送一个请求，不需要等待响应返回，随时可以再发送下一个请求，即不需要等待。

1.3 同步请求存在的问题

1. 阻塞：请求发出后必须得等到响应结束才能操作页面信息。
2. 全部更新：整个页面更新。

2、什么是Ajax

Ajax 即"Asynchronous Javascript And XML"（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

简而言之：一项通过js技术发送异步请求 的技术。 异步请求，局部更新

3、Ajax常见的应用场景

Ajax通常用需要发送异步请求的地方，如表单的异步校验，搜索框的自动补全，异步加载数据；

3.1 注册表单的用户名异步校验

很多站点的注册页面都具备自动检测用户名是否存在的友好提示，当用户输入的账号已经存在，那么在输入框位置会出现提示信息。该功能整体页面并没有刷新，但仍然可以异步与服务器端进行数据交换，查询用户的输入的用户名是否在数据库中已经存在。

3.2 内容自动补全

不管是专注于搜索的百度，还是站点内商品搜索的京东，都有搜索功能，在搜索框输入查询关键字时，整个页面没有刷新，但会根据关键字显示相关查询字条，这个过程是异步的。

4、AJAX 的交互模型和传统交互模型的区别

AJAX 的交互模型和传统交互模型的区别如下图所示：

1）传统web交互模型：客户端发送请求，服务器接收请求，客户端等待，在服务器响应回来时，重新加载整个页面。遵从http协议。

2）Ajax交互：ajax引擎，存在浏览器中。把请求交给ajax引擎，由ajax引擎交给服务器。响应完成之后，响应交给引擎。页面和引擎遵从xmlhttp协议.

注意：引擎存在浏览器端。

Ajax交互模型：浏览器首先将请求 发送 Ajax引擎（以XMLHttpRequest对象为核心），AJax引擎再将请求发送给服务器，服务器回送响应先发给Ajax引擎，再由引擎传给浏览器显示。

总结：ajax交互比传统交互多了一个ajax引擎。

在IE5.0版本之后才有ajax引擎。

Ajax引擎是浏览器自带的。Ajax引擎是Javascript的一个应用程序。就是用javascript写出来的。

异步交互模型，客户端将请求提交给Ajax引擎，客户端可以继续操作，由Ajax引擎来完成与服务武器端通信，当响应回来后，Ajax引擎会更新客户页面。在客户端提交请求后，用户可以继续操作，而无需等待 。

小结：ajax支持异步访问，网页局部刷新。主要是依赖于核心对象：XMLHttpRequest。