JavaScript最佳新手入门系列之（ajax）

js中的ajax

ajax：异步的JavaScript和XML，首先它是一门用于前后台数据交互的技术，这里有两个比较有趣的概念（同步与异步）说白了就是后台传回来的数据，同步的话，你必须刷新页面才能更新数据，而异步更新的话，可以在不刷新页面的情况下，实现页面数据的更新

ajax的好处：举个简单的例子，表单验证，在ajax技术出现之前，咱们都是把表单填写完成，然后提交给后台进行验证，后台如果发现有一个表单填写的不符合规范，就会将数据返回给前台，前台刷新页面重新填写，所以的表单都得重新填写，这样就很气知道吗？很气！！！ 后来就有了ajax，你可以填完一个然后ajax就会跑到后台去验证，验证完了，然后再跑回来告诉你，填写的行不行，要求重新填写，而且还不用刷新页面，，哈哈，是不是很厉害呢

ajax说白了就是前台和后台之间数据传递的一门技术，再往白了说，就是跑腿的，假如前台页面需要一个数据了，好，ajax你去后台跑一趟，把数据给我取回来，然后ajax就去了，后台给了它一串数据，最后跑回来了，把数据给了我们前台。这个过程其实特别简单，ajax的一个关键就是，他取数据的这个过程，咱们前台该干嘛还是干嘛，并不影响，也就是说相当于开辟了两个空间，一个空间继续做你该做的事，另一个空间去取数据，ajax去取数据，其他人毫不影响，而且取回来直接就可以用，不用刷新页面，或者说的更准确一点，实现局部刷新

ajax具体实现方式

核心就是对象，首先创建一个XMLHttpRequest对象，然后连接后台，发送请求，最后接受后台返回来的数据即可

var xhr ;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();//现代浏览器实例化ajax对象方式
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP'); //IE浏览器实例化ajax对象方式

}
//这里进行的是针对IE浏览器的兼容性处理,在IE中,我们的XMLHttpRequest对象就变成了ActiveXObject,而且里边的参数是不能少的

上面提到了用ajax就简单的几步而已，

第一步实例化ajax对象，

第二步连接后台，：怎么连接呢，ajax对象给我们提供了一个方法：open(“指定提交的方式get或者post”,”后台的url地址”,”是否使用异步，默认true使用异步”)

第三步发送请求：send（发送的数据）有时候我们需要给后台发送一些数据，比如你只想要第一条数据，这个时候你就send的时候告诉后台我只要第一条，别的不要

第四步接受后台给我们返回来的数据

get与 post的区别：都是给后台提交数据的方式，区别就是get提交的时候把数据放到请求地址的后面，这样就会很不安全，大家都可以看到、而post提交的数据会进行加密，所以比较安全，get传递的数据量比较少，post传递的数据量比较大

>

我们发送了ajax请求，但是我们并不知道是否发送成功了并且服务器是否处理了我们的请求，以及是否返回给我们前台，这儿就需要用到一个东西，可以让我们很好的检测ajax请求的过程

ajax对象身上有一个readystate属性，表示ajax整个请求的状态：

0：请求并没有发出（没有建立与后台的联系，open之前）

1 ：请求已经建立还没有发出

2 ：请求已经发送

3 ：请求正在处理
8ba0

4 ：请求已经被处理完毕

每当readystate状态改变的时候，就会调用onreadystatechange（）函数，所以我们可以在这个函数中做相应的判断，当readystate为4时，表示请求成功的被后台执行、在这儿还要提一个属性就是：status属性，表示状态码，有很多很多，在这儿就说一个，200这个状态码就表示后台成功返回了数据。

xhr.onreadystatechange = function(){
if(xhr.readystate == 4){//请求已经成功被处理
if(xhr.status == 200){//成功的从服务器得到了响应
//这里进行处理返回的数据
}
}
}

ajax在jQuery中的应用

$.ajax({
type:"post",  //请求方式
url:"a.php", //服务器的链接地址
dataType:"json", //传送和接受数据的格式
data:{
username:"james",
password:"123456"
},
success:function(data){//接受数据成功时调用的函数
console.log(data);//data为服务器返回的数据
},
error:function(request){//请求数据失败时调用的函数
alert("发生错误:"+request.status);
}
});

本文有不完善的地方，希望大家评论指正