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