Ajax

发布时间：2020-12-15 21:33:21 所属栏目：百科来源：网络整理

导读：Ajax(Asynchronous javascript and xml) 异步的js和xml ajax使用js异步访问访问服务器，服务器响应数据给客户端text、xml、json 优点：增强用户体验，因服务器只用响应部分内容减轻了服务器压力 Ajax发送异步请求 1、得到XMLHttpRequest对象 2、打开与服务器

Ajax(Asynchronous javascript and xml)
异步的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,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",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,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;
			}
		};
	};
};

（编辑：李大同）

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