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类了。