Ajax概述和判斷用戶名是否存在的簡單代碼練習
阿新 • • 發佈：2019-03-26
count tint on() 顯示 enter con execute -c 動態
在本代碼中主要體現，Ajax實現了部分位置的刷新。不需要重新刷新網頁，重新請求服務器。下面用過代碼來對Ajax更深的認識
這裏需要創建，一個jsp文件（顯示登錄界面），js文件(對Ajax的主要設置)，一個servlet（主要用作和數據庫連接和邏輯的控制）
1.在web中創建一個Lession7jsp頁面，jsp中主要寫了登錄頁面的用戶名和密碼和按鈕
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>AJAX學習-用戶登錄</title> <script type="text/javascript" src="js/Lession7.js"></script>//對後面js頁面進行調用。 </head> <body> <table align="center" border="1px" cellspacing="0px" cellpadding="10px"width="500"> <tr> <td align="right" width="30%">用戶名：</td> <td align="left" width="70%"> <input type="text" name="name" id="user"/><span id="span"></span> </td> </tr> <tr> <td align="right"width="30%">密碼：</td> <td align="left" width="70%"> <inputtype="password" name="pwd" id="pwd"/></span> </td> </tr> <tr> <td align="center" colspan="2"> <input type="button" value="註冊"> </td> </tr> </table> </body> </html>
2.在web中新建一個叫js的文件夾，在js文件夾裏面新建Lession.js文件。Ajax的設置都是JS中設置的，所以這個js文件就是Ajax學習的精髓和重點了。
/window.onload的意思是，頁面加載就會顯示這個方法
window.onload = function() {
//獲取jsp頁面中的用戶名<input name="user">標簽的name
var nameObj = document.getElementById("user")
//nameObj.onblur:進行綁定，當失去焦點時，就會調用下面的函數
nameObj.onblur = function () {
//獲得標簽的name屬性的值，以此來獲取瀏覽器輸入的內容
var name = this.value;
/*alert(name);*/
//第一步：初始化XMLHttpRequest,創建異步對象，因為其他瀏覽器和老版本的IE瀏覽器創建對象的過程不一樣，所有這裏需要判斷
//（第一步對AJAX初始化，在網上搜索有好多，不用可以把這一步的代碼背下來，理解即可）
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//第二步：指定回調函數，並對服務器的交互狀態進行判斷
//onreadystatechange是AJAX對象的一個屬性，因為Ajax是異步處理的，所以需要一個這樣的回調
xmlhttp.onreadystatechange=function(){
//readyState對服務器的狀態，status是HTTP的狀態
if(xmlhttp.readyState==4&&xmlhttp.status==200){
//這裏用到了JSON知識點，主要實現了把serlvt頁面的數據傳給js
//所以，這裏的數據是servlt裏傳過來的。
var obj = eval("("+xmlhttp.responseText+")");// eval()獲取返回值
if (obj.flag==0){
document.getElementById("span").innerText="用戶名可用";
}else if (obj.flag==1) {
document.getElementById("span").innerText="用戶名已經存在！";
}
}
}
//第三步：用open（"1","2","3"）連接服務器 ,
// 1裏面放post或者get，2裏面放的是servlet在web.xml中定義的。3：true代表異步處理
xmlhttp.open("post","/ServletXml?name="+name,true);
//第四步：向服務器發送請求，
xmlhttp.send(null);
}
}
3.在src中新建servlet，我這個項目連接了mysql數據庫，如果沒有數據庫，可以直接把裏面的數據寫死了。這兩個可以選擇一個測試。
例如：1.
@Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String uname = request.getParameter("uname"); //利用JDBC檢索uname是否在用戶表中存在 PrintWriter out = response.getWriter(); //向客戶端輸出響應結果 out.print("{‘flag‘:1}"); }
例如2.我的是動態連接數據庫的。
package com.wgh; 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; import java.sql.*; @WebServlet(name = "ServletXml") public class ServletXml extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String name = request.getParameter("name"); System.out.println(name); PrintWriter pw = response.getWriter(); String[] str = new String[10]; //進行數據庫鏈接，查詢數據庫中用戶名是否存在的操作 try { Class.forName("com.mysql.jdbc.Driver"); String url = "jdbc:mysql://localhost:3306/z_shop"; String username = "root"; String pwd = "root"; Connection conn = DriverManager.getConnection(url,username,pwd); String sql = "select count(*) FROM td_name where Username=? "; PreparedStatement ps =conn.prepareStatement(sql); ps.setString(1,name); ResultSet rs = ps.executeQuery(); rs.next(); System.out.println(rs.getInt(1)); if (rs.getInt(1)==0) { pw.print("{‘flag‘:0}"); } else{ pw.print("{‘flag‘:1}"); } } catch (ClassNotFoundException e) { e.printStackTrace(); } catch (SQLException e) { e.printStackTrace(); } System.out.println(name); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request,response); } }
最後記得在web.xml文件中進行註冊哦！
<servlet> <servlet-name>ServletXml</servlet-name> <servlet-class>com.wgh.ServletXml</servlet-class> </servlet> <servlet-mapping> <servlet-name>ServletXml</servlet-name> <url-pattern>/ServletXml</url-pattern> </servlet-mapping>
註意：
1.本項目中用的JSON知識點，是需要導JSON的jar包的哦，
2.在src中Servle一定要放在包中，默認包可能不識別。
如果有錯的地方請多多包含。代碼我運行過，可以起來的。
Ajax概述和判斷用戶名是否存在的簡單代碼練習