Ajax(1):get請求

最後更新：2018-12-04 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

上篇文章討論了Ajax技術的理論，本篇文章討論的是實際編程中如何利用XMLHttpRequest非同步地向伺服器發送get請求，並且不考慮中文問題，中文亂碼問題在後續文章中討論！這裡以一個表單註冊過程為例講解Ajax的過程，為簡單起見，使用者名稱並沒有到實際資料庫裡做查詢驗證，這裡只簡單地認為只要使用者名稱為"tom"，即表示已經註冊過，必須重新換一個使用者名稱。使用者名稱文字框的焦點一旦失去，Ajax就開始發送請求。

先看樣本工程的檔案目錄結構：

register.jsp :

<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script>function getXmlHttpRequest(){var xhr=null;if((typeof XMLHttpRequest)!='undefined'){xhr=new XMLHttpRequest();}else{xhr=new ActiveXObject("Microsoft.XMLHttp");}return xhr;}function valiUsername(){var xhr=getXmlHttpRequest();xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status==200){var doc=xhr.responseText;document.getElementById('username_msg').innerHTML=doc;}else{document.getElementById('username_msg').innerHTML='sorry,system error...';}}else{document.getElementById('username_msg').innerHTML='checking...';}}var url="valiusername.do?username="+document.getElementById('n1').value;xhr.open("get",url,true);xhr.send(null);}</script></head><body><form action="register.do" method="post">username:<input type="text" name="username" id="n1" onblur="valiUsername();"><span style="color:red" id="username_msg"></span><br>password:<input type="password" name="password"><br><input type="submit" value="register"></form></body></html>

login.jsp :

<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body><form action="login.do" method="post">username:<input type="text" name="username"><br>password:<input type="password" name="password"><br><input type="submit" value="login"></form></body></html>

web.xml :

<?xml version="1.0" encoding="UTF-8"?><web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">  <servlet>    <servlet-name>UsernameServlet</servlet-name>    <servlet-class>web.UsernameServlet</servlet-class>  </servlet>  <servlet-mapping>    <servlet-name>UsernameServlet</servlet-name>    <url-pattern>*.do</url-pattern>  </servlet-mapping> </web-app>

UsernameServlet.java :

public class UsernameServlet extends HttpServlet {public void service(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {String uri=request.getRequestURI();String path=uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));PrintWriter pw=response.getWriter();if(path.equals("/valiusername")){String username=request.getParameter("username");if(username.equals("tom")){pw.println("username exists,change one...");}else{pw.println("OK");}}if(path.equals("/register")){String username=request.getParameter("username");String password=request.getParameter("password");response.sendRedirect("login.jsp");}}}

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More