异步的js和xml
ajax使用js异步访问访问服务器,服务器响应数据给客户端text、xml、json
优点:增强用户体验,因服务器只用响应部分内容减轻了服务器压力
Ajax发送异步请求
1、得到XMLHttpRequest对象
2、打开与服务器连接xmlHttp.open()
3、发送请求xmlHttp.send(请求方式,URL,true(异步请求)/..)
4、读取服务器响应
xmlHttp对象的5个状态
0:刚创建
1:请求开始
2:请求已发送
3:服务器开始响应
4:服务器响应结束
得到XMLHttp对象状态
var state = xmlHttp.reaydyState;
得到服务器响应的状态码
var status = xmlHttp.status;
得到服务器的相应内容
var content = xmlHttp.responseText;//得到服务器响应的文本格式内容
var content = xmlHttp.responseXML;//得到服务器响应的xml内容(Document对象)
!XMLHttpRequest(异步请求对象)在不同浏览器中创佳语法不同
<script type="text/javascript">
function createXMLHttpRequest() {
try {
return new XMLHttpRequest();//大多数浏览器
} catch (e) {
try {
return ActvieXObject("Msxml2.XMLHTTP");//IE6.0
} catch (e) {
try {
return ActvieXObject("Microsoft.XMLHTTP");//IE5及更早版本
} catch (e) {
throw e;
}
}
}
}
</script>
!发送post请求open()打开与服务器连接后,设置请求头
xmlHttp.setRequestHead("Content-Type","application/x-www-form-urlencoded");
!
-----------------------------------------------------------------------------------------------------------------
发送GET请求
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("UTF-8");
response.getWriter().print("This is AJAX.");
}
window.onload = function(){
var btn =document.getElementById("btn");
btn.onclick = function(){
//注册监听
//1.得到XMLHttpRequest异步请求对象
var xmlHttpRequest = createXMLHttpRequest();
//2.打开与服务器的连接
xmlHttpRequest.open("GET","<c:url value='/Aservlet'/>",true);
//3.发送请求
xmlHttpRequest.send(null);//GET请求没有请求体,但是必须给null
//4.给异步请求对象的onreadystatechange事件注册监听器
xmlHttpRequest.onreadystatechange = function(){
if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status ==200){
var text = xmlHttpRequest.responseText;//获取响应内容
//将相应内容添加到h1
var h1 = document.getElementById("h1");
h1.innerHTML=text;
}
};
};
};
发送POST请求
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("UTF-8");
String username=request.getParameter("username");
response.getWriter().print(username+"This is AJAX.");
}
window.onload = function(){
var btn =document.getElementById("btn");
btn.onclick = function(){
//注册监听
//1.得到XMLHttpRequest异步请求对象
var xmlHttpRequest = createXMLHttpRequest();
//2.打开与服务器的连接
xmlHttpRequest.open("POST","<c:url value='/Aservlet'/>",true);
xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//3.发送请求
xmlHttpRequest.send("username=Hello!");//GET请求没有请求体,但是必须给null
//4.给异步请求对象的onreadystatechange事件注册监听器
xmlHttpRequest.onreadystatechange = function(){
if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status ==200){
var text = xmlHttpRequest.responseText;//获取响应内容
//将相应内容添加到h1
var h1 = document.getElementById("h1");
h1.innerHTML=text;
}
};
};
};
响应内容为XML
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String xml = "<students>" +
"<student number='ITCAST_1001'>" +
"<name>zhangSan</name>" +
"<age>18</age>" +
"<sex>male</sex>" +
"</student>" +
"</students>";
response.setContentType("text/xml;charset=utf-8");
response.getWriter().print(xml);
}
window.onload = function(){
var btn =document.getElementById("btn");
btn.onclick = function(){
//注册监听
//1.得到XMLHttpRequest异步请求对象
var xmlHttpRequest = createXMLHttpRequest();
//2.打开与服务器的连接
xmlHttpRequest.open("GET","<c:url value='/BServlet'/>",true);
//3.发送请求
xmlHttpRequest.send(null);//GET请求没有请求体,但是必须给null
//4.给异步请求对象的onreadystatechange事件注册监听器
xmlHttpRequest.onreadystatechange = function(){
if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status ==200){
var doc = xmlHttpRequest.responseXML;//获取响应内容
// 处理浏览器的差异
if(window.addEventListener) {
number = ele.getElementsByTagName("number")[0].textContent;//其他浏览器
} else {
number = ele.getElementsByTagName("number")[0].text;//IE支持
}
if(window.addEventListener) {
name = ele.getElementsByTagName("name")[0].textContent;//其他浏览器
} else {
name = ele.getElementsByTagName("name")[0].text;//IE支持
}
if(window.addEventListener) {
age = ele.getElementsByTagName("age")[0].textContent;//其他浏览器
} else {
age = ele.getElementsByTagName("age")[0].text;//IE支持
}
if(window.addEventListener) {
sex = ele.getElementsByTagName("sex")[0].textContent;//其他浏览器
} else {
sex = ele.getElementsByTagName("sex")[0].text;//IE支持
}
var text = number + ", " + name + ", " + age + ", " + sex;
//将相应内容添加到h1
var h1 = document.getElementById("h1");
h1.innerHTML=text;
}
};
};
};