javaWeb(十一）Ajax簡介、Ajax校驗使用者名稱
阿新 • • 發佈：2019-01-10
這種涉及常規操作的新知識點建議直接看教程，畢竟還是要看大神的筆記：菜鳥教程：AJAX
1、Ajax簡介及其應用：
Asynchronous Javascript And XML（非同步JavaScript和XML）
網頁如果想要重新整理區域性內容。 那麼需要重新載入整個網頁。使用者體驗不是很好。 就是為了解決區域性重新整理的問題。 保持其他部分不動，只重新整理某些地方。
並不是新的技術，只是把原有的技術，整合到一起：
- 使用CSS和XHTML來表示。
- 使用DOM模型來互動和動態顯示。
- 使用XMLHttpRequest來和伺服器進行非同步通訊。
- 使用javascript來繫結和呼叫。
1、在jsp中建立超連結並繫結一個函式 （先說Get型別）
<h2>
<a href="" onclick="get()">使用Ajax.Get請求</a>
</h2>
在這個jsp中寫JavaScript程式碼：
<script type="text/javascript">
function get() {
//1、建立XmlHttpRequest
var xmlhttp = new XMLHttpRequest();
//2、當請求被髮送到伺服器時，我們需要執行一些基於響應的任務。這裡是直接彈出響應的內容 寫連線的Servlet並響應一下：
response. 效果如圖：
如果是Post型別，上面的JSP和Servlet都是一樣的，就是要把JavaScript的程式碼改一下就行了：
xmlhttp.open("POST","Demo1Servlet",true);
//設定請求頭
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//要傳送的資料，如果沒有資料就不需要上面這一行了
xmlhttp.send("fname=Henry&lname=Ford");
2、Ajax校驗使用者名稱：
校驗使用者輸入的使用者名稱是否存在，並在旁邊顯示出來
- 編寫登陸頁面index.jsp
在name處繫結函式，當用戶滑鼠離開文字框的時候，用Ajax向Servlet傳送資料
<head>
<base href="<%=basePath%>">
<script type="text/javascript">
function checkName() {
//獲得name的值
var name = document.getElementById("name").value;
var xmlhttp = new XMLHttpRequest();
//3、規定請求的型別
xmlxmlhttp.open("POST", "CheckNServlet", true);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
if (xmlhttp.responseText == 1) {
//在name後面顯示
document.getElementById("span").innerHTML = "<font color='red'>使用者名稱已經存在，請重新輸入</font>";
} else {
document.getElementById("span").innerHTML = "<font color='green'>使用者名稱可用</font>";
}
}
}
//設定請求頭
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//把name傳送到serlvetl
xmlhttp.send("name=" + name);
}
</script>
</head>
<body>
<table border="1px" width="500px">
<tr>
<td>使用者名稱</td>
<td><input type="text" name="name" id="name"
onblur="checkName()"><span id="span"></span></td>
</tr>
<tr>
<td>密碼</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td>郵箱</td>
<td><input type="email" name=""></td>
</tr>
<tr>
<td>簡介</td>
<td><textarea name="" rows="3" cols="600px"></textarea></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="註冊"></td>
</tr>
</table>
</body>
</html>
- Dao程式碼
package CheckNameDao;
import java.sql.SQLException;
public interface CheckDao {
boolean CheckName(String name)throws SQLException;
}
- Dao實現
package CheckNameDaoImpl;
import java.sql.SQLException;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.ScalarHandler;
import com.mchange.v2.c3p0.ComboPooledDataSource;
import CheckNameDao.CheckDao;
public class CheckDaoImpl implements CheckDao {
@Override
// 傳入一個名字，這個名字是從前端的Ajax得來的
public boolean CheckName(String name) throws SQLException {
QueryRunner queryRunner = new QueryRunner(new ComboPooledDataSource());
String sql = "select count(*) from user where name = ?";
// 找到姓名是name的資料的數量
long result = (long) queryRunner.query(sql, new ScalarHandler(), name);
// 如果數量大於0（有這個資料），返回true
return result > 0;
}
}
- Servlet：從Ajax那裡收到使用者輸入的使用者名稱，然後看資料庫裡有沒有這個名字，返回一個bool值
package cn.nupt.CheckNameServlet;
import java.io.IOException;
import java.sql.SQLException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import CheckNameDao.CheckDao;
import CheckNameDaoImpl.CheckDaoImpl;
/**
* Servlet implementation class CheckNameServlet
*/
//@WebServlet("/CheckNameServlet")
public class CheckNameServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
try {
String name = request.getParameter("name");
System.out.println("name="+name);
CheckDao daoImpl = new CheckDaoImpl();
boolean b = daoImpl.CheckName(name);
if (b) {
response.getWriter().println(1);
}
} catch (SQLException e) {
e.printStackTrace();
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}