web項目ajax技術一些總結

      WEB項目中，最主要的就是前后端間的聯絡。有時需要不進行頁面跳轉的前提下請求后端方法(action)，就需要用到ajax。

 

      在這個博客中，我用到的都是原生的js的ajax，不是很喜歡用jquery的ajax，如果以后用到了，再補充。首先，案例就是本博客的博文刪除功能。在個人空間，點擊文章題目旁邊的刪除按鈕，就會自動進行ajax請求，后端方法。

     <button type="button" id=${article.id} onclick="button_Click_1(this)">刪除</button>

     js代碼：

        var oAjax = null;
        // 頁面加載同時，即創建ajax對象
        if(window.XMLHttpRequest){
            oAjax = new XMLHttpRequest();
        } else {
            oAjax = new ActiveXObject('Microsoft.XMLHTTP');
        }
        
        // 點擊刪除按鈕對應的javascript方法，該方法里進行ajax請求
        function button_Click_1(btn) {
            var delete_id = btn.id;
            url = "<%=basePath %>article/delete.form?id=" + delete_id; 
            oAjax.open('POST', url, true);
            oAjax.send();
            oAjax.onreadystatechange = function() {  
                if(oAjax.readyState == 4) {  
                    if(oAjax.status == 200) {    
                        alert("delete successfully.");
                        location.reload(); 
                     } else {
                         alert("delete failed");
                     }
                }
            };

        }

 

    

     值得注意一點是，刪除文章id的傳遞。首先將article.id賦給button的id，之后js代碼中var delete_id = btn.id一句即可獲得要刪除文章的id。這個id作為參數拼接進url，ajax請求發送即可。

 

     上面的例子其實是很簡單的，ajax方面比較麻煩，但卻非常實用的方面，其實是參數和返回值。如果要傳輸的是一個對象，該怎么做？很多時候，我們都已json的數據格式，進行傳輸。所以，有時我我們需要進行string和json之間的類型轉換。

      JSON.parse(str)(用於從字符串中，解析json對象)和JSON.stringify(object)（用於從一個對象解析出字符串）。

      傳遞參數一種就是，拼接url，另一種就是組合成json格式做參數，然后發送。

     思路 可參考下面代碼：

     function Person(name, age) {   

           this.name  =  name;   

           this.age  =  age;   

     } 

     ....

     var person = new Person("Alice", 12);   

     var pars = "person=" + person.toJSONString();   

     var url = "/...../......";   

     var mailAjax = new Ajax.Request(   

        url, {   

                 method: 'get',   

                 parameters: pars,   

                 onComplete: jsonResponse   

        });   

    返回值的獲取，代碼可參考：

     //結合上述刪除博文的例子

      .......

      if (XMLHttpReq.readyState == 4) {

       if (XMLHttpReq.status == 200) {

                var text = XMLHttpReq.responseText;

                console.log(text);

           }

       }

     至於后端對json的操作，那就是JSONObject類了。