ajax
1、获取xmlHttpRequest,创建异步对象
var xmlHttp= createXMLHttpRequest();
function createXMLHttpRequest() {
try {
return new XMLHttpRequest();//主流浏览器
} catch (e) {
try {
return new ActiveXObject("MSXML2.XMLHTTP");//IE6.0
} catch (e) {
try {
alert(3);
return new ActiveXObject("Microsoft.XMLHTTP");//IE5.5
} catch (e) {}
}
}
}
2、调用open方法,打开与服务器的连接,open方法,有3个参数,一个是请求方式,一个是请求url,一个是是否是异步
为了防止缓存重复请求不执行,加了个随机数Math.random()
get请求
xmlHttp.open("GET", '<c:url value="/AServlet"><c:param name="a"></c:param></c:url>'+Math.random(), true);
post请求
xmlHttp.open("POST", '<c:url value="/AServlet"><c:param name="a"></c:param></c:url>'+Math.random(), true);
post请求必须设置请求头 application/x-www-form-urlencoded
xmlHttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
3、调用send方法
xmlHttp.send(null);
post请求带参数xmlHttp.send("test=abc&dd=90");
4、状态检测获取数据
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
var h2 = document.getElementById("h1");
h2.innerHTML = xmlHttp.responseText;
}
};
AJAX使用中可能遇到了浏览器使用了缓存而没有去请求服务器的问题
1、可以禁用缓存(我也没懂怎么搞)
2、可以在url后面添加一个随机数,使得每次请求都是不一样的URL就可以了
我使用了URL+Math.random()
解析xml数据
服务器端返回xml类型的数据
必须设置响应头ContentType:text/xml;charset=UTF-8
String xml="<students>"+
"<student id='itcast_1001'>"+
"<name>李四</name>"+
"<age>23</age>"+
"<sex>女</sex>"+
"</student>"+
"</students>";
response.setContentType("text/xml;charset=utf-8");
response.getWriter().append(xml);
web端处理响应
注意document的解析获取属性值getAttribute(“id”)
获取标签中的文本内容childNodes[0].nodeValue,这种方式兼容性比较好的
标签中的文本也属于节点的,命名为文本节点,使用nodeValue获取节点的值
var doc=xmlHttp.responseXML;//获取服务器响应的xml
var stu=doc.getElementsByTagName("student")[0];
var id=stu.getAttribute("id");//获取id属性值
var name=stu.getElementsByTagName("name")[0].childNodes[0].nodeValue;//获取name的值
var age=stu.getElementsByTagName("age")[0].text;//兼容差
var sex=stu.getElementsByTagName("sex")[0].innerHTML;//兼容差
var info=id+", "+name+", "+age+", "+sex;
var h2 = document.getElementById("h1");
h2.innerHTML=info;
也参考https://blog.csdn.net/u013719339/article/details/73181122
JSON解析
服务器端返回JSON串(使用了jackson框架)
Map map= new HashMap();
map.put("id", "id1001");
map.put("name", "zhangsan");
map.put("age",22);
map.put("sex", "女");
ObjectMapper mapper= new ObjectMapper();
String json=mapper.writeValueAsString(map);
response.getWriter().append(json);
//{"sex":"女","name":"zhangsan","id":"id1001","age":22}
web端解析
var text=xmlHttp.responseText;
var json=eval("("+text+")");//eval执行一下变成json对象
//或者使用var json=JSON.parse(text);但是低版本浏览器不支持必须引入json2.js文件来保持完美的兼容性
var str=json.id+", "+json.name+", "+json.age+", "+json.sex;
var h2 = document.getElementById("h1");
h2.innerHTML=str;
//怎么看都是JSON比较简单,非常推荐JSON作为数据交换