day21JavaWeb（ajax 判斷瀏覽器 ajax四步操作）
阿新 • • 發佈：2018-11-19
1、ajax asynchronous javascript and xml :非同步的js和xml 能使用js訪問伺服器，而且是非同步訪問 伺服器給客戶端的響應一般是整個頁面，一個html完整頁面。但在ajax中因為是區域性重新整理，那麼伺服器就不用再響應整個頁面，而是資料 text:純文字 xml:熟悉 json:是js提供的資料互動格式，在ajax最受歡迎 2、非同步互動和同步互動 同步： 發出一個請求：要等待伺服器的響應結束，然後才能傳送第二個請求。中間時間等待 重新整理的是整個頁面 非同步： 發出一個請求後，無序等待伺服器的響應，就可以發出第二個請求 可以使用js來接收伺服器的響應，然後使用js來區域性重新整理 3、應用場景 百度的搜尋框 使用者註冊時（校驗使用者名稱是否被註冊過） 4、ajax的優缺點 優點： 非同步互動：增強了使用者的體驗 效能：因為伺服器無需再響應整個頁面，只需要響應部分內容，所以伺服器的壓力減輕了 缺點： ajax不能應用在所有場景 ajax無端的增多了對伺服器的訪問次數，給伺服器帶來了壓力（本來不用關聯搜尋） ajax傳送非同步請求（四步操作） 1、第一步(得到XMLHttpRequest) ajax其實只需要學習一個物件：XMLHttpRequest，如果掌握了，就掌握了ajax 得到XMLHttpRequest 大多數瀏覽器都支援 var xmlHttp = new XMLHttpRequesst(); IE6.0: var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); IE5.5以及更早版本的IE： var xmlHttp = new ActiveXObject = new ActiveXObject("Microsoft.XMLHTTP"); 編寫建立XMLHttpRequest物件的函式 function createXMLHttpRequest(){ try{ return new XMLHttpRequest(); } catch(e){ try{ return new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ return new ActiveXObject("Microsoft.XMLHTPP"); }catch(e){ alert("用的什麼瀏覽器？")； throw e; } } } } 2、第二步（開啟與伺服器的連線） xmlHttp.open():用來開啟與伺服器的連線，需要三個引數 請求方式：可以是GET或POST 請求的URL：指定伺服器端資源，例如/day06_01/AServlet 請求是否為非同步：如果為true表示傳送非同步請求，否則同步請求 xmlHttp.open("GET","/day06_01/AServlet",true); 3、第三步(傳送請求） xmlHttp.send(null);如果不給會造成部分瀏覽器無法傳送 引數：就是請求體內容。如果是GET請求，必須給出null，xmlHttp.send("username=zs&password=123"); 4、第四步（） 在xmlHttp物件的一個事件上註冊監聽器：onreadystatechange xmlHttp物件共有5個狀態 0狀態：剛建立，沒有呼叫open()方法 1狀態：請求開始，呼叫了open方法，但還沒有呼叫send()方法 2狀態：呼叫完了send方法 3狀態：伺服器已經開始響應，但不表示響應結束了 4狀態：伺服器響應結束 （通常只關心這個狀態） 得到xmlHttp物件的狀態 var stats = xmlHttp.readyState;//可能是0、1、2、3、4 得到伺服器響應的狀態碼 var status = xmlHttp.status;//例如200、404、500 得到伺服器響應的內容 var content = xmlHttp.responseText;//得到伺服器響應的文字格式的內容 var content = xmlHttp.responseXML;//得到伺服器響應的xml格式的內容，是Document物件 xmlHttp.onreadystatechange = function(){//xmlHttp的5中狀態都會呼叫本方法 if(xmlHttp.readyState ==4 && xmlHttp.status == 200){//雙重判斷：判斷是否為4狀態，而且還有判斷是否為200 //獲取伺服器的響應內容 var text = xmlHttp.responseText;//更通用 } } 傳送POST請求(如果傳送請求時需要帶有引數，一般都用POST) open:xmlHttp.open("POST",...); 新增一步：設定Content-Type請求頭 xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); send:xmlHttp.send("username=zs&password=123");//傳送請求時指定請求體 登錄檔單之校驗使用者是否註冊 1、編寫頁面： ajax3.jsp 給出登錄檔單頁面 給使用者名稱文字框新增onblur事件的監聽 獲取文字框的內容，通過ajax4步傳送給伺服器，得到響應結果 如果為1：在文字框後顯示"使用者名稱已被註冊" 如果為0：什麼都不做 2、編寫Servlet ValidateUsernameServlet 獲取客戶端傳遞的使用者名稱引數 判斷是否為itcase 是：返回1 否：返回0 響應內容為xml資料 伺服器端： 設定響應頭：Content-Type:其值為:text/xml;charset=utf-8; 客戶端： var doc = xmlHttp.responseXML;//得到的是document物件
<script type="text/javascript"> //建立非同步物件 function createXMLHttpRequest() { try { return new XMLHttpRequest();//大多數瀏覽器 } catch (e) { try { return ActiveXObject("Msxml2.XMLHTTP");//IE6.0 } catch (e) { try { return ActiveXObject("Microsoft.XMLHTTP");//IE5.5及更早 } catch (e) { alert("什麼瀏覽器？"); throw e; } } } } window.onload = function() { //獲取文字框，給它的失去焦點事件註冊監聽 var userEle = document.getElementById("usernameEle"); userEle.onblur = function() { //1、得到非同步物件 var xmlHttp = createXMLHttpRequest(); //2、開啟連結 xmlHttp.open("POST", "<c:url value='/ValidateUsernameSevlet'/>", true); //3、設定請求頭：Content-Type xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //4、傳送請求，給出請求體 xmlHttp.send("username=" + userEle.value); //5、給xmlHttp的onreadystatechange事件註冊監聽 xmlHttp.onreadystatechange = function() { if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {//雙重判斷 //獲取伺服器的響應，判斷是否為1 //是：獲取span,新增內容:"使用者名稱已被註冊" var text = xmlHttp.responseText; var span = document.getElementById("errorSpan"); if (text == "1") { //得到span元素 span.innerHTML = "使用者名稱已被註冊"; } else { span.innerHTML = ""; } } }; }; }; </script> </head> <body> <h1>使用者名稱是否被註冊</h1> <form action="" method="post"> 使用者名稱<input type="text" name="username" id="usernameEle"><span id="errorSpan"></span> <br> 密 碼<input type="password" name="password"><br> <input type="submit" value="註冊"> </form> </body>
public class ValidateUsernameSevlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); /* * 1、獲取引數username * 2、判斷是否為lvc * 3、如果是：響應1 * 4、如果不是：響應0 */ String username = request.getParameter("username"); if(username.equalsIgnoreCase("lvc")){ response.getWriter().print("1"); } else{ response.getWriter().print("0"); } } }
<script type="text/javascript">
function createXMLHttpRequest() {
try {
return new XMLHttpRequest();//大多數瀏覽器
} catch (e) {
try {
return ActiveXObject("Msxml2.XMLHTTP");//IE6.0
} catch (e) {
try {
return ActiveXObject("Microsoft.XMLHTTP");//IE5.5及更早
} catch (e) {
alert("什麼瀏覽器？");
throw e;
}
}
}
}
window.onload = function() {
var btn = document.getElementById("btn");//文件載入完畢後執行
btn.onclick = function() {
/*
ajax四步操作，得到伺服器的響應
把響應結果顯示到h1元素中
*/
/*
1.得到非同步物件
*/
var xmlHttp = createXMLHttpRequest();
/*
2、開啟與伺服器的連線
指定請求方式
指定請求的URL(頁面由伺服器傳送過來 在傳送之前已經被伺服器變成html)
指定是否為非同步請求
*/
xmlHttp.open("GET", "<c:url value='/BServlet'/>", true);
/*
3.傳送請求
*/
xmlHttp.send(null);//get請求沒有請求體，也要給出null，不然firefox可能不能傳送
/*
4、給非同步物件的onreadystatechange事件註冊監聽器
*/
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
//雙重判斷：xmlHttp的狀態為4(伺服器響應結束)，以及伺服器響應的狀態碼為200(響應成功)
var doc = xmlHttp.responseXML;
//獲取伺服器的響應結果<xml>
var ele = doc.getElementsByTagName("student")[0];
var number = ele.getAttribute("number");
/* var name = ele.getElementsByTagName("name")[0].text; */
var name;
var age;
var sex;
//處理瀏覽器的差異
if (window.addEventListener) {//一般瀏覽器都有這
name = ele.getElementsByTagName("name")[0].textContent;
age = ele.getElementsByTagName("age")[0].textContent;
sex = ele.getElementsByTagName("sex")[0].textContent;
} else {//IE支援
name = ele.getElementsByTagName("name")[0].text;
age = ele.getElementsByTagName("age")[0].text;
sex = ele.getElementsByTagName("sex")[0].text;
}
var text1 = number + "," + name + "," + age + "," + sex;
document.getElementById("h1").innerHTML = text1;
}
};
};
};
</script>
</head>
<body>
<button id="btn">點選</button>
<h1 id="h1"></h1>
</body>public class BServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
String xml = "<students>" + "<student number='1001'>"
+ "<name>zs</name>" + "<age>18</age>" + "<sex>male</sex>"
+ "</student>" + "</students>";
response.setContentType("text/xml;charset=utf-8");
response.getWriter().print(xml);
}
}