Ajax技术基础

对于AJAX技术，感觉以前虽然用过但是对于AJAX没有一个清晰的认识，今天专门总结一下，希望掌握的更加牢固吧！

一，什么是AJAX？

AJAX通常被叫做异步刷新技术，其实他也是可以同步的。主要都用于异步访问服务器。

在通常情况下，我们的页面都是静态的，如果想要与服务器交互，我们可以通过一系列的手段来向服务器发送请求，并将返回的信息展示在页面上，但是通常需要刷新页面，如果不停的请求就需要不停的刷新整个页面，这对于客户而言带来很大的麻烦，尤其是网速很慢的情况，本来只需要更改页面一小点地方的信息，却要刷新整个页面，如果页面有上万的图片，这一次刷新的代价就太大了。所以引进了AJAX技术，可以保证页面只刷新你想要的内容。

其实实现异步刷新的方式不止AJAX技术，还有iframe嵌入式框架,在一个网页嵌套另一个网页的内容，只用刷新iframe的内容(几乎被ajax取代)。

二，AJAX实现原理

AJAX实现过程其实分为四个步骤：

①创建AJAX对象

②连接服务器

③发送请求

④接受请求消息并处理

我们来一步一步的解释响应的实现代码。

1)如何创建AJAX对象？

　　这里其实有一个兼容性的麻烦，在非IE6的浏览器中AJAX的对象就是XMLHttpRquest对象，而在IE6中是没有定义这个对象的，需要通过内置的ActiveXObject插件产生AJAX对象。

创建AJAX对象代码：

var oAjax=new XMLHttpRequest();//非IE6浏览器

var oAjax=new ActiveXObject("Microsoft.XMLHTTP");//IE6浏览器

所以为了达到兼容性创建的代码一般这样写：

if(window.XMLHttpRequest){//值得注意的是这里要写window.XMLHttpRequest
var oAjax=new XMLHttpRequest();//非IE6浏览器
}
else {
var oAjax=new ActiveXObject("Microsoft.XMLHTTP");//IE6浏览器
}

解释一下为什么要写成window.XMLHttpRequest,而不能写成XMLHttpRequest。

在js中

用没有定义的变量---报错
用没用定义的属性---undefined

使用window.XMLHttpRequest就相当于XMLHttpRequest成了属性，就不会报错。

 

2）创建好了对象，接下来需要连接服务器，如何连接服务器呢？

其实很简单，只用调用AJAX对象的open方法。

oAjax.open('GET|POST','URL',true|false);//连接服务器

参数很简单就三个，前两个一看就知道了，说下第三个

第三个标志：是同步传输还是异步传输，一般肯定选择true，也就是异步传输了。

另外说下在JS中同步和异步的区别（与生活中同步异步刚好相反）：

同步：就是事情需要一步一步的做(当第一个请求发送给服务器，需要等待服务器返回消息，在发送第二个)

异步：事情可以一起做(不用在意前面的请求是否返回消息，直接可以发送请求)

3）连接了服务器，接下来当然是发送请求了，如何发送呢？

发送请求也很简单，直接调用AJAX对象的send方法。

oAjax.send();

4)发送了请求，接下来是接受服务器的返回信息，解析并处理，如何接受呢？

接受服务器返回的消息，其实需要分几个过程。

发送请求到服务器，服务器是否成功的交互了呢？其实每次ajax与服务器进行交互，会触发一个onreadystatechange的事件(注意是事件)，既然是事件就需要编写对应的处理函数。

oAjax.onreadystatechange=funcion (){

if(oAjax.redystate==4){//信息读取完成，但是不一定成功读取
     if(oAjax.status==200){//HTTP状态码，成功的返回
     //处理返回消息
  　　alert(oAjax.responseText);//弹出返回信息
     }
 }
}

 

三，使用AJAX

一般AJAX的函数存在三个参数。

在js文件中写入

 

function ajax(url, fnSucc, fnFaild)
{
    //1.创建Ajax对象
    if(window.XMLHttpRequest)
    {
        var oAjax=new XMLHttpRequest();
    }
    else
    {
        var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    //2.连接服务器
    //open(方法, 文件名, 异步传输)
    oAjax.open('GET', url, true);
    
    //3.发送请求
    oAjax.send();
    
    //4.接收返回
    oAjax.onreadystatechange=function ()
    {
        //oAjax.readyState    //浏览器和服务器，进行到哪一步的状态码
        if(oAjax.readyState==4)    //读取完成
        {
            if(oAjax.status==200)    //成功
            {
                fnSucc(oAjax.responseText);
            }
            else
            {
                if(fnFaild)
                {
                    fnFaild(oAjax.status);
                }
                //alert('失败:'+oAjax.status);
            }
        }
    };
}

在调用ajax的文件中写入调用的方法

ajax(url,fnsucc,fnfailed);//调用ajax函数

//url是请求的url
//fnsucc是得到服务器返回信息的处理函数，需要自己编写。
//fnfailed是未成功的到服务器返回信息的处理函数，需要自己编写，可以不写。
function fnsucc(参数){
//处理代码
}

function fnfailed(参数){
//处理代码
}

 

 大概就这些，以后学到新的知识，会逐渐补充...