AJAX使用总结
AJAX介绍及使用
一、引言
1、传统的请求方式：
同步请求：①地址栏 ②超链接 ③表单 ④window.location.href=“ http://... ”
2、AJAX:
异步请求：并发执行，发起请求之后，无需等待，继续执行当前任务。
二、AJAX技术
1、Asychronous JavaScript And XML(异步的JS和XML)
2、解决了页面局部刷新的技术，不是编程语言。
3、异步请求的响应方式：
①响应的不再是整个页面，而是代表局部内容的字符串。
②发送异步请求之后页面不会跳转，无需等待响应结果，可继续操作当前页面。
③响应返回时，会伴有监听状态值，当状态值代表响应成功时，即可操作响应内容。
三、AJAX的开发
1、编程步骤：
①创建XMLHttpRequest对象（JS）：
两种形式：屏蔽浏览器差异 ：
Chrome、FireFox：XMLHttpRequest对象
IE：ActiveXObject对象
Var xhr=new ActiveXObject(“Microsoft XMLHTTP”);
②定义请求方式、请求路径xhr.open(“GET”,”url”);
③发送请求(Post请求下，需要添加参数，Get方式写Null,不写会有浏览器差异)xhr.send(“”);
④监听状态值与状态码
⑤处理响应的结果
2、状态值
0：未初始化。创建xhr对象，但未初始化
1：载入。发送请求，send方法执行
2：载入完成。请求发送完毕
3：交互。接收响应 、并通过mima类型解析响应内容
4：完成。解析完成，可获得响应的数据进行处理
3、状态码
200：服务器正确响应完毕，同时响应结果也是正确的。
400：错误请求
404：没有发现目标文件URL
405：方法不被允许
500：服务器内部错误(配置错误、代码写错)
4、Post请求
不拼接请求参数，请求参数放在send里面。模拟表单，添加请求头信息
<form enctype=”application/x-www-form-urlencoded”>
5、使用流输出响应内容：
PrintWriter out = response.getWriter();
① 使用servlet可以继承ActionSupport ，或者实现Action接口；并配置 web.xml
② response的获得：
HttpServletResponse response = ServletActionContext.getResponse();
Response.getWriter().println();
返回值：AJAX中，返回一个null，通过流字符串返回到页面。xml不用配<result>
四、JQuery对AJAX的支持
1、JQuery解决了浏览器差异，封装了ajax代码冗余的部分
第一种封装：
2、$.ajax({
Type:”get|post”
url:“请求路径”
data:传数据
dataType:服务器端响应内容的类型text/json(响应回来的JSON自动转为JS对象)
//监听响应
success:function(形参result){
//result等价于xhr.responseText的内容
},
error:function(){
Alert(“error”);
}
});
第二种封装：
3、$.get(
“url”,
“data”,
function(result){},
“json” //请求回来自动转换成JS对象
);
第三种封装：
4、$.post(
“url”,
“data”,
function(result){},
“json”
);
五、案例：AJAX - 省市县三级联动
1、页面 -jsp代码-查询所有城市
<script type="text/javascript">
//页面加载
$(function(){
//显示所有城市
$("#provinces").change(function(){
$.ajax({
type:"post",
url:"/AJAX_day1/casc/showCities",
data:"provinceCode="+$("#provinces").val(),
dataType:"text",
success:function(result){
var citiesMap=$.parseJSON(result);
//添加选择标签
$("#cities").html("<option value='choice'>请选择</option>");
//遍历该JSON串
for ( var city in citiesMap) {
//alert(citiesMap[city].name); 一个城市
//往选择框中添加选择标签
$("#cities").append("<option value="+citiesMap[city].code+">"+citiesMap[city].name+"</option>");
}
}
});
});
2、查询所有乡镇
//显示所有乡镇
$("#cities").change(function(){
$.ajax({
type:"post",
url:"/AJAX_day1/casc/showAreas",
data:"cityCode="+$("#cities").val(),
dataType:"text",
success:function(result){
var areaMap=$.parseJSON(result);
//添加选择标签
$("#counties").html("<option value='0'>请选择</option>");
//遍历JSON串
for ( var area in areaMap) {
//alert(areaMap[area].name);
//动态创建子标签
$("#counties").append("<option value="+areaMap[area].code+">"+areaMap[area].name+"</option>");
}
}
});
});
});
</script>
3、显示界面 <body></body>
<a href="/AJAX_day1/casc/showProvince"><input type="button" value="查城市"/>
</a><br/><hr/>
所在城市：省：<select id="provinces" style="width:100px;">
<option value="choice">请选择</option>
<s:iterator value="provList">
<option value="<s:property value="code"/>"><s:property value="name"/></option>
</s:iterator>
</select>
市：<select id="cities" style="width:100px;">
<option value="choice">请选择</option>
<!-- 动态获取省份中各个城市名称，并动态添加<option>标签 -->
</select>
乡/镇：<select id="counties" style="width:100px;">
<option value="choice">请选择</option>
<!-- 动态获取省份中各个区县名称，并动态添加<option>标签 -->
</select>
<br/><hr/>
<input type="submit" value="提交"/>
4、后台代码
package com.ajax.action;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import com.ajax.entity.Area;
import com.ajax.entity.City;
import com.ajax.entity.Province;
import com.ajax.service.CascadingService;
import com.ajax.serviceImpl.CascadingServiceImpl;
import com.alibaba.fastjson.JSON;
import com.opensymphony.xwork2.ActionSupport;
public class CascadingAction extends ActionSupport {
private CascadingService cs=new CascadingServiceImpl();
private List<Province> provList;
private String provinceCode;
private String cityCode;
public String showProvince(){
provList = cs.queryAllProvinces();
return "cascadingJsp";
}
public String showCities() throws IOException{
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
List<City> cities = cs.queryAllCities(provinceCode);
String jsonString = JSON.toJSONString(cities);
out.println(jsonString);
out.flush();
return null;
}
/**
* 显示所有地区
* @return
* @throws IOException
*/
public String showAreas() throws IOException{
System.out.println(cityCode);
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
List<Area> areas = cs.queryAllAreas(cityCode);
String jsonString = JSON.toJSONString(areas);
out.println(jsonString);
out.flush();
return null;
}
//get set
public List<Province> getProvList() {
return provList;
}
public void setProvList(List<Province> provList) {
this.provList = provList;
}
public String getProvinceCode() {
return provinceCode;
}
public void setProvinceCode(String provinceCode) {
this.provinceCode = provinceCode;
}
public String getCityCode() {
return cityCode;
}
public void setCityCode(String cityCode) {
this.cityCode = cityCode;
}
}
注：所有城市的数据库信息可以在网上找到。
六、AJAX和框架整合
1、SpringMVC默认集成Jackson，必须引入jar包，就可以以流的形式响应
2、引入@ResponseBody注解：自动转换成JSON字符串，并使用输出流输出。
①．定义自定义类型返回值；
②．为控制器的自定义返回值添加注解；
③．Return返回类型
代码：