jsp+ajax如何發送GET請求

2024-09-05 00:18:57

字體：大中小

來源：轉載

供稿：網友

今天錯新小編將為大家介紹jsp+ajax發送GET的請求，相信這個問題是大家在學習jsp的時候都遇到過，那么你知道jsp+ajax如何發送GET請求嗎？下面我們就一起去看看吧。

Ajax發送GET請求

這里用一個實例演示Ajax發送get請求，實例具體要求為一個注冊頁面，當用戶填寫完用戶名稱時，該輸入框失去焦點后會通過Ajax向后臺發送驗證信息，如果用戶名不是admin則通過驗證，否則不通過驗證。

下面先看JSP頁面具體信息：

復制代碼代碼如下:

<form action="servlet/LoginServlet" method="post">
??? <table>
??????? <tr>
??????????? <td>用戶賬號：</td>
??????????? <td><input type="text" name="username" onblur="checkUser(this)"/></td>
??????? </tr>
??????? <tr>
??????????? <td>用戶密碼：</td>
??????????? <td><input type="password" name="password"/></td>
??????? </tr>
??????? <tr>
??????????? <td><input type="submit" value="注冊"/></td>
??????????? <td><input type="reset" value="重置"></td>
??????? </tr>
??? </table>
</form>

這里后臺處理信息用的是Servlet進行處理

首先看web.xml配置信息

復制代碼代碼如下:

<servlet>
<servlet-name>LoginServlet</servlet-name>
<servlet-class>login.LoginServlet</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>LoginServlet</servlet-name>
<url-pattern>/servlet/LoginServlet</url-pattern>
</servlet-mapping>

然后看具體的servlet類的doGet方法

復制代碼代碼如下:

public void doGet(HttpServletRequest request, HttpServletResponse response)
??????? throws ServletException, IOException {

??????? response.setContentType("text/html;charaet=UTF-8");
??????? PrintWriter out = response.getWriter();
??????? String name=request.getParameter("username");
??????? System.out.println(name);
??????? if(name.equals("admin"))
??????????? out.print(false);
??????? else
??????????? out.print(true);
??????? out.flush();
??????? out.close();
}

在Servlet類中做一個簡單的驗證。

在JSP的表單中，對輸入用戶名稱的輸入框設置了失去焦點的事件，也就是onblur事件。下面看javascript代碼。

復制代碼代碼如下:

<script type="text/javascript">
??? //創建XMLHttpRequest
??? function createXmlHttpRequest(){
??????? if(window.XMLHttpRequest){
??????????? return new XMLHttpRequest();
??????? }else{
??????????? return new ActiveXObject("Microsoft.XMLHTTP");
??????? }
??? }
??? //當用戶賬號輸入框失去焦點時調用該方法
??? function checkUser(obj){
??????? //獲取輸入框輸入的值
??????? var user = obj.value;
??????? //如果輸入框中的值為空，那么彈窗提示，并且讓該輸入框獲得焦點
??????? if(!user){
??????????? alert("用戶名不能為空！");
??????????? obj.focus();
??????????? return;
??????? }
??????? //不為空時，使用Ajax請求向后臺發送信息，驗證該用戶名是否可用
??????? //get請求字符串
??????? var url="servlet/LoginServlet?username="+user;
??????? //調用方法創建XMLHttpRequest對象
??????? XmlHttpRequest = createXmlHttpRequest();
??????? //設置回調函數
??????? XmlHttpRequest.onreadystatechange=finish;
??????? //初始化xmlhttprequest
??????? XmlHttpRequest.open("GET",url,true);
??????? //發送請求
??????? XmlHttpRequest.send(null);
??? }
??? //回調函數
??? function finish(){
??????? if(XmlHttpRequest.readyState == 4&& XmlHttpRequest.status == 200){
??????????? var result = XmlHttpRequest.responseText;
??????????? if(result =="true"){
??????????????? alert("用戶名可用！");
??????????? }else{
??????????????? alert("用戶名不可用！");
??????????? }
??????? }
??? }
</script>