标签：

一、Ajax 根本 1.1 什么是 Ajax？ 1.2 在哪里我们会用到 ajax 1.3 ajax 的事情道理 1.4 XMLHttpRequest 东西 1.4.1 XMLHttpRequest 常用要领 1.4.2 XMLHttpRequest 常用属性 二、让我们来试一试吧 2.1 简单的使用 ajax ，验证用户名是否合法 2.1.1 前端 demo （index.jsp） 2.1.2 JavaScript demo 2.1.3 2.1.4 后端 servlet 代码 2.2 运行截图 三、学习增补 3.1 问题记录 3.2 学习参考

一、Ajax 根本

1.1 什么是 Ajax？

Ajax [Asynchronous JavaScript and XML]（异步 的 JavaScript 和 XML），ajax 并不是一种新型的技术，它可以做到网页刷新局部页面，而不必刷新整个网页的页面而实现某类特定的成果。

一句话来说：ajax 是只刷新局部页面的异步交互技术，它有如下特点

ajax 并不是一种新的编程语言，它是由 JavaScript 和 XML + 异步的交互技术

核心东西： XMLHttpRequest （发送请求随处事器并获得返回功效）

解释一下什么是同步，什么是异步？

同步：我们正常访谒网页的时候，都是点一个链接，页面刷新好了，就可以看到我们想看的数据

异步：页面向处事器发送请求之后不必期待返回功效，处事器返回的功效会由专门的回调函数来措置惩罚惩罚功效

回调函数【增补】：这个函数中，会查抄请求的状态，如果请求的状态完成，并且没有发明处事端呈现错误，那么将会从该处事器返回的数据进行措置惩罚惩罚并凡是以某种形式显示输出到页面上 —— JavaScript 学习指南（第二版）

1.2 在哪里我们会用到 ajax

最常见的例子，我们在网上打开某一个在线翻译软件，好比百度翻译，我们在翻译的左侧输入内容，其实后台已经在帮我们查找我们可能要翻译的任何内容，当我们输入完毕之后，过了一会就自动显示出功效了，这就是 ajax 技术的应用，在我们没有察觉的情况下，就自动显示功效

1.3 ajax 的事情道理

Ajax 首先会向处事端发送一个请求，然后挪用一个处事（回调函数），接着返回功效。这样使 客户端 和 处事端产生了少量的数据交换，ajax 实现局部页面的更新，从而减少了处事真个压力

但是为了打点处事端 和 客户端之间的异步通信，会用到一个特殊的东西，就是上面提到过的 XMLHttpRequest 东西

1.4 XMLHttpRequest 东西

1.4.1 XMLHttpRequest 常用要领

JavaScript 东西 XMLHttpRequest 是整个 Ajax 技术的核心，他供给了异步发送请求的能力，它供给了 三个常用的要领

要领名说明
open(method,URL,async,username,password)   成立与处事器的链接，method参数指定请求 http的要领，最常见的是 get 请求和 post 要领， URL 参数指定请求的地点，async 参数指定是否使用异步请求，值为 true 或 false,最后两个参数 在做 htto 认证的时候会用得到  
send(content)   发送请求道处事器，content 参数指定请求的参数，get 请求不需要传参数，post 请求要把请求的参数写上去  
setRequestHeader(header,value)   设置请求头信息  

1.4.2 XMLHttpRequest 常用属性

onreadystatechange：请求状态转变的事件触发器（readyState变革时会挪用此要领），一般用于指定回调函数

readystate：XMLHttpRequest 的状态信息如下，

就绪状态码说 明
0   XMLHttpRequest 东西 没有完成初始化  
1   XMLHttpRequest 东西 开始发送请求  
2   XMLHttpRequest 东西 的请求发送完成  
3   XMLHttpRequest 东西 读取响应  
4   XMLHttpRequest 东西 读取响应表结束，数据接收完成  

status： HTTP 的状态码

下面给大家介绍一些常见的 http 状态码，想更多了解的请移步 —— http 响应状态码大全

200 告成

400 客户端错误，404 页面不存在，403 没有权限访谒

500 处事端产生错误

responseText：获取响应的内容
注意：当 readystate 为 4，而且 status 是200，才可以措置惩罚惩罚处事器响应的数据

responseXML：处事器返回的兼容DOM的XML内容

statusText：处事器返回状态码的文本信息

二、让我们来试一试吧

由于博主本科是学 Java 的，也对 java EE 对照熟悉，因此我们验证 ajax 就是用 jsp + servlet + JavaScript + ajax 来实现

2.1 简单的使用 ajax ，验证用户名是否合法

我们要实现一个简单的成果，我们注册用户名为 admin 的时候，系统会显示账号已经被注册，输入其他账号，系统可以正常运行

2.1.1 前端 demo （index.jsp）

span 标签用来显示处事端传过来的数据