Ajax異步XMLHttpRequest對象

時間 2019-11-09

原文原文鏈接

示例Ajax：javascript

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Ajax</title>
</head>
<body>

<div style="text-align: center;">
	<button onclick="loadName()">測試Ajax</button>
</div>

</body>
<script type="text/javascript">
function loadName() {
	var xmlHttp;
	if(window.XMLHttpRequest){
		xmlHttp=new XMLHttpRequest();
	}else{//IE 5,6的支持
		xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	//xmlHttp.open("get", "testAjax", true);
	//xmlHttp.open("post", "testAjax", true);
	
	/*
	//get請求
	xmlHttp.open("get", "testAjax?name=Anner&age=24", true);
	xmlHttp.send();
	*/
	//post請求
	xmlHttp.open("post", "testAjax", true);
	xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	xmlHttp.send("name=Anner&age=24");
}
</script>
</html>

　　XMLHttpRequset對象相應服務器html

onreadystatechange事件java

當請求被髮送到服務器時，咱們須要執行一些基於響應的任務ajax

當readystate改變時，就會觸發onreadystatechange事件服務器

XMLHttpRequest對象的三個重要的屬性：app

一、onreadystatechange存儲函數或函數名，每當readyState屬性改變時，就調用該函數函數

readyState存有XMLHttpRequest的狀態，從0到4發生變化post

0：請求未初始化測試

1：服務器鏈接已經創建ui

2：請求已接收

3：請求處理中

4：請求已完成，且相應已就緒

status：

200:OK

404:未找到頁面

如需得到來自服務器的相應，使用XMLHttpRequest對象的responseText或responseXML屬性

responseText得到字符串形式的響應數據

responseXML得到XML形式的響應數據

　　Ajax返回後臺Servlet數據

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Ajax</title>
</head>
<body>

<div style="text-align: center;">
	<button onclick="loadName()">測試Ajax</button>
	<input type="text" name="te" id="te">
</div>

</body>
<script type="text/javascript">
function loadName() {
	var xmlHttp;
	if(window.XMLHttpRequest){
		xmlHttp=new XMLHttpRequest();
	}else{//IE 5,6的支持
		xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	//xmlHttp.open("get", "testAjax", true);
	//xmlHttp.open("post", "testAjax", true);
	
	/*
	//get請求
	xmlHttp.open("get", "testAjax?name=Anner&age=24", true);
	xmlHttp.send();
	*/
	
	//alert("readyState:"+xmlHttp.readyState+"status狀態"+xmlHttp.status);
	xmlHttp.onreadystatechange=function(){
		//alert("readyState:"+xmlHttp.readyState+"status狀態"+xmlHttp.status);
		if(xmlHttp.readyState==4 && xmlHttp.status==200){
			//alert(xmlHttp.responseText);
			document.getElementById("te").value=xmlHttp.responseText;
		}
	};
	//post請求
	xmlHttp.open("post", "testAjax", true);
	xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	xmlHttp.send("name=Anner&age=24");
	
	
}
</script>
</html>

	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		//req.setCharacterEncoding("utf-8");
		//String name=req.getParameter("name");
		//String age=req.getParameter("age");
		//System.out.println(name+" "+age);
		resp.setContentType("text/html;charset=utf-8");
		PrintWriter out =resp.getWriter();
		out.println("ajax返回");
		out.flush();
		out.close();
	}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。