ajax详解
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术（异步加载）。
XMLHttpRequest 对象：
open():简历到服务器的新请求。
send():向服务器发送请求。
abort():退出当前请求。
readyState:提供当前HTML的就绪状态。
status:响应的HTTP状态。
responseText：服务器返回的请求响应文本。
reponseXML:服务器反应的请求响应的XML。
其实ajax的核心业务逻辑特别简单，首先new一个XMLHttpRequest(如果是兼容ie就用ActiveXObject)，然后调用open()和send()方法,open表示建立链接，send表示发送.之后判断你发送的请求到什么状态也就是调用onreadystatechange,然后判断xmlHttp.readyState == 4 && xmlHttp.status == 200(4表示完成，200表示成功)则调用responseText取得返回结果即可。
readyState可能返回的值：
0：请求未初始化（还没有调用 open()）。
1：请求已经建立，但是还没有发送（还没有调用 send()）。
2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
4：响应已完成；您可以获取并使用服务器的响应了。
1 if (window.ActiveXObject) { 2 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 3 } else if (window.XMLHttpRequest) { 4 xmlHttp=new XMLHttpRequest(); 5 } 6 xmlHttp.open("get",'t_user/get_all_info',true); 7 xmlHttp.send(); 8 xmlHttp.onreadystatechange = function(data) { 9 if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200)) 10 { 11 console.log(xmlHttp.responseText); 12 } 13 }
上面代码就是基本的ajax原理，不过不同的请求方式我们的代码也有微微带动。
get：
1 xmlHttp.open("get",'t_user/get_all_info?name=admin'，true); 2 xmlHttp.send();
post:
1 xmlHttp.open("post",'t_user/get_all_info',true); 2 xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 3 xmlHttp.send('name=admin');
你一定观察到了，没错post方式比get方式多的setRequestHeader方法，这个方法可以理解成一个配置文件，如果没有这行代码，后台post方式是取不到name的。
ajax一般用来链接后台接口实现前端页面和后台的数据交互，非常的好用。但是AJAX大量的使用了javascript和ajax引擎,这些取决于浏览器的支持.在编写的时候考虑对浏览器的兼容性.并且AJAX只是局部刷新,所以页面的后退按钮是没有用的.
学会了ajax的基本原理我们也可以自己封装一个ajax的函数来实现交互：
function ajax(query){ var xmlHttp; var strData=''; var init = { type : "get", dataType:"text", }; (function(i,q){ for(var p in q){ i[p] = q[p]; } console.log(init); })(init,query); for(var p in init.data){ strData += p + '=' + init.data[p] + '&'; } console.log(strData); if (window.XMLHttpRequest) { xmlHttp=new XMLHttpRequest(); } else if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } if(init.type.toUpperCase()=='GET'){ var url = init.url+'?'+strData; xmlHttp.open(init.type, url, true); xmlHttp.send(); }else if(init.type.toUpperCase()=='POST'){ xmlHttp.open("post",init.url,true); xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlHttp.send(strData); } xmlHttp.onreadystatechange = function() { if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200)) { var returnData; if(init.dataType == 'text'){ returnData = xmlHttp.responseText; }else if(init.dataType == 'json'){ returnData = JSON.parse(xmlHttp.responseText); }else if(init.dataType == 'xml'){ returnData = xmlHttp.responseXML; } init.success && init.success(returnData); } } }
上述代码中运用到了函数立即调用和对象合并的概念，代码如下：
(function(i,q){ for(var p in q){ i[p] = q[p]; } console.log(init); })(init,query);
其目的是为了实现传入函数的初始化。剩下的无非是一些判断来根据不同的情况来使用不同的语法。
例如：
var returnData; if(init.dataType == 'text'){ returnData = xmlHttp.responseText; }else if(init.dataType == 'json'){ returnData = JSON.parse(xmlHttp.responseText); }else if(init.dataType == 'xml'){ returnData = xmlHttp.responseXML; } init.success && init.success(returnData);
这段代码就是为了根据传入不同的dataType来决定不同的返回类型。是不是看起来特别简单呢？我猜测jquery的底层代码核心业务逻辑也就不过如此了（虽然没去读过jquery底层代码- -），只不过jquery的代码比我这个代码要健壮的多得多的多。
AJAX(Jquery)：
jquery中封装的ajax有三种方法：
$.get();
$.post();
$.post("test.php", { name: "zhang"},
function(data){
alert("Data Loaded: " + data);
},'text');
$.ajax();
$.ajax({ url: 't_user/regist_account', type: 'post', data: { name:admin }, dataType: 'text' }).done(function (date) { console.log(date); if(date =='success'){ alert('succcess'); }else if(date == 'fail'){ alert('fail'); } });
上面的代码来看jquery封装的ajax还是非常方便的，我们只需要给定需要请求的路径，方式，数据，返回类型等就会得到后台预期的数据，function里面的date(形参)就是后台返回的数据，数据类型决定于你传的dataType参数。
前端技术有不少前端框架，当然也封装了不少ajax的方法，下面我们来看angularJS中ajax的用法：
myModule.controller('aa',['$scope','$http',function(s,h){
s.stu = {
user:"",
pwd:""
};
s.login = function(){
console.log(s.stu.user);
if(s.stu.user==""||s.stu.pwd==""){
alert("账号或密码不能为空！！！");
}else{
h({
method:'post',
url:'t_user/login_on',
data:{
"name":s.stu.user,
"pwd" :s.stu.pwd
},
//配置文件----请勿改动start
// headers:{'Content-Type': 'application/x-www-form-urlencoded'},
// transformRequest: function(obj) {
// var str = [];
// for(var p in obj){
// str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
// }
// return str.join("&");
// }
//配置文件----请勿改动start
}).success(function(data){
console.log(data.is_teacher);
if(data!='fail'){
alert('登录成功！！！');
if(data.is_teacher==2){
window.location.href = 't_user/href_tea';
}else if(data.is_teacher==1){
window.location.href = 't_user/href_tea';
}else if(data.is_teacher==0){
window.location.href = 't_user/href_stu';
}
}else{
alert('账号或密码错误，请从新输入！！！');
}
}).error(function(data){
console.log(data);
// alert('请正确输入！！！');
});
}
};
}]);
我们在一个为aa的controller写一个ajax请求。angular的服务器交互需要一个$http服务。angularJS中的$http服务将send方法进行了简单的封装，打包成一个服务模块的形式提供开发者。调用后返回一个对象有两个回调方法success，error。success内接收成功后操作，error中接收错误时的操作。使用方法和Jquery封装的方法基本相似。
