前言：

作为资深球迷，提起Ajax，第一反应想到的是阿贾克斯，那个曾培养出伊布，范德法特，苏亚雷斯，亨特拉尔等一众球星的荷甲著名球队。

很显然，我们今天说的Ajax，跟足球没有任何关系，我们说的是这个Ajax：Asynchronous JavaScript And XML(异步JavaScript和XML)。

Ajax不是一门编程语言，指的是一种交互方式：客户端与服务器交换数据并更新在局部网页的技术，不需要重新加载整个页面。

Ajax的核心就是异步加载或者叫局部刷新。

什么是局部刷新？通过一个直观的例子来了解。

需求

1.点击提交按钮，向服务器发请求，等待响应。

2.同时在input框输入信息。

3.服务器返回"haha"字符串，将结果显示在页面。

传统方法会刷新整个页面：

点击提交按钮后，正在input框输入内容时，服务器响应返回。会以重新加载整个页面的形式展示结果，同步加载，所以input框内输入的内容全部清空。

Ajax局部刷新：

点击提交按钮后，在input框输入内容，服务器响应返回，只动态刷新要展示结果的部分网页，并不会影响到input框的输入，结果展示和输入是同时在进行的，互不干扰，异步加载。

传统web数据交互 VS Ajax数据交互

客户端请求方式不同：

传统：浏览器发送同步请求。

Ajax：异步引擎对象发送请求。

服务器响应方式不同：

传统：响应一个完整页面(JSP)。

Ajax：响应需要的数据。

客户端处理方式不同：

传统：需等待服务器响应完成并重新加载整个页面后，用户才能进行操作。

Ajax：动态更新页面中的局部内容，不影响用户在页面的其他操作。

Ajax原理

Ajax的工作原理相当于在客户端和服务器之间加了—个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

Ajax技术的核心：XMLHttpRequest

常用方法：

1. open() 创建一个新的HTTP请求。

2. send() 将请求发送到服务器。

常用事件：

onreadystatechange：指定回调函数。

常用属性：

readyState：XMLHttpRequest的状态信息。

状态码表示的意义：

0：XMLHttpRequest对象未完成初始化。

1：XMLHttpRequest对象开始发送请求。

2：XMLHttpRequest对象的请求发送完成。

3：XMLHttpRequest对象对象开始读取响应。

4：XMLHttpRequest对象读取响应结束。

代码：

JSP：