学习之前举一个简单的小栗子，让我们简单了解一下Ajax的应用与好处。一般网站都会有自己的数据库，用来单独存储用户的个人信息，平时我们在注册账号的时候会遇到信息输入的页面，假设第一个输入信息是用户名的填写，一般当你填写这第一个的时候旁边就会有提醒，提醒你的用户名是否合法，是否被占用等等。
这里就用到了Ajax，而不是像老版的Web设计，需要把所有的注册信息填写完毕，再提交到数据库去验证，再返回给客户提示。Ajax提高了效率，减少了运行成本，提升了用户体验。
一、Ajax 简介
== 传统的Web应用模式和 ajax 方式的比较 //上面
== AJAX应用的特点
1. 不刷新整个页面，在页面内与服务器通信。
2. 使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。
3. 应用仅由少量页面组成。大部分交互在页面之内完成，不需要切换整个页面。
==AJAX的好处
--减轻服务器的负担。AJAX的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
--无刷新更新页面，减少用户心理和实际的等待时间。
--可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。
--可以调用外部数据。
--基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。
--进一步促进页面呈现和数据的分离
==AJAX基础—概念
Asynchronous JavaScript and XML（异步JavaScript和XML）是一种创建交互网页应用的网页开发技术。所谓同步,即客户端脚本在请求服务器后,客户端脚本等待服务器返回响应之后再继续执行。而异步则是,客户端脚本在请求服务器之后,服务器还没有返回相应,客户端就可以执行下面的脚本.这就是异步。异步也表现就是在不打扰用户正常浏览的情况下,在后台与服务器交互。
==AJAX技术组成
XMLHttpRequest：进行异步数据读取；
Javascript：Javascript一直被定位为客户端的脚本语言，应用最多的地方是表单数据的校验。
现在，可以通过Javascript操作XMLHttpRequest，来跟数据库打交道。
DOM： DOM（Document Object Model）是提供给HTML和XML使用的一组API，提供了文件的表述结构，并可以利用它改变其中的内容和可见物。脚本语言通过DOM才可以跟页面进行交互。
XML：通过XML（Extensible Markup Language），可以规范的定义结构化数据，是网上传输的数据和文档符合统一的标准。
DHTML 或 Dynamic HTML：用于动态更新表单。我们将使用 div、span 和其他动态 HTML 元素来标记 HTML。
二、XMLHttpRequest
XMLHttpRequest 对象用于在后台与服务器交换数据。
XMLHttpRequest 对象是开发者的梦想，因为您能够：
1.在不重新加载页面的情况下更新网页
2.在页面已加载后从服务器请求数据
3.在页面已加载后从服务器接收数据
4.在后台向服务器发送数据
5.所有现代的浏览器都支持 XMLHttpRequest 对象 (IE6 除外)
三、创建 XMLHttpRequest 对象
所有现代浏览器 (IE7+、Firefox、Chrome(谷歌)、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象。通过一行简单的 JavaScript 代码，我们就可以创建 XMLHttpRequest 对象。
var xmlhttp=new XMLHttpRequest();
老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
四、通过 XMLHttpRequest 对象实现 ajax 效果
var xmlhttp; $(function(){ $("button").click(function(){ if(window.XMLHttpRequest){ //如果浏览器支持这个对象 xmlhttp=new XMLHttpRequest(); }else if(window.ActiveXObject){ //如果是ie6 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } if(xmlhttp){ //成功 xmlhttp.onreadystateChange =myReadyStateChange; //它指向一个回调函数 xmlhttp.open("get","UserServlet",true); //true表示使用异步方式 /* //如果要改用post方式,要改用下面的方式 //xmlHttp.open("post", "UserServlet", true); //xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //这句不加,后台取不到 userName //xmlHttp.send("userName=zhangsan&password=aaa"); //如果有多个参数，可以用&号分开 */ xmlhttp.send(null); }else{ alert("XMLHttpRequest对象创建失败"); } }); }); //回调函数 在什么时候被调用 在 xmlhttp 的 readyState 发生变化的时候被调用 function myReadyStateChange(){ //alert(xmlhttp.readyState); if(xmlhttp.readyState==4) //等于四,表示服务端返回了 { if(xmlhttp.status ==200 ) //xmlhttp.status 代表服务端返回的状态码 { $("#A1").html(xmlhttp.status); //状态码 $("#A2").html( xmlhttp.statusText); //状态信息 $("#A3").html(xmlhttp.responseText); //响应的消息 } } } <button>ajax方式得到数据</button><br /> Status(状态码): <span id="A1"></span> <br /> Status text(状态说明): <span id="A2"></span> <br /> Response(响应的数据): <span id="A3"></span>
服务端 UserServlet
response.getWriter().print("this is server data"); //尽量别加ln
备注:（前面我在学习网络上韩顺平的视频中，有记过这里的笔记，这里重温一下）
响应状态码: 表示服务器对请求的各种不同处理结果,是一个三位的10制数。
可归为 5 类
100段的 :成功接收请求,要求客户端继续提交下一次请求才能完成整个处理
200段的 :成功接收请求,并处理完成
300段的 :为完成请求,客户端需进一步细化请求,例如请求的资源已经移动到一个新地址
400段的 :客户端请求有错误
--400 Bad Request //客户端请求有语法错误，不能被服务器所理解
--401 Unauthorized //请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用
--403 Forbidden //服务器收到请求，但是拒绝提供服务
--404 找不到
500段的 :服务器端出现错误
--500 Internal Server Error //内部服务器错误,服务端的CGI,ASP,JSP等程序发生错误
--503 Server Unavailable //服务不可用,服务器由于当前负载过大,一段时间后可能恢复正常
注释：onreadystatechange 是一个事件句柄。它的值 (state_Change) 是一个函数的名称，当 XMLHttpRequest 对象的状态发生改变时，会触发此函数。状态从 0 (uninitialized) 到 4 (complete) 进行变化。
仅在状态为 4 时，我们才执行代码。
5 个状态中每一个都有一个相关联的非正式的名称，下表列出了状态、名称和含义：
| 状态 | 名称 | 描述 |
| 0 | Uninitialized | 初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置 |
| 1 | Open open() | 方法已调用，但是 send() 方法未调用。请求还没有被发送 |
| 2 | Sent Send() | 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应 |
| 3 | Receiving | 所有响应头部都已经接收到。响应体开始接收但未完成 |
| 4 | Loaded HTTP | 响应已经完全接收 |
readyState 的值不会递减，除非当一个请求在处理过程中的时候调用了 abort() 或 open() 方法。每次这个属性的值增加的时候，都会触发 onreadystatechange 事件句柄。
responseText
--目前为止为服务器接收到的响应体（不包括头部），或者如果还没有接收到数据的话，就是空字符串。
--如果响应包含了为响应体指定字符编码的头部，就使用该编码。否则，假定使用 Unicode UTF-8。
status
--由服务器返回的 HTTP 状态代码，如 200 表示成功，而 404 表示 "Not Found" 错误。当 readyState 小于 3 的时候读取这一属性会导致一个异常。
statusText （Not Found、OK）
--这个属性用名称而不是数字指定了请求的 HTTP 的状态代码。也就是说，当状态为 200 的时候它是 "OK"，
--当状态为 404 的时候它是 "Not Found"。和 status 属性一样，当 readyState 小于 3 的时候读取这一属性会导致一个异常。
之前我在网上看到一些特别有趣的解释相应状态码的图片，分享给大家：
