AJAX技術&&js連接web&跨域

原創

2019-10-26 09:59

什麼是AJAX ？

AJAX 是與服務器交換數據並在不重新加載整個頁面的情況下更新部分網頁的技術。

用AJAX實現發送請求與接受響應數據

知識點：

1.XMLHttpRequest對象

介紹：XMLHttpRequest對象提供了對 HTTP 協議的完全的訪問，包括做出 POST 和 HEAD 請求以及普通的 GET 請求的能力。XMLHttpRequest 可以同步或異步地返回 Web 服務器的響應，並且能夠以文本或者一個 DOM 文檔的形式返回內容，儘管名爲 XMLHttpRequest，它並不限於和 XML 文檔一起使用：它可以接收任何形式的文本文檔，XMLHttpRequest是AJAX的關鍵。

2.XMLHttpRequest對象所提供的方法：

1.open()

open方法是爲請求做準備的方法
open有五個參數open(method, url, async, username, password)
常用的參數爲前三個
method：請求方式分爲get post l兩種種提交方法
url：請求地址
async：有兩個值可選true表示異步false表示同步

2.send()

open方法是爲請求做準備而send方法則是發送請求

3.onreadystatechange

作用：當readyState發生改變時調用onreadystatechange存儲的函數

4.readyState

readyState存儲的是 XMLHttpRequest的狀態返回值爲1234分別代表：
0：請求未初始化
1: 服務器連接已建立
2: 請求已接收
3: 請求處理中
4: 請求已完成，且響應已就緒

5.status

status存儲的是連接狀態例如：404 找不到網頁 500代碼錯誤 200連接成功

6.responseText

返回響應的字符串

7.responseXML

返回響應的XML文件

8.重點：response.setHeader(“Access-Control-Allow-Origin”,"*");允許跨域

實現效果1獲取本項目內的文件內容

實現代碼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button onclick="f()">提交</button>
	</body>
	<script type="text/javascript">
		function f(){
			xm = new XMLHttpRequest();
			xm.open("GET","text.txt",true);
			xm.send(null);
			xm.onreadystatechange=re;
			function re(){
				if(xm.status == 200 && xm.readyState == 4){
					var me = xm.responseText;
					alert(me);
				}
			}
		}
	</script>
</html>

text文本位置與內容

由上可以看出ajax向text請求text響應了他的信息

實現效果2連接TomCat服務器從服務器中獲取數據

效果

js代碼與上面的代碼只有請求地址不同（地址改爲了web中訪問servlet的地址）

	<!DOCTYPE html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title></title>
		</head>
		<body>
			<button onclick="f()">提交</button>
		</body>
		<script type="text/javascript">
			function f(){
				xm = new XMLHttpRequest();
				xm.open("GET","http://localhost:8080/Demo/servlet/ReturnSetvlet?name=123",true);
				xm.send(null);
				xm.onreadystatechange=re;
				function re(){
					if(xm.status == 200 && xm.readyState == 4){
						var me = xm.responseText;
						alert(me);
					}
				}
			}
		</script>			
	</html>

web代碼

web項目中只寫了一個servlet作響應

重點：response.setHeader(“Access-Control-Allow-Origin”,"*");允許跨域

			import java.io.IOException;
			import java.io.PrintWriter;
			import javax.servlet.ServletException;
			import javax.servlet.http.HttpServlet;
			import javax.servlet.http.HttpServletRequest;
			import javax.servlet.http.HttpServletResponse;
			
	public class ReturnSetvlet extends HttpServlet {
		public void doGet(HttpServletRequest request, HttpServletResponse response)
				throws ServletException, IOException {
			//允許跨域請求
			response.setHeader("Access-Control-Allow-Origin","*");
			request.setCharacterEncoding("utf-8");
			response.setContentType("text/html;charset=utf-8");
			PrintWriter out = response.getWriter();
			String name = request.getParameter("name");
			if(name != null){
				out.print("我是servlet返回的信息"+name);
			}else{
				out.print("空");
			}
			out.flush();
			out.close();
		}
		public void doPost(HttpServletRequest request, HttpServletResponse response)
				throws ServletException, IOException {
			doGet(request, response);
		}
	}

有上可看出js訪問到servlet並接收到返回值

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.