一、ajax概述
1、ajax是asynchronous（[ə'sɪŋkrənəs） javascript xml的简写，不是一门新技术，而是对现有技术的综合利用。这一技术能够向服务器请求额外数据而无需刷新页面，带来了更好的用户体验
2、ajax技术的核心是xmlhttprequest对象（简称xhr），这是由微软首先引入的一个特性。在xhr出现之前，ajax式的通信必须借助一些hack手段来实现，大多数是使用隐藏的框架或内嵌框架。
3、xhr为向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步的方式从服务器取得更多的信息，意味着用户单击后，可以不必刷新页面也能获取新数据。也就是说可以使用xhr对象取得新数据，然后再通过dom将新数据插入到页面中
4、虽然ajax名字中有xml的成分，但是呢，ajax通信与数据格式无关，这种技术就是无须刷新页面即可从服务器取得数据，但不一定是xml数据
二、操作：原生ajax和jquery中封装的ajax
1、原生ajax：
ajax作用：发送请求（设置请求setrequest） 接收响应(getresponse)
a、ajax原生方式发送请求：
ajax中最重要也是最固定的部分就是http请求。
1)建立连接：（ie7及以上版本都支持xmlhttprequest）
var xhr = new xmlhttprequest(); //创建异步请求对象
2)get请求：格式必须是（url?name1=value1&name2=value2）
xhr.open("get","01-register.php?name="+name);//初始化异步get请求
xhr.send(null); //与服务器建立连接
3)post请求
xhr.open('post','01-xmlhttprequest-test.php');//请求报文行
xhr.setrequestheader('content-type','application/x-www-form-urlencoded'); /*post请求设置请求头*/
xhr.send('name=rose&age=20'); //请求报文体
4)get和post请求的区别：
★get不需要设置请求头，而post需要设置请求头
★get的数据传递通过url进行，而post的数据在send方法中传递
b、ajax原生方式接收响应：
/*监听服务器的响应*/
xhr.onreadystatechange=function(){
/*判断当前的响应是否成功 1.服务器做出了响应 2.响应的结果是正确的*/
if(xhr.status==200 && xhr.readystate==4){
var result=xhr.responsetext;
console.log(result); //输出从服务器中获取到的数据
//接下来就可以对数据进行相应的处理了
}
};
c、处理响应数据：
/*监听*/
xhr.onreadystatechange=function(){
if(xhr.status==200 && xhr.readystate==4){ /*判断状态*/
var result;
/*获取响应报文中的content-type*/
var ct=xhr.getresponseheader("content-type");
/*判断content-type,进行数据的解析*/
if(ct.indexof("xml") != -1){
result=xhr.responsexml;
}
else if(ct.indexof("json") !=-1){
result=json.parse(xhr.responsetext);
}
else{
result=xhr.responsetext;
}
/*调用回调函数--委托--代理*/
success && success(result);
}
};
jquery中封装的ajax
$.ajax({
type: 请求方式(get/post),
url: "register.php",
data: 发送请求数据,
beforesend:function(){返回false可以取消本次ajax请求},
success:function(result){ 成功响应后调用 },
error:function(err){ 错误响应时调用 },
complete:function(){ 响应完成时调用(包括成功和失败) }
});
jquery中提供了专门的方法来序列化表单：
$('form').serialize(): //序列化表单(即格式化key=val & key=val);
三、响应
我们需要监听服务器的响应状态，然后对从服务器中获取的数据做相应的处理。
1) onreadystatechange是javascript事件中的一种，用于监听xmlhttprequest的状态
2) readystate：响应状态，返回xmlhttp请求的当前状态
3) status：服务器的响应码
常见响应码：200—服务器成功返回网页
404—请求网页不存在
503—服务不可用
关于服务器响应码，详情请看————网络传输协议（http协议）