Ajax底層原理及相關小案例
阿新 • • 發佈：2019-01-10
Ajax的最大特點是：非同步訪問、區域性重新整理。核心是：XML。
Ajax的關鍵技術：
1.使用css搭建介面樣式，負責頁面的排版和美工
2.使用DOM進行動態顯示和互動，對頁面進行區域性修改
3.使用XMLHttpRequest非同步獲取資料
4.使用JavaScript將所有的元素綁在一起
Ajax執行過程：
第一步：建立XMLHttpRequest物件
（注：不同的瀏覽器建立方式不同,可以提取為方法來進行呼叫）
第二步：建立到伺服器的連線function createXMLHttpRequest(){ if(window.ActiveOBject){ //IE瀏覽器 xhr = new window.ActiveOBject("Microsoft.XMLHTTP"); }else{ //其他瀏覽器 xhr = new XMLHttpRequest(); } }
//get方式
xhr.open("get", "http://localhost:8080/hdk/index.jsp?name="+name);
//post方式 xhr.open("post","http://localhost:8080/hdk/index.jsp?name="+name);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
(上述連線方式是通過一個使用者名稱的驗證案例來寫的，伺服器的路徑是驗證資訊跳轉的jsp)（注：不同的Ajax響應回來後會自動呼叫函式，不同的Ajax請求步驟基本相同，但是差別和難易主要是在回撥函式） function process(){ if(xhr.readyState == 4){ if(xhr.status == 200){ //200 404 500 //得到返回結果 var result = xhr.requestText; //寫到指定位置 document.getElementById("nametip"); }else{ alert("Ajax請求錯誤"); } } }
在Ajax應用程式中，需要了解五種就緒狀態，但通常只使用狀態4。Http就緒狀態，表示請求的狀態或情形。 0（未初始化）：請求沒有發出（在呼叫open()之前） 1（初始化）：請求已經建立但沒發出（在呼叫send()之前） 2（傳送資料）：請求已經發出正在處理中（可以從響應得到資料的頭部） 3（資料傳送中）：請求已經處理，響應中有部分資料可用，但是伺服器還沒完成響應 4（完成）：響應已完成，可以訪問伺服器響應並使用它 狀態碼 status: 200,404,500返回結果資料：requestText、responseXML
第四步：傳送請求
其他：//get方式 xhr.send(null); //post方式 xhr.send("name"+name); 注：1.如果是get請求，引數已經附加在url中，採用send(null)即可。如果是post請求，需要通過send()來傳遞引數 2.如果是post請求，要在send之前新增如下語句來指定http header: xmlHttp.setRequestHeader("Content-Type“,"application/x-www-form-urlencoded");
XMLHttpRequest物件是Ajax應用的核心
1.屬性
-readyState：提供當前HTML的就緒狀態
-status：伺服器響應的狀態程式碼
-responseText/responseXML：伺服器返回的請求響應文字/XML
2.方法
-open()：建立到伺服器的新請求
-send()：向伺服器傳送請求
-setRequestHeader()：設定請求頭資訊
3.事件
-onreadystatechange：用於指定回撥函式
小案例：
user.jsp主要程式碼:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'user.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">
-->
</head>
<script type="text/javascript">
var xhr;
function checkName(){
//獲取使用者名稱
var name = document.getElementById("name").value;
//判斷使用者名稱是否為空(JS)
if(name == ""){
document.getElementById("nametip").innerHTML="使用者名稱不能為空";
return;
}
//判斷使用者名稱是否可用（ajax）
//1.建立XMLHttpRequest物件
createXMLHttpRequest();
//2.和伺服器建立連線
//get方式
//xhr.open("get", "http://localhost:8080/hdk/index.jsp?name="+name);
//post方式
xhr.open("post","http://localhost:8080/hdk/index.jsp?name="+name);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//3.指定回撥函式（ajax響應回來以後自動呼叫的函式）
xhr.onreadystatechange=process;
//4.傳送請求給伺服器
//get方式
//xhr.send(null);
//post方式
xhr.send("name"+name);
}
//判斷一般瀏覽器和ie瀏覽器的區別
function createXMLHttpRequest(){
if(window.ActiveXObject){//ie瀏覽器
xhr = new window.ActiveXObject("Microsoft.XMLHTTP");
}else{
xhr = new XMLHttpRequest();
}
}
function process(){
if(xhr.readyState == 4){
//縮短ajax請求的時間
if(xhr.status == 200){
//獲取ajax的返回結果
var result = xhr.responseText;
//寫到指定的位置
document.getElementById("nametip").innerHTML=result;
}else{
alert("ajax請求失敗");
}
}
}
</script>
<body>
<form action="" method="post" >
姓名<input type="text" name="name" id="name" onblur="checkName( )"><span id="nametip"></span> <br>
密碼<input type="text" name="pwd" id="pwd"><br>
密碼<input type="text" name="repwd" id="repwd"><br>
<input type="submit" value="提交">
</form>
</body>
</html>
index.jsp程式碼：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
//獲取使用者名稱
String name = request.getParameter("name");
//判斷是否能用
boolean flag = false;
if(name.indexOf("sxt")>=0){
flag = true;
}
//給出客戶端提示資訊
if(flag){
out.print("使用者名稱已經被佔用");
}else{
out.print("使用者名稱可以使用");
}
%>