[1] AJAX简介
> 全称： Asynchronous JavaScript And XML
> 异步的JavaScript和XML
> AJAX就是通过JavaScript向服务器发送请求，并接收响应，然后我们在通过DOM来修改页面。
> XML指的是服务器响应的数据的格式。
> 目前AJAX已经很少使用XML作为响应的格式。因为XML的解析性能及传输性能较差。
[2] 同步和异步
> 同步：
当我们通过浏览器向服务器发送一个请求时，浏览器会刷新整个页面。
> 异步：
当我们向服务器发送请求时，不是刷新整个网页，而是只刷新网页的一部分。
[3] XMLHttpRequest对象
> 我们AJAX的所有操作都是围绕着XMLHttpRequest对象进行。
> 在XMLHttpRequest对象中封装发送给服务器请求报文，同时在服务器发回响应时，响应信息也会在对象中封装。
> 如何获取XMLHttpRequest对象
- var xhr = new XMLHttpRequest();
[4] 使用步骤
1.创建XMLHttpRequest对象
大部分比较新的浏览器都支持的方式（IE7以上）
var xhr = new XMLHttpRequest();
IE6以下的
var xhr = new ActiveXObject(“Msxml2.XMLHTTP”);
IE5.5以下的
var xhr = new ActiveXObject(“Microsoft.XMLHTTP”);
通用的获取XMLHttpRequest对象的方法：
//写一个获取XHR的方法
function getXMLHttpRequest(){
try{
//大部分浏览器都支持的方式
return new XMLHttpRequest();
}catch(e){
try{
//IE6以下浏览器支持的方式
return new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
//IE5以下的浏览器
return new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
alert("你的浏览器不支持AJAX！");
}
}
}
}2.设置请求信息（请求地址，请求方式，请求参数）
xhr.open(请求方式,请求地址);
在发送post请求时，还需要设置一个请求头，如下：
xhr.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);
3.发送请求
xhr.send(请求体);
get请求没有请求体，所以send中可以传null或什么都不传。
post请求需要通过send来设置请求参数
4.接收响应信息
//xhr绑定一个onreadystatechange响应函数，这个函数会在readyState属性发生改变时调用
xhr.onreadystatechange = function(){
//判断当前readyState是否为4 ， 且响应状态码为200
if(xhr.readyState==4 && xhr.status==200){
//读取响应信息，做相关操作。
//如果信息为纯文本
xhr.responseText
//如果信息为XML
xhr.responseXML
}
};[5] 响应数据的格式
- 响应一个XML
- 当我们想通过servlet给ajax返回一个比较大量的信息，返回一个对象。
- 返回 User ：username：sunwukong age：18 gender：男
username:sunwukgon,age:18,gender:男
- 我们可以通过一个XML格式来返回一个大量的信息
<user>
<name></name>
<age></age>
<gender></gender>
</user>- 响应一个JSON对象
2.JSON
[1] JSON简介
> JSON全称 JavaScript Object Notation
> 类似于JS中对象的创建的方法
> JSON和XML一样，都是一种表示数据的格式
> 但是JSON比XML的存储和解析性能要高的多，JSON要比XML高个30%左右。
```
<user>
<name>sunwukong</name>
<age>18</age>
<gender>男</gender>
</user>{"name":"孙悟空","age":8,"gender":男}[2] JSON的格式
> JSON字符串不方便阅读，但是传输性能好
> XML方便阅读，但是传输性能差
> JSON的格式和JS对象类型，但是要求属性名必须使用双引号。不能使用单引号，也不能不写引号！
> JSON对象中实际就是一组一组的键值对的结构，
键和值使用:连接，多个键值对之间使用,分开，注意如果是最后一组键值对，则千万不要在加,.
> {
“属性名1”:属性值1,
“属性名2”:属性值2,
“属性名3”:属性值3,
“属性名4”:属性值4
}
> JSON运行属性值的类型：
1.字符串 2.数字 3.布尔 4.对象 5.数组 6.null
> 数组：
[属性1,属性2,属性3,属性4]
[3] JS中使用JSON
JSON对象 –> JSON字符串
JSON.stringify(对象)
JSON字符串 –> JSON对象
JSON.parse(JSON字符串)
[4] Java中使用JSON
> 目前Java中用的比较多的JSON解析工具：
json-lib –> 使用麻烦，解析性能最差
Jackson –> 使用较麻烦，解析性能最好
Gson –> 使用简单，解析性能中能
- Gson是谷歌出的一款JSON解析工具，使用简单，且性能较好。
Java对象 –> JSON字符串
JSON字符串 –> Java对象
3.通过jQuery实现AJAX
> 使用get和getJSON都会有缓存问题，并且使用get方法不能传送较多的数据。
> post方法不会有缓存的问题，所以我们开发时使用post方法较多。
[1] post()方法
$.post(url, [data], [callback], [type])
参数：
url：发送AJAX的请求地址，字符串。
data：发送给服务器的请求参数，JSON格式。
callback：当前需要获取服务器发送的响应时，我们可以通过该回调函数。
jQuery会将响应信息以回调函数的参数的形式返回
type：响应信息的类型，字符串。一般两个常用值text、json
[2] get()方法
- get方法和post方法使用方式基本一致。
[3] getJSON()方法
getJSON(url, [data], [callback])
getJSON方法和get方法类似，只不过该方法默认的响应类型为JSON，不需要再手动指定。
Ajax作用： 是用JavaScript向服务器发送异步请求，然后服务器给出响应，然后以XML格式的文件返回给浏览器端！
异步： 当浏览器向服务器发送请求的时候，不是整个页面刷新，而是局部刷新[局部信息发送请求]！
同步： 当浏览器向服务器发送请求的时候，整个页面都会刷新！
XML:一种文件格式，现在用XML这种返回格式的数据比较少了，XML解析性能较差，而且比较消耗带宽，现在大多数都是在是使用JSON数据的返回格式！!
案例: POST请求
<script type="text/javascript">
window.onload = function(){
var btn = document.getElementById("btn01");
btn.onclick=function(){
//1.创建XMLHttpRequest对象，我们使用这个对象完成Ajax请求！
var xhr = new XMLHttpRequest();
//2.通过open方法设置请求参数
var method= "post";
var url = "${pageContext.request.contextPath}/AServlet";
xhr.open(method, url);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//3.发送请求！
xhr.send("username=zhangsan&password=lisi");
//4.接收响应信息
xhr.onreadystatechange= function(){
if(xhr.readyState == 4 && xhr.status == 200 ){
var data = xhr.responseText;
alert(data);
}
}
}
}
</script>案例: Get请求
<script type="text/javascript">
window.onload = function(){
var btn = document.getElementById("btn01");
btn.onclick=function(){
//1.创建XMLHttpRequest对象，我们使用这个对象完成Ajax请求！
var xhr = new XMLHttpRequest();
//2.通过open方法设置请求参数
var method= "get";
var url = "${pageContext.request.contextPath}/AServlet";
xhr.open(method, url);
//3.发送请求！
xhr.send();
//4.接收响应信息
xhr.onreadystatechange= function(){
if(xhr.readyState == 4 && xhr.status == 200 ){
var data = xhr.responseText;
alert(data);
}
}
}
}
</script>JSON
JSON是JavaScript 对象表示法（JavaScript Object Notation）。
作用：JSON 是存储和交换文本信息的语法
优势：JSON 比 XML 更小、更快，更易解析。
json对象是用{}括起来的键值对结构：
1.键和值之间用:分隔
2.键值对之间用,分隔
3.键必须是字符串类型，也就是说必须用”“[双引号]引起来！不能使用单引号，也不能不用引号！
4.JSON值的数据类型：
数字（整数或浮点数） 、字符串（在双引号中）、 逻辑值（true 或 false）、 数组（在方括号中）、对象（在花括号中）、null
注意点：JSON对象是用{}括起来的，而数组是用 [ ] 括起来的！
JSON对象和JSON字符串之间的相互转换：
JSON对象转换为JSON字符串：
var jsonStr = JSON.stringify(json);
JSON字符串转换为JSON对象：
var jsonObj = JSON.parse(jsonStr);
JQuery中用ajax发送get请求
<script type="text/javascript">
$(function(){
$("#btn01").click(function(){
$.get("${pageContext.request.contextPath}/AServlet?t="+Math.random(),{"name":"zhangsan","age":12},function(data){
$("#div01").html(data);
});
});
});
</script>JQuery中用ajax发送post请求
$(function(){
$("#btn01").click(function(){
var url = "${pageContext.request.contextPath}/AServlet";
var obj = {"username":"张三","password":123456};
function callback(data){
alert(data);
};
var type = "text";
$.post(url,obj,callback,type);
});
});