Ajax简单总结

为什么80%的码农都做不了架构师？>>>   

 

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());

}

转载于:https://my.oschina.net/xiaogezi/blog/660913