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

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

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

fun(json,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方法,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());

}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!