前端开发Ajax基础

初次接触Ajax是，主要是了解了一点Ajax的概念。Ajax的英文全称是（Asynchronous JavaScript and Xml）即异步的javascript和xml，它是一种无需重新加载整个网页的情况下，能够更新部分网页的技术（创建快速动态网页）。

Ajax的基本运用步骤：
1.首先，创建ajax
2.然后通过ajax连接服务器
3.用创建的ajax对象发送请求
4.接受服务器的返回
其实这也不难理解，我们可以想想我们平时是如何打电话的
1.首先需要一个手机———————–创建ajax
2.通过手机来连接你通信的对象——–通过ajax连接服务器
3.接通电话后，你再来通话————–用创建的ajax对象发送请求
4.接受另一个通信对象的返回信息—–接受服务器的返回

我们来简单操作一下，然后一步一步完善：
1.创建ajax对象：
Var oAjax = new XMLHttpRequest();
Ajax的核心技术就是XMLHttpRequest对象，用于后台与服务器交换数据。
2.连接服务器：
oAjax.open(‘GET’,’a.txt’,true);
open()方法接受3个参数：要发送请求的类型、请求的URL(被连接的地址)、是否异步请求（用布尔值表示，true表示是异步方式）
3.发送请求
oAjax.send();
4.接受返回
首先我们来了解几个属性：
1）responseText：ajax请求返回的内容被存放到这个属性下面
2）readyState:：判断浏览器和服务器进行到哪一步了通过数值来判断
2.1）0—（未初始化）还没调用open()方法
2.2）1—（载入）已调用send()方法，正在发送请求
2.3）2—（载入完成）send()方法完成，已经收到全部响应内容
2.4）3—（解析）正在解析响应内容
2.5）4—（完成）响应内容解析完成，可以在客户端调用了
3）onreadyStateChange：当readyState状态值改变的时候触发的事件
4）Status：服务器状态（200表示成功），http状态码
oAjax.onreadystatechange = function(){
//判断，如果响应内容完成
If(oAjax.readyState == 4){ //读取完成，但并未成功，比如，文件出错、地址不对
If(oAjax.status == 200){ //http状态码，200表示成功
//放一个函数，表示当成功的时候干的事情
}else{ //如果读取文件失败，干的事情
If(fnald){
//放一个函数，表示当失败的时候干的事情
}
}
}
}

现在我们来完善：
对于第1步：
由于IE6不兼容XMLHttpRequest((),XMLHttpRequest()在Chrome和firefox当中是兼容的，为IE6加入Microsoft.XMLHTTP是兼容的，所以来做兼容：
var oAajx = null;
If(window.XMLHttpRuquest){
oAjax = new XMLHttpRequest();
}else{
oAjax = new ActiveXObject(‘MicrosoftXMLHTTP’);
}

对于第2步：
由于oAjax.open(‘GET’,’a.txt’,true);连接一次就地址不再改变，那么ajax就不会再次发送请求，就会造成，服务器的内容改变了，而浏览器内容还未更新，所以可以利用时间不停在变来让URL时刻不一样改成:
oAjax.open(‘GET’,’a.txt?t=’+new Date().getTime(),true);
但是，如果后端接收一个变量，它的名字也为t的话，会造成冲突，可能会覆盖。
改为：
oAjx.open(‘get’,’aa.txt?’+new Date().getTime(),true);

对于第4步：
举例，写出要完成的函数：
If(oAjax.readyState == 4){ //读取完成，但并未成功，比如，文件出错、地址不对
If(oAjax.status == 200){ //http状态码，200表示成功
//放一个函数，表示当成功的时候干的事情
fnSucc(oAjax.responseText); //获取从服务器发送回来的文本
}else{ //如果读取文件失败，干的事情
If(fnald){
//获取失败对应的状态码，一般为404，表示读取文件失败
fnFaild(oAjax.status);
}
}
}
}

最后的代码如下：

function ajax(url,fnSucc,fnFaild){
//1.创建ajax对象
var oAjax = null;
if(window.XMLHttpRequest){
oAjax = new XMLHttpRequest();
}
else{
oAjax = new ActiveXObject(“Microsoft.XMLHTTP”);
}
//2。连接服务器
oAjax.open(‘GET’,’a.txt?’+new Date().getTime(),true);

//3.发送请求   
    oAjax.send();

//4.接收返回,ajax以一个事件的形式存在，当服务器的信息返回的时候这个事件会被调用。  
 oAjax.onreadystatechange = function(){
     if(oAjax.readyState == 4) {
        if(oAjax.status == 200) {
         fnSucc(oAjax.responseText);
        }
        else{
            if(fnFaild){
            fnFaild(oAjax.status);
            }
        }
    }
}

}