Ajax簡單總結

 

AJAX總結

1.    Ajax流程

1.1 建立XMLHttpRequest對象

var req;

       if (window.XMLHttpRequest) {                // 適用於全部新型瀏覽器

              req = new XMLHttpRequest();

       } else if (window.ActiveXObject) {             // 適用於IE5.0 與 IE6.0

              req = new ActiveXObject("Microsoft.XMLHTTP");

       }

1.2 綁定狀態變化事件

req.onreadystatechange=function(){

       if(req.readyState==4 && req.status==200){

              //1>將json字符串轉換成對象

              var arr = eval("("+req.responseText+")");

              //2>遍歷json對象

              for(var i = 0 ; i<arr.length ; i++){

                     var json = arr[i];

                            //組裝成option對象=>放入省級下拉選

                            //alert(json["id"]+"=>"+json["name"]);

                            var option = document.createElement("option");

                            option.setAttribute("value", json["id"]);

                            option.innerHTML = json["name"];

                            province.appendChild(option);

              }

       }

};

1.3 指定訪問的方式及路徑（open方法）

req.open("Post", "${pageContext.request.contextPath}/ProvinceServlet", true);

1.4 設置請求頭（針對post請求，get請求不須要設置）

req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

1.5  發送請求

req.send();     //send方法中能夠傳遞參數，針對post請求而言

2.    ajax的封裝

2.1 手動封裝（jsp中部分代碼）

參數說明：

method：       請求方式（post或get請求）

jsonparam：   請求中攜帶的參數，以json的方式進行保存

url：                     請求路徑

fun：              請求的回調函數（即在綁定的狀態改變事件中，要執行的代碼）

responseType:  返回數據的類型（文本、xml 或 json）（可不用）

function ajax(method, jsonparam, url, fun, responseType){

       //1.建立xmlHttpRequest

var req;

       if (window.XMLHttpRequest) {                // 適用於全部新型瀏覽器

              req = new XMLHttpRequest();

       } else if (window.ActiveXObject) {             // 適用於IE5.0 與 IE6.0

              req = new ActiveXObject("Microsoft.XMLHTTP");

       }

       //2.綁定onreadystatechange 監聽函數

              req.onreadystatechange=function(){

                     if(req.readyState==4){

                            if(responseType=="text"){                     //返回值是文本

                                   fun(req.responseText,req.status,req);

                            }else if(responseType=="xml"){                //返回值是xml

                                   fun(req.responseXML,req.status,req);

                            }else if(responseType=="json"){               //返回值是json

                                   var json = eval("("+req.responseText+")");

                                   fun(json,req.status,req);      

                            }

                     }

              };

      

       //拼裝參數

       var param = "";

       //遍歷須要發送的參數json對象

       for(var key in jsonparam){

              var value = jsonparam[key];

              //取出鍵值對,並拼裝參數鍵值對

              param+= key+"="+value+"&";

       }

       // 去掉最後一個"&"號

       param = param.substring(0, param.length-1);

      

       if(method=="GET"){

//參數拼接在url後面

       //3.調用open方法,設置鏈接參數

              req.open(method,url+"?"+param);

       //4.調用send方法發送請求

              req.send();

       }else if(method=="POST"){

//若是請求方式是post請求，參數拼裝後放入send方法

              //3.調用open方法,設置鏈接參數

              req.open(method,url);

              //設置請求頭

              req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

              //4.調用send方法發送請求

              req.send(param);

       }

}

2.2 jQuery對ajax的封裝使用

jquery中，對ajax部分代碼進行了封裝，並提供了getJSON：function( url, data, callback )方法

參數介紹：

       url：      要訪問的路徑

       data：  要傳遞的參數（儘可能是鍵值對）

       callback：回調函數

$.getJSON("${pageContext.request.contextPath}/CityServlet",{id:pid},function(json){

       //如下內容，是回調函數中的事務處理

for(var i = 0 ; i < json.length ; i++){

       var pJson = json[i]; // 遍歷每個json(Area)

       //取出省級的名字.id

        var pname = pJson["name"];

        var pid = pJson["id"];

        // 建立option對象  <option value="id" >name</option>

        var $pOption = $("<option></option>"); // document.createElement("option");

        $pOption.attr("value",pid); // document.setAttribute("value",pid);

        $pOption.html(pname);//innerHTML = pname;

        $pOption.appendTo("#city");//將拼裝好的option 插入到市級下拉選中

        }    

});

2.3 servlet中傳遞json數據

public void doPost(HttpServletRequest request, HttpServletResponse response)

              throws ServletException, IOException {

       // 1 得到參數省id

       String id = request.getParameter("id");

       // 2 調用Dao根據省id得到省下的市

       List<Area> areas = ad.getCitiesByProvinceId(Integer.parseInt(id));

       // 3 轉換爲json（這裏須要jsonlib的jar包）

       JSONArray  js = JSONArray.fromObject(areas);

       // 4發送(解決亂碼)

       response.setContentType("text/html;charset=utf-8");

       response.getWriter().write(js.toString());

}