標籤：input too java 分數 submit 拋出異常 efi ajax asc
對於在不使用Ajax的情況下，使用JS來進行局部重新整理，主要有如下的幾步：
1. 得到XMLHttpRequest
2. 使用open方法開啟串連
3. 佈建要求頭資訊
4. 註冊onreadystatechange事件，並判斷是否請求響應成功（使用readyState和status）
5. 在請求和響應成功之後，取得伺服器響應的資料，使用responseText
對於直接使用js來自己編寫，這樣工作複雜，步驟多，我們可以將其進行封裝好。同時還有一種更好的方式，就是使用jquery中的ajax方法。
代碼：
javascript：
<script type="text/javascript">// 取得XMLHttpRequest對象，這個需要進行瀏覽器的判斷function getXMLHttp() {try {// 絕大多數的瀏覽器return new XMLHttpRequest();} catch (e) {// ie遊覽器的判定// 判斷ie6.0try {return new ActvieXObject("Msxml2.XMLHTTP");} catch (e) {// 判斷ie5.5及其更早的ie遊覽器try {return new ActvieXObject("Microsoft.XMLHTTP");} catch (e) {alert("無法取得XMLHttpRequest");// 拋出異常資訊throw (e);}}}}// 進行ajax操作,此操作必須在頁面載入完成之後，進行操作window.onload = function() {// 第一步：取得username文字框和font標籤的元素對象var userEle = document.getElementById("username");var fontEle = document.getElementById("msg");// 第二部：註冊username文字框失去焦時間點事件userEle.onblur = function() {// 第三部：得到ajax的請求對象var xmlHttp = getXMLHttp();// 第四部：開啟串連，第一個參數表示使用post方式提交；第二個參數表示提交的地址，第三個參數表示開啟串連xmlHttp.open("POST", "<c:url value=‘/AjaxServlet‘/>?method=ifRegister", true);// 第五步：佈建要求頭資訊xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");// 第六步：發送請求xmlHttp.send("username=" + userEle.value);// 第七步：判斷是否請求和響應成功// 並給xmlHttp的onreadystatechange事件註冊監聽xmlHttp.onreadystatechange = function() {if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {// 表示響應成功// 在此處接收ajax的響應內容var text = xmlHttp.responseText;if(text==‘n‘) {// 將提示資訊，寫到頁面font標籤內fontEle.innerHTML = "*此使用者名稱已存在...";}}};};};</script>
jsp：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>Ajax操作樣本</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"><script type="text/javascript">// 取得XMLHttpRequest對象，這個需要進行瀏覽器的判斷function getXMLHttp() {try {// 絕大多數的瀏覽器return new XMLHttpRequest();} catch (e) {// ie遊覽器的判定// 判斷ie6.0try {return new ActvieXObject("Msxml2.XMLHTTP");} catch (e) {// 判斷ie5.5及其更早的ie遊覽器try {return new ActvieXObject("Microsoft.XMLHTTP");} catch (e) {alert("無法取得XMLHttpRequest");// 拋出異常資訊throw (e);}}}}// 進行ajax操作,此操作必須在頁面載入完成之後，進行操作window.onload = function() {// 第一步：取得username文字框和font標籤的元素對象var userEle = document.getElementById("username");var fontEle = document.getElementById("msg");// 第二部：註冊username文字框失去焦時間點事件userEle.onblur = function() {// 第三部：得到ajax的請求對象var xmlHttp = getXMLHttp();// 第四部：開啟串連，第一個參數表示使用post方式提交；第二個參數表示提交的地址，第三個參數表示開啟串連xmlHttp.open("POST", "<c:url value=‘/AjaxServlet‘/>?method=ifRegister", true);// 第五步：佈建要求頭資訊xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");// 第六步：發送請求xmlHttp.send("username=" + userEle.value);// 第七步：判斷是否請求和響應成功// 並給xmlHttp的onreadystatechange事件註冊監聽xmlHttp.onreadystatechange = function() {if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {// 表示響應成功// 在此處接收ajax的響應內容var text = xmlHttp.responseText;if(text==‘n‘) {// 將提示資訊，寫到頁面font標籤內fontEle.innerHTML = "*此使用者名稱已存在...";}}};};};</script> </head> <body> <div align="center"> <h1>注 冊</h1> <form action="" method="post"> <table> <tr> <td>Username : </td> <td> <input type="text" id="username" name="username" value=""/> </td> <td> <font size=‘2px‘ color=‘red‘ id=‘msg‘></font> </td> </tr> <tr> <td>Password : </td> <td><input type="password" name="password" value=""/></td> <td>${msg }</td> </tr> <tr> <td colspan="2" align="center"> <input style="width: 100px; height: 35px; border-radius:5px; background-color:blue; opacity:0.7" type="submit" value="Register"/> </td> </tr> </table> </form> </div> </body></html>
dao和servlet層：
package cn.geore.ajax;import java.io.IOException;import java.sql.SQLException;import javax.servlet.ServletException;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import priv.geore.toolutils.web.FirmHttpServlet;public class AjaxServlet extends FirmHttpServlet {private AjaxDao dao = new AjaxDao();/** * ajax非同步請求，判斷使用者名稱是否已經被註冊 * * @param request * @param response * @throws ServletException * @throws IOException */public void ifRegister(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {String username = request.getParameter("username");try {Hero hero = dao.findByName(username);System.out.println(hero);if(hero!=null) {response.getWriter().print("n");}} catch (SQLException e) {throw new RuntimeException(e);}}}package cn.geore.ajax;import java.sql.SQLException;import org.apache.commons.dbutils.QueryRunner;import org.apache.commons.dbutils.handlers.BeanHandler;import priv.geore.toolutils.jdbc.FirmQueRunner;public class AjaxDao {private QueryRunner runner = new FirmQueRunner();public Hero findByName(String string) throws SQLException {String sql = "SELECT * FROM hero WHERE heroname=?";return runner.query(sql, new BeanHandler<Hero>(Hero.class), string);}}
photo：
注意：
(1)onreadystatechange 屬性
onreadystatechange 屬性存有處理伺服器響應的函數。
(2)readyState 屬性
readyState 屬性存有伺服器響應的狀態資訊。每當 readyState 改變時，onreadystatechange 函數就會被執行。
| 狀態 | 描敘 |
| 0 | 請求未初始化（在調用 open() 之前） |
| 1 | 請求已提出（調用 send() 之前） |
| 2 | 請求已發送（這裡通常可以從響應得到內容標題部） |
| 3 | 請求處理中（響應中通常有部分資料可用，但是伺服器還沒有完成響應） |
| 4 | 請求已完成（可以訪問伺服器響應並使用它） |
(3)responseText 屬性
可以通過 responseText 屬性來取回由伺服器返回的資料。
Ajax局部重新整理（使用JS操作）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
