1 ajax的概念
1）2005年Jesse James Garrett发表了一篇文章，标题为：“Ajax：A new Approach to Web Applications”。
2）Ajax，是Asynchronous JavaScript + XML的简写。这种技术能够想服务器请求额外的数据而无须卸载页面(即刷新)，会带来更好的用户体验。
2 XMLHttpRequest（简称XHR）对象
1） var xhr = new XMLHttpRequset( ) ; // IE8+ 以及其他所有浏览器都支持
2） xhr.open('get'/'post','url',false/true) ; // 准备发送请求，但还没有发送,true表示异步，false同步
3） xhr.send( 'data') ; //真正发送。 使用get方式则在url那里拼接所以这里传null，否则使用post要传data数据
4） xhr.responseText ; responseXml,status,statusText // 获取从服务器端获取的数据文本，IE获取的是缓存数据，所以要进行缓存清理
5） xhr.open('get'/'post','url?data='+math.random( ),false/true) ; // 巧妙的避免了IE浏览器加载缓存数据
6）使用ajax异步发送请求和局部刷新，是ajax的真正核心：
var xhr = new HMLHttpRequest();xhr.onreadystatechange = function(){
if(xhr.status == 200){
// xhr.readystate 有5个值，0 1 2 3 4,4表示接收完成if( xhr.status == 200 && xhr.readyState == 4 ){ // 这里必须要这么判断，否则报错！原因就是3的时候也是200
// process responseText ;
}
}else{
//do nothing
}
}xhr.open('post',true);xhr.send(data);//xhr.abort() ; 阻止发送异步请求
使用异步调用的时候，需要触发readystatechange事件，然后检测readyState属性即可。这个属性有五个值：
值
状态
说明
0
未初始化
尚未调用open()方法
1
启动
已经调用open()方法，但尚未调用send()方法
2
发送
已经调用send()方法，但尚未接受响应
3
接受
已经接受到部分响应数据 这个时候 xhr.status == 200,那么数据接收还不全导致处理异常
4
完成
已经接受到全部响应数据，而且可以使用这个时候 xhr.status == 200,完全就收数据
3 GET 与 POST
1）get请求方式使用url携带参数，一般的url请求就是使用get
url?name=value&name=value2
2）post请求方式使用url+参数发送的方式，一般表单提交或者重要数据发送时
xhr.send('name=value&name1=value2');
3）头信息有两种：
响应头信息：服务器返回的信息，客户端可以获取，但是不可以设置、
xhr.getAllResponseHeader(); xhr.getResponseHeader('Content-Type');
请求头信息：客户端发送信息，客户端可以设置但不可以获取。
xhr.setRequestHeader('name',value ); 在open 与 send 之间设置
4）解决中文乱码问题：Ajax从服务器返回的数据是默认采用utf-8编码，那么需要对所有编码设置为utf-8，而且对文本编辑器也要设置utf-8 的编码方式！对于特殊字符处理比如参数中有&或？，那么需要采用encodeUrlComponent函数处理。
5）自己编写 封装 ajax 的方法！
<script type="text/javascript" charset="utf-8">
function
ajax(obj){
var xhr = new XMLHttpRequest();var method = '' ;if(obj.method == 'get'){
// get 请求方式
method = 'get';
obj.url = obj.url+'?'+obj.data;
}else{
// 默认 post 请求方式
method = 'post';
}if(obj.asyn){
// 异步发送请求处理
xhr.onreadystatechange = function(){
if(xhr.status == 200 && xhr.readyState == 4){obj.success(xhr.responseText);}
}
}xhr.open(method,obj.url,obj.asyn);if(method == 'post'){
xhr.send(obj.data);
}else{
xhr.send(null);
}if(!obj.asyn){
// 同步发送请求处理
if(xhr.status == 200){
obj.success(xhr.responseText);
}
}
}
window.onload = function(){
var form = document.forms[0];
form.addEventListener('submit',function(event){
event.preventDefault();ajax( {
method:'get',url:'http://localhost:8080/test/data.txt',asyn:false,data:'name=hello',success:function(result){
var jsonObj = JSON.parse(result);
alert(jsonObj[1].name+':'+jsonObj[1].age);
}});
},false);
}
</script>