ajax 基础学习

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' , 'url' , 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>