一、Ajax介绍
在学习了前面知识内容后，我们已经可以说非常灵活的处理浏览器发起的请求了。还有一门非常重要的技术，也就是 Ajax 需要我们来掌握。
Asynchronous Javascript And XML
我们首先要明确一个概念——当前请求页
当前请求页并不一定指浏览器的标签页，可能是标签页的单独区域。如果单个区域发起了请求，那么这个请求也可以成为“当前请求页”
当前请求页并不一定指浏览器的标签页，可能是标签页的单独区域。如果单个区域发起了请求，那么这个请求也可以成为“当前请求页”
（1）问题：
目前浏览器向服务器发起请求的方式有 form 标签、超链接、还有脚本语言(js\jquery)中的window.location.href 方式和表单提交函数这几种。但是不管哪种提交方式，浏览器都会将接收到的响应内容覆盖在请求网页中显示，但是怎么在保留请求网页内容的基础显示新的内容呢？
（2）解决：
使用 Ajax 技术；
Ajax对象引擎发送、接收信息就不会覆盖；
（3）使用:
二、Ajax使用
前台:
//1.创建ajax核心对象—— XMLHttpRequest 对象 var xhr = new XMLHttpRequest();
//2.给定请求方式以及请求地址 xhr.open("get","http://www.example.com");
//3.发送请求 xhr.send();
//4.获取服务器端给客户端的响应数据
//由于每当状态码readyState 改变时，就会触发 onreadystatechange 事件，因此需要让xhr的onreadystatechange属性引用一个函数地址，
//函数里我们规定当服务器已响应时所执行的任务。 xhr.onreadystatechange = function(){ //状态码为0说明open()没有被调用 //状态码为1说明open()正在被调用 //状态为2:send()正在被调用 //状态码3:服务端正在返回结果 //状态码4:请求结束，并且服务端已经结束发送数据到客户端 ，可以通过xhr.responseText来获取数据 if(xhr.readyState == 4 && xhr.status == 200){ document.getElementById("span").innerHTML=xhr.responseText;
alert(xhr.responseText); } }
后台:
目前返回了一个字符串，以后可能会返回一个json串
1. Ajax 状态码——readystate的值：
- 0：表示ajax引擎对象创建；
- 1：表示请求创建，但是还未发送；相当于执行到了ajax.open("get","my")这句代码，但还未执行到ajax.send()这句代码
- 2：表示请求已经发送了；相当于执行到了ajax.send（）这句代码；
- 3：表示服务器已经将请求处理完毕，ajax对象正在接受响应内容；
- 4：表示响应内容接收完毕；
通过Ajax状态码，我们可以知道浏览器进行到哪一步了；
2. Ajax 的响应状态码：
- 200：表示一切正常
- 404：表示资源未找到
- 500：表示内部服务器出错了；（可能是servlet代码编写错误）
3. Ajax 的异步和同步
Ajax 的请求：
- Get 请求方式
- Post 请求方式
Ajax 的响应：
- 普通文本
- JSON 数据格式
Ajax 的封装
- Ajax 完成三级联动
- jquery 中的 ajax
- ajax 完成搜索框关键字提示语
三、原理
ajax的基本原理
- 通过html的某个事件，调用js的某个函数，在js的函数里写ajax如何写？
- new以后ajax的核心对象xmlhttprequest
- send方法
- 把接受服务器返回数据的函数赋给xhr的某个属性，通过调用这个属性回调这个函数，然后做逻辑判断
- 在函数里把服务器返回的属性写入html
和以前前后端交互方式的区别：
一个是控制单元使用请求转发或重定向
一个是控制单元使用流并发送给ajax
以前我们是通过控制单元的逻辑判断进行请求转发或者重定向，由于请求转发和重定向是发送给浏览器渲染的，所以会实现整个页面的刷新。
现在我们的控制单元逻辑判断后，把结果当做一个流推出给ajax，ajax实现整个页面的局部页面的刷新。