AJAX：即“Asynchronous Javascript And XML”（異步的JavaScript和XML），是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)，尤其是在一種在無需重新加載整個網(wǎng)頁的情況下撇叁，能夠更新部分網(wǎng)頁的技術(shù)一疯。
傳統(tǒng)Web開發(fā)
World Wide Web（簡稱Web）：是隨著Internet的普及使用而發(fā)展起來的一門技術(shù)柔纵，其開發(fā)模式是一種請求→刷新→響應(yīng)的模式笆载，每個請求由單獨的一個頁面來顯示，發(fā)送一個請求就會重新獲取這個頁面鳍征。
!
驗證用戶名是否注冊
index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<script src="js/jq.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function () {
$('input[name=username]').blur(function () {
// 檢查用戶名是否可以被注冊黍翎，如果不可以，響應(yīng)失敗信息艳丛，否則響應(yīng)成功信息
// 發(fā)送ajax請求
if($('input[name=username]').val() != null && $('input[name=username]').val().trim() != ''){
$.ajax({
/*url指定接收請求的地址*/
url : "${pageContext.request.contextPath}/checkUsername",
/*data填寫發(fā)送的數(shù)據(jù)*/
data : {
"name" : $('input[name=username]').val()
},
// type指定請求類型
type : "get",
// dataType指定響應(yīng)信息格式
dataType : "json",
// 指定成功的回調(diào)函數(shù),res是響應(yīng)回來的信息
success : function (res) {
if(res == 0){
$('#msg').html("注冊失敗").css('color','red');
$('button').attr('disabled','disabled');
}else{
$('#msg').html("注冊成功").css('color','green');
$('button').removeAttr('disabled');
}
},
// 指定失敗的回調(diào)函數(shù)
error : function(){
alert("服務(wù)響應(yīng)失敗");
},
// 異步請求
async : true
})
}
})
})
</script>
</head>
<body>
<h1>Reg Page</h1>
<form action="${pageContext.request.contextPath}/reg" method="post">
<input type="text" name="username" placeholder="用戶名"><span id="msg"></span><br><br>
<input type="password" name="password" placeholder="密碼">
<button>注冊</button>
</form>
CheckUsernameServlet.java
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;
@WebServlet(name = "CheckUsernameServlet",urlPatterns = "/checkUsername")
public class CheckUsernameServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 獲取請求參數(shù)
String name = request.getParameter("name");
// 調(diào)dao查詢該用戶名是否存在
if("mike".equals(name)){
// 失敗
response.getWriter().println(0);
}else{
response.getWriter().println(1);
}
}
}
根據(jù)id查詢用戶和查詢?nèi)坑脩?響應(yīng)ajax只能響應(yīng)字符串給res
把對象序列化成字符串匣掸，需要使用jackson或fastjson，可以自己到maven庫下載
serch.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="js/jq.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function () {
$('#serch1').click(function () {
$.ajax({
url : "${pageContext.request.contextPath}/serchById",
data:{
"userid" : $('#userid').val()
},
type : 'get',
dataType : 'json',// 解析json字符串
success : function (res) {
$('#box').html(res.id+","+res.name+","+res.sex+","+res.age)
},
error : function () {
alert("響應(yīng)失敗")
},
async : true
})
})
$('#serch2').click(function () {
$.ajax({
url : "${pageContext.request.contextPath}/serchAll",
data:{},
type : 'get',
dataType : 'json',// 解析json字符串
success : function (res) {
$('#box').html('');
for(i in res){
$('#box').append(res[i].name+","+res[i].age+"<br>")
}
},
error : function () {
alert("響應(yīng)失敗")
},
async : true
})
})
})
</script>
</head>
<body>
<h1>Serch Page</h1>
<p>
<input type="text" id="userid">
<button type="button" id="serch1">查詢</button>
<button type="button" id="serch2">查詢?nèi)?lt;/button>
</p>
<div id="box"></div>
</body>
</html>
SerchByIdServlet.java
import com.alibaba.fastjson.JSON;
import com.neuedu.pojo.Userinfo;
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;
@WebServlet(name = "SerchByIdServlet",urlPatterns = "/serchById")
public class SerchByIdServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 獲取請求參數(shù)
String userid = request.getParameter("userid");
// 調(diào)dao層查詢該id員工所有信息
Userinfo userinfo = new Userinfo();
userinfo.setId(Integer.parseInt(userid));
userinfo.setAge(30);
userinfo.setName("leo");
userinfo.setSex("男");
// 響應(yīng)ajax請求
// JSON.toJSONString會把對象序列化成json字符串
String str = JSON.toJSONString(userinfo);
System.out.println(str);
response.getWriter().println(str);
}
}
SerchAllServlet.java
import com.alibaba.fastjson.JSON;
import com.neuedu.pojo.Userinfo;
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.util.ArrayList;
import java.util.List;
@WebServlet(name = "SerchAllServlet",urlPatterns = "/serchAll")
public class SerchAllServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Userinfo userinfo1 = new Userinfo();
userinfo1.setId(1001);
userinfo1.setName("tom");
userinfo1.setSex("man");
userinfo1.setAge(30);
Userinfo userinfo2 = new Userinfo();
userinfo2.setId(1002);
userinfo2.setName("lucy");
userinfo2.setSex("girl");
userinfo2.setAge(33);
Userinfo userinfo3 = new Userinfo();
userinfo3.setId(1003);
userinfo3.setName("lilei");
userinfo3.setSex("man");
userinfo3.setAge(20);
List<Userinfo> list = new ArrayList<>();
list.add(userinfo1);
list.add(userinfo2);
list.add(userinfo3);
String str = JSON.toJSONString(list);
System.out.println(str);
response.getWriter().println(str);
}
}
ajax簡化寫法
<script>
$(function () {
$('#reg').click(function () {
$.post(
"${pageContext.request.contextPath}/user/reg",
{
"username": $('input[name=username]').val(),
"password":$('input[name=password]').val()
},
function success(res) {
if(res == 0){
$('#msg').html("注冊失敗").css('color','red');
}else{
window.location.href = "${ pageContext.request.contextPath }/gologin";
}
},
"json"
);
})
})
</script>
