ajax總結

　　在平時的開發項目中，難免接觸前端的知識，需要寫介面，有時候用到js中的ajax跨越請求，總結了ajax的寫法。

　　開始之前，需要準備兩個文件，ajax.php ;ajax.html

　　1.ajax的基本步驟(ajax.php)

//1.創建對象
    var ajax = new XMLHttpRequest();
    // alert(typeof ajax);

    //2.建立連接
    ajax.open('get', 'ajax.php?id=5', true);

    //3.發送請求
    ajax.send();

    //4.準備事件處理結果
    ajax.onreadystatechange = function()
    {
        if (ajax.readyState == 4 && ajax.status == 200) {
            //請求： request
            //響應： response
            var res = ajax.responseText;

            // alert(res);
            document.write(res);
        }
    }

　　ajax,有同步非同步的區別？非同步：把小弟派出去了，什麼時候回來，什麼時候處理它，主程式繼續執行，不會等待。同步：（比較少用）會在send這一步等待，主程式不會繼續執行。method：請求的類型；GET 或 POST 。

　　2.ajax封裝為函數(ajax.php)

<script>
     function get(url, func)
     {
         var ajax = new XMLHttpRequest();
         ajax.open('get', url, true);
         ajax.send();
         ajax.onreadystatechange = function()
         {
             if (ajax.readyState == 4 && ajax.status == 200) {
                 var res = ajax.responseText;

                 func(res);
             }
         }
     }

     //回調 + 匿名
     get('1.php', function(res){
         alert(res);
     })

     get('ajax.php', function(res){
         console.log(res);
     })

/*
     get('1.php', chuli);
     function chuli(res)
     {
         alert(res);
     }

     get('ajax.php', chuli2);
     function chuli2(res)
     {
         console.log(res);
     }
 */
</script>

　　這樣封裝好，就方便我們使用了，tp框架，ecshop，ecstore，都有自己的封裝的ajax。

　　3.jq中的ajax請求(ajax.php)

$.ajax({
         url: 'ajax.php?id=5',
         dataType: 'json',    //指定返回數據的類型：xml, html, script, json, text, _default (不要騙他)
         type: 'get',    //設置請求的類型：get(預設) post
         // data: 'name=123&age=18',    //傳輸的數據(有兩種格式)
         data: {age:8},    //傳輸的數據
         async: true,    //同步非同步：true 預設非同步     false 同步 
         success: function(res) {
             // alert(typeof res);
             // alert(res.id);
             alert(123);
         },
         error: function(a){
             alert('出錯鳥~~~');
         }
     });

　　4.ajax跨域問題(ajax.php)

　　協議、功能變數名稱、埠這三個有任何一個不同，就跨域了。ajax本身是不可以跨域的，通過產生一個script標簽來實現跨域。因為script標簽的src屬性是沒有跨域的限制的。其實設置了dataType: 'jsonp'後，$.ajax方法就和ajax XmlHttpRequest沒什麼關係了，取而代之的則是JSONP協議。JSONP是一個非官方的協議，它允許在伺服器端集成Script tags返回至客戶端，通過javascript callback的形式實現跨域訪問。

　　實現ajax的跨域請求，有幾種方法，這兒寫一種通過‘jsonp’，實現跨域的方法

<script type="text/javascript">     
       var url = 'http://localhost/other.php?act=get_article';
    $.ajax({
        type : "get",
        url :url, 
        jsonp: "callbackparam",
        jsonpCallback:"jsonpCallback1",
        success : function(data){
            var obj = eval(data);
            //處理接收到的數據
        },
        //end
        error:function(e){
            alert("error");
        }
    });                
</script>

　　知識更新很快，學習很重要。當回過頭，感覺這些很簡單的時候，說明自己在進步，在成長...