封裝好的Ajax呼叫函式以及基本方法總結
阿新 • • 發佈：2019-01-10
學了Ajax，今天來一個總結
首先什麼是Ajax：Asynchronous Javascript And XML”（非同步JavaScript和XML），是指一種建立互動式網頁應用的網頁開發技術。直白的說就是實現區域性重新整理：提升使用者的體驗。（jsp：同步方案（順序流執行的））
在Ajax中，有幾個技術要結合用：
靜態部分：HTML，CSS，用於美化外觀。
JavaScript：JavaScript可以操作DOM（文件物件模型）。
xml/json：資料交換。
XMLHTTPRequest物件：這是Ajax核心，用於非同步的訪問伺服器
現在來在一個JS檔案中建立並且封裝好一個Ajax基本建立函式。
var xmlHttp;
//建立了一個xmlhttprequest物件
function createXMLHttpRequest() {
if (window.XMLHttpRequest) { // 如果可以取得XMLHttpRequest
xmlHttp = new XMLHttpRequest(); // Mozilla、Firefox、Safari
}else if (window.ActiveXObject) { // 如果可以取得ActiveXObject
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP" 這裡要注意：
get：明文顯示在位址列（長度512位元組）
post：位址列不現實，以http協議的實體方式來傳輸資料，理論上沒有長度限制
下面建立一個分別呼叫他們的頁面，檢視效果：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!doctype html>
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="js/common.js"></script></head>
<body>
<a href="javascript:void" onclick="startRequest('hello.jsp?name=I am get',handleStateChange)">發出get請求</a>
<a href="javascript:void" onclick="startRequestByPost('hello.jsp','name=I am post',handleStateChange)">發出post請求</a>
</body>
</html>
<script>
//非同步處理函式：當伺服器給客戶端響應時，會自動呼叫這個函式處理
function handleStateChange(){
//首先要判斷狀態
//伺服器的就緒狀態
if (xmlHttp.readyState == 4) { // 測試狀態是否請求完成
if (xmlHttp.status == 200) { // 如果伺服器迴應OK
alert("伺服器的相應" + xmlHttp.responseText); // 這邊取到迴應的文字
}
}
}
</script>
這裡要注意一個重要的引數是xmlHttp.responseText 可以取到迴應的資訊。
效果
首先是get
呼叫的是startRequest(urlString,handleStateChange)，要傳入的引數是：提交的地址？=引數名和引數，狀態改變的JavaScript函式。
然後是post
呼叫的是startRequestByPost(url,queryString,handleStateChange)，要傳入的引數是：提交的地址，引數名和函式，狀態改變的JavaScript函式。區別就是引數是否跟在地址後面。
