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封装的方法基本相似。
最后:谢谢大家看到这里，如果我上述有错误请一定留言指正，希望大家技术一起进步!
转载于:https://www.cnblogs.com/jcscript/p/5628447.html
相关资源：AJax详解.chm
