AJAX笔记

原生AJAX

概述

什么是ajax?
Asynchronous javascript and xml，异步的javascript和xml
ajax不是一个技术，是多个技术联合的产物。
异步和同步有什么区别？
A线程和B线程，并发执行，谁也不等谁，这就是异步
A线程和B线程，在A线程执行的时候B线程需要等待，或者B线程执行的时候
A线程需要等待，这就是同步。
传统的请求和ajax请求有什么区别?
传统的请求都是同步的，Ajax请求可以做到异步
AJAX的经典案例
Google的auto_complete(输入框的自动补全)
Google的map(谷歌地图)
ajax解决的主要问题
页面的局部刷新问题，使用ajax可以在同一个页面当中并发的发送多个请求，
请求与请求之间互不等待，互不干扰，这样可以提高用户的体验。

总结：浏览器本身这个软件也是支持多线程并发的，其中ajax请求就是一个线程，
一个页面可以发送多个ajax请求多个ajax请求对应浏览器多个线程，当整个浏览器采用传统请求的时候，
请求只要一发送，整个浏览器窗口锁定无法点击其他按钮，并且浏览器会将窗口当中的数据全部清除，
迎接新的页面。

发送ajax步骤

1，创建ajax核心对象XMLHttpRequest(浏览器内置的，可以直接使用)
ajax发送请求全靠这个对象，使用XMLHttpRequest对象可以在浏览器中单独启动一个新的
浏览器线程，通过浏览器线程发送该请求，达到异步效果。

var xhr;
if(window.XMLHttpRequest){
	xhr= new XMLHttpRequest();
}else{
	//不支持XMLHttpRequest对象，IE5和IE6是不支持的，它只支持ActiveXObject对象
	//IE5和6版本使用的是ActiveXObject这个内置对象发送ajax请求
	xhr=new ActiveXObject("Microsoft.XMLHTTP");
}

2，注册回调函数
程序执行到这里的时候，后面的回调函数并不会执行，只是将回调函数注册给XMLHttpRequest对象
等该对象的readyState属性发生变化时，后面的回调函数才会执行。
XMLHttpRequest对象在请求和响应的过程中，该对象的readyState状态从0-4：
0：请求未初始化
1：服务器连接已建立
2：请求已接收
3：请求处理中
4：请求已完成，且响应已就绪
xhr.readyState==4
```
xhr.onreadystatechange=function(){	
	//xhr对象的readyState的值发生改变的时候，回调一次
	//xhr.status属性可以获取到HTTP的响应状态码
	if(xhr.readyState==4&&xhr.status==200){
        //responseText属性存放服务端响应的数据
        alert(xhr.responseText)	
    }
}
```
3，开启浏览器和服务器之间的通道
method：指定请求方式为get还是post
url：请求路径
async：true/false（true表示支持异步，false表示支持同步）
什么时候使用false，当一个页面有多个ajax请求时，例如注册页面
必须等待所有表单项验证完毕之后，才允许用户点击注册，此时必须使用同步ajax机制
```
//这里只开启通道，不发送请求
xhr.open("GET","请求路径?username="+username,true)	
```
4，发送ajax请求
```
xhr.send();	//这里才会发送请求
```

发送ajax的get请求和post请求的区别

使用ajax向服务端发送数据的时候，如果是get请求则不用设置请求头

如果是post请求模拟表单方式提交，则需要设置请求头

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded
;charset=UTF-8");

如果前端发送的是json字符串给服务器，则设置的请求头应该是：
```
xhr.setRequestHeader("Content-Type","application/json")
```
post请求提交的数据在send方法中提交，xhr.send(param);
get请求提交的数据在url中添加
http://localhost:8080/os/loginServlet?username="+username
但是GET请求在有些浏览器中会缓存，再次请求时，浏览器不会发送请求，
而是使用上次请求获取到的结果。解决办法是在url中加入时间戳
```
var timeStamp = new Date().getTime();
var url = "http://localhost:8080/os/loginServlet?
_="+timeStamp+"&username="+username;
```

数据格式转换

通过JSON传输数据，前端接收后端传过来的字符串，可以使用

//将后端传过来的字符串转换成json对象
var data=JSON.parse(xhr.responseText)

前端发送后端json字符串数据，发送前要将数据转成json字符串
```
//将param数据对象转成字符串
xhr.send(JSON,stringify(param))	
```