js ajax原生寫法
jsp程式碼：
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> </head> <body> <form action="/servlet/getFromServlet" method="post"> 使用者名稱：<input type="text" name="username" id="username" onblur="ckname()"> <span id="msg"></span> <br/> 密碼：<input type="password" name="password" id=""> <br/> <input type="submit" value="提交"> </form> <script type="text/javascript"> function ckname() { var username = document.getElementById("username").value; var msg = document.getElementById("msg"); if(username==""){ msg.innerHTML = "使用者名稱不能為空"; return; } var xhr; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else if(window.ActiveXObject){ xhr = new XMLHttpRequest("Microsoft.XMLHTTP"); } xhr.onreadystatechange = function () { if(xhr.readyState==4){ if(xhr.status==200){ if(xhr.response){ msg.innerHTML = "使用者名稱可用"; } } } } //建立連線 xhr.open("get","${pageContext.request.contextPath}/servlet/getFromServlet?name="+username+"&time="+new Date().getTime()); //傳送請求 xhr.send(null); } </script> </body> </html>
servlet程式碼：
package com.mypage.servlet; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.io.PrintWriter; /** * Created by 44693 on 2018/10/15. */ @WebServlet(name = "getFromServlet") public class getFromServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request,response); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { PrintWriter out = response.getWriter(); String user = request.getParameter("username"); if("tom".equals("user")){ out.print(true); }else{ out.print(false); } } }
一、什麼是Ajax
Ajax：（Asynchronous JavaScript And XML）指非同步 JavaScript 及 XML
不是一種新的程式語言，而是一種用於建立更好更快以及互動性更強的 Web 應用程式的技術，是基於JavaScript、XML、HTML、CSS新用法
Ajax：只重新整理區域性頁面的技術
- JavaScript：更新區域性的網頁
- XML：一般用於請求資料和響應資料的封裝
- XMLHttpRequest物件：傳送請求到伺服器並獲得返回結果
- CSS：美化頁面樣式
- 非同步：傳送請求後不等返回結果，由回撥函式處理結果
JavaScript中XMLHttpRequest物件是整個Ajax技術的核心，它提供了非同步傳送請求的能力
構造方法
不同瀏覽器，甚至相同瀏覽器的不同版本，獲取該物件的方式是不同的。
方法：
open() "get|post" ，"url?name=tom" ，"true|false"
send() 傳送請求 。可以帶引數 或 null
setRequestHeader()
屬性
readyState：型別short；只讀
responseText：型別String；只讀
responseXML：型別Document；只讀
status：型別short；只讀
事件處理器
onreadystatechange
二、常用方法
| 方法名 |
說 明 |
| open(method,URL,async) |
建立與伺服器的連線 method引數指定請求的HTTP方法,典型的值是GET或POST URL引數指請求的地址 async引數指定是否使用非同步請求，其值為true或false |
| send(content) |
傳送請求 content引數指定請求的引數 |
| setRequestHeader(header,value) |
設定請求的頭資訊 |
三、常用屬性
- onreadystatechange：指定回撥函式
- readyState: XMLHttpRequest的狀態資訊
| 就緒狀態碼 |
說 明 |
| 0 |
XMLHttpRequest物件沒有完成初始化 即：剛剛建立。 |
| 1 |
XMLHttpRequest物件開始傳送請求 呼叫了open方法，但還沒有呼叫send方法。請求還沒有發出 |
| 2 |
XMLHttpRequest物件的請求傳送完成 send方法已經呼叫，資料已經提交到伺服器，但沒有任何響應 |
| 3 |
XMLHttpRequest物件開始讀取響應，還沒有結束 收到了所有的響應訊息頭，但正文還沒有完全收到 |
| 4 |
XMLHttpRequest物件讀取響應結束 一切都收到了 |
- status：HTTP的狀態碼
| 狀態碼 |
說 明 |
| 200 |
伺服器響應正常 |
| 400 |
無法找到請求的資源 |
| 403 |
沒有訪問許可權 |
| 404 |
訪問的資源不存在 |
| 500 |
伺服器內部錯誤 |
- responseText：獲得響應的文字內容
- responseXML：獲得響應的XML文件物件 documednt
注：就緒狀態是4而且狀態碼是200，才可以處理伺服器資料
使用Ajax驗證使用者名稱是否存在實現步驟：
- 使用文字框的onBlur事件
- 使用Ajax技術實現非同步互動
- 建立XMLHttpRequest物件
- 通過 XMLHttpRequest物件設定請求資訊
- 向伺服器傳送請求
- 建立回撥函式，根據響應狀態動態更新頁面