AJAX的学习心得

AJAX即“Asynchronous Javascript And XML*”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。简而言之，它可以实现在不重新加载整个网页的情况下，对网页的某部分进行更新。

学习了AJAX一周，现在简单地回顾一下学习过程与心得。

AJAX基本步骤

// 1. 创建对象
var xhr = new XMLHttpRequest();

// 2. 准备
        //    参数1： 获取数据的方式： GET（发送请求的参数是在地址栏里面的，内容有限）、POST（发送请求的参数写在协议头里面，地址栏不可见，内容也看不见）。
        //    参数2： 向服务器请求数据的地址 格式： 例如：http://ip:8080/ajax/ajaxtest
        //    参数3： false 代表同步的方式请求数据，true 代表异步。
形式：  xhr.open("GET", "http://127.0.0.1:8080/ajax/ajaxtest", false);

// 3. 发送请求
xhr.send();//发送数据，如果请求方式是POST，send里面要加请求的参数。

// 4. 获取数据
//readystate有0~4可能性，等于4的时候说明请求数据已经收到，过程无误。
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        if (xhr.status == 200) {
            // 200 说明返回的数据是正常的
            var str = xhr.responseText;//将服务器回复的数据字符串存在str里面，然后通过处理进行下面的操作。
        }
    }
}

AJAX的封装

因为ajax获取数据的步骤基本一致，可以将其封装成函数，以便以后每次获取数据不用再写繁琐的准备步骤。
ajax的封装总的可以分为GET和POST两种方式，然后在两种方式里面分别传入对象参数，这个对象里面包含的属性要有url，是否异步，url后面需要传入的数据参数（下面称为data），以及数据请求成功或失败后执行的回调函数。

(function(){
    ajax=window.ajax={};//先让ajax变成全局对象，然后再给它加上get和post两个属性。
    function translate(obj){
        var str="";
        for(i in obj){
            str+=i+"="+encodeURIComponent(obj[i])+"&";
        }
        str=str.substr(0,str.length-1);
        return str;
    }//定义一个功能，后面用这个功能能够遍历data里面所有参数。

    ajax.get=function(obj){

        if(obj.async==undefined){
            obj.async=true;
        }//默认请求方式是异步。

        if(obj.data==undefined){
            obj.data="";
        }//如果data没有写，那么就表示不用提供请求数据的参数，请求的也就是整个url地址里面的内容。
        var xhr=new XMLHttpRequest();
        var url=obj.url;
        obj.data=translate(obj.data);//将需要传输的参数进行解析
        url+="?"+obj.data;//传输你要获取数据的类型（参数）时，要在url地址后面加上“？”。
        xhr.open("GET",url,obj.async);
        xhr.send();

        //如果异步，当xhr.readystate==4,xhr.status==200时，说明请求过程无误，也接收到了数据，然后将所得到的数据存在str里面，再执行回调函数对str里面的数据进行操作。
        if(obj.async==true){
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4){
                    if(xhr.status==200){
                        var str=xhr.responseText;
                        obj.sucess&&obj.sucess(str);

                    }else{
                        obj.fail&&obj.fail();
                    }
                }

            }
        }else{  //同步方式是一样的道理，不过少了xhr.readystate==4的要求。
            if(xhr.status==200){
                var str=xhr.responseText;
                obj.sucess&&obj.sucess(str);

            }else{
                obj.fail&&obj.fail();
            }
        }
    }

    ajax.post=function(obj){
        if(obj.async==undefined){
            obj.async=true;
        }
        if(obj.data==undefined){
            obj.data="";
        }
        var xhr=new XMLHttpRequest();
        var url=obj.url;
        xhr.open("POST",url,obj.async);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//POST传输方式跟GET不同的是，要加上上面这段话，设置协议头。
        obj.data=translate(obj.data);        
        xhr.send(obj.data);//然后再send里面加上需要传输的参数。
        if(obj.async==true){
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4){
                    if(xhr.status==200){
                        var str=xhr.responseText;
                        obj.sucess&&obj.sucess(str);

                    }else{
                        obj.fail&&obj.fail();
                    }
                }

            }
        }else{
            if(xhr.status==200){
                var str=xhr.responseText;
                obj.sucess&&obj.sucess(str);

            }else{
                obj.fail&&obj.fail();
            }
        }
    }

})()

AJAX的局限性

ajax请求数据是无法跨域的，只有通过script标签引入js文件来实现跨域功能。

<script src="http://www.css88.com/doc/underscore1.8.2/underscore-min.js "></script>

上面就是跨域获取外部js文件的一种形式。以后通过这种方式，你可以调用别人准备好的js库里面的函数，无需下载，确实很方便。
上面就是这周所学ajax的一点学习心得，里面具体的功能还是需要自己动手才能体会到的。