1.1 ajax 概述
傳統(tǒng)的網(wǎng)頁如果需要更新內(nèi)容勇婴，必須重載整個網(wǎng)頁頁面械哟。每當用戶向服務器發(fā)送請求从撼，哪怕只是需要更新一點點的局部內(nèi)容，服務器都會將整個頁面進行刷新仍律。這種方式的缺點是:
性能會有所降低 (一點內(nèi)容嘿悬，刷新整個頁面！)
用戶的操作頁面會中斷(整個頁面被刷新了)
1) 什么是Ajax
Ajax 即"Asynchronous Javascript And XML"染苛，是指一種創(chuàng)建交互式網(wǎng)頁應用的網(wǎng)頁開發(fā)技術(shù)鹊漠。
Ajax = 異步 JavaScript 和 XML
Ajax是客戶端與服務器進行交互時主到，可以【不必刷新整個瀏覽器】的情況下茶行，與服務器進行異步通訊的技術(shù)
2) Ajax 的作用
Ajax 可以使網(wǎng)頁實現(xiàn)異步更新。這意味著可以在不重新加載整個網(wǎng)頁的情況下登钥，對網(wǎng)頁的某部分進行更新（局部更新）畔师。
3) Ajax的好處
- 減輕服務器負擔，按需要獲得數(shù)據(jù)牧牢。
- 無刷新更新頁面看锉，減少用戶的實際和心理的等待時間。
- 只更新部分頁面塔鳍，有效利用帶寬
- 主流瀏覽器都支持Ajax
4) 異步與同步
- 瀏覽器訪問服務器的方式
- 同步訪問: 客戶端必須等待服務器端的響應,在等待過程中不能進行其他操作
- 異步訪問: 客戶端不需要等待服務的響應,在等待期間,瀏覽器可以進行其他操作
1.2 JS方式ajax的實現(xiàn)(了解)
JS的ajax：出現(xiàn)最早伯铣。使用一個對象XmlHttpRequest對象。專門用于進行ajax請求發(fā)送轮纫，和響應的接收
使用ajax發(fā)請求腔寡，使用ajax接收響應，使用JS進行頁面刷新掌唾。
-
缺點:
- 若使用JS的AJAX技術(shù)放前，為了實現(xiàn)簡單功能忿磅，就需要書寫大量復雜代碼。
- JS的AJAX代碼凭语，瀏覽器兼容性比較差葱她。
前端JS代碼,復制即可
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>new jsp</title>
<script>
function run() {
//1.創(chuàng)建 核心對象
var xmlhttp;
//2.判斷瀏覽器類型
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
} else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//3.建立連接
/**
* 三個參數(shù):
* 1.請求方式 get post
* 2.請求資源的路徑
* 3.是否為異步 是 or 否
*/
xmlhttp.open("GET","/login?username=tom",true);
//4.發(fā)送請求
xmlhttp.send();
//5.獲取響應結(jié)果
/**
* 什么時候獲取響應數(shù)據(jù)?
* 在服務器響應成功后獲取
*/
//監(jiān)聽readyState狀態(tài)改變
xmlhttp.onreadystatechange=function() {
//readyState==4 響應已經(jīng)就緒, 200 訪問成功
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
//獲取響應數(shù)據(jù)
var text = xmlhttp.responseText;
alert(text);
}
}
}
</script>
</head>
<body>
<input type="button" value="發(fā)送異步請求" onclick="run()"><br>
局部刷新 <input type="text">
</body>
</html>
@WebServlet("/login")
public class LoginServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//1.獲取請求數(shù)據(jù)
String username = req.getParameter("username");
//打印 username
System.out.println(username);
resp.getWriter().write(username);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req, resp);
}
}
1.3 jQuery框架的ajax
5.3.1 JQuery框架的ajax簡介
jquery是一個優(yōu)秀的js框架，自然對js原生的ajax進行了封裝似扔，封裝后的ajax的操 作方法更簡潔吨些，功能更強大.
與ajax操作相關(guān)的jquery方法有如下幾種，但開發(fā)中 經(jīng)常使用的有三種：POST GET AJAX
1.3.2 GET請求方式
通過遠程 HTTP GET 請求載入信息虫几。這是一個簡單的 GET 請求功能锤灿，如需復雜的ajax參數(shù)設置請使用$.ajax
Get請求方式語法
$.get(url,data,callback,type)
- 參數(shù)1:
url請求路徑 - 參數(shù)2:
data請求時攜帶的數(shù)據(jù)
格式:key=value或者 {username=’baby’,pwd:666} - 參數(shù)3:
callback響應成功后的回調(diào)函數(shù) - 參數(shù)4:
type響應的數(shù)據(jù)類型 text html xml json
代碼示例
//JQuery get方式發(fā)送異步請求
function run2() {
//1.參數(shù)1 url
var url = "/login";
//2.參數(shù)2 數(shù)據(jù)
var data = {username:"jack"};
//3.發(fā)送get請求
$.get(url,data,function (param) {
//data響應回來的內(nèi)容體
alert("響應成功! 響應數(shù)據(jù): " + param);
},"text");
}
1.3.3 POST請求方式
通過遠程 HTTP POST 請求載入信息。這是一個簡單的 POST 請求功能辆脸，如需復雜的ajax參數(shù)設置請使用$.ajax
Post請求方式語法
**$.post(url,data,callback,type)**
里面的四個參數(shù)和get方式是一樣, 不一樣的是請求方式的不同
代碼示例
//JQuery post方式發(fā)送異步請求
function run3() {
//1.參數(shù)1 url
var url = "/login";
//2.參數(shù)2 數(shù)據(jù)
var data = {username:"lucy"};
//3.發(fā)送get請求
$.post(url,data,function (param) {
//data響應回來的內(nèi)容體
alert("響應成功! 響應數(shù)據(jù): " + param);
},"text");
}
1.3.4 Ajax請求方式
$.ajax()方法可以更加詳細的設置底層的參數(shù)但校。該方法通常用于其他方法不能完成的請求。
ajax請求方式語法:
方式1: jQuery.ajax({[settings]})
方式2: $.ajax({})
settings是一個js字面量形式的對象啡氢，格式是鍵值對{name:value,name:value }状囱，常用的name屬性名如下：
代碼示例
Ajax方式 發(fā)送請求
function run4() {
$.ajax({
url:"/login",
async:true, //是否異步
data:{username:"tom"},
type:"POST", //請求方式
dataType:"text", //返回數(shù)據(jù)的數(shù)據(jù)類型
success:function (param) {
alert("響應成功!! " + param)
},
error:function () {
alert("響應失敗!!")
}
});
}
1.4 案例: 檢測用戶名是否已經(jīng)被注冊
需求:用戶輸入用戶名,鼠標移除后, 對用戶名進行判斷,提示用戶名是否可用
步驟:
準備Servlet ,對用戶名進行校驗,并返回結(jié)果(是否可用)
為頁面輸入框,綁定鼠標移除事件
進行異步請求,獲取響應結(jié)果
根據(jù)結(jié)果,動態(tài)添加 HTML代碼
后臺 Servlet
@WebServlet("/checkName")
public class CheckNameServelt extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
//獲取姓名
String username = req.getParameter("username");
//封裝數(shù)據(jù)
HashMap<String,Object> map = new HashMap<>();
//判斷用戶是否存在
if("tom".equals(username)){
map.put("flag",true);
map.put("msg","用戶名已經(jīng)被占用!");
String data = JSON.toJSONString(map);
resp.getWriter().print(data);
}else{
//用戶名未被使用
map.put("flag",false);
map.put("msg","用戶名可以使用!");
String data = JSON.toJSONString(map);
resp.getWriter().print(data);
}
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req, resp);
}
}
前臺JSP
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>new jsp</title>
<script typet="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function() {
$("#username").blur(function () {
//獲取用戶名
var name = $(this).val();
//判斷用戶名不為空
if(name != null && name != ""){
$.ajax({
url:"/checkName",
type:"GET",
data:{username:name},
dataType:"json",
success:function (data) {
if(data.flag){
//設置span內(nèi)容體
$("#spanMsg").html("<font color='red'>" + data.msg+ "</font>");
}else if(!data.flag){
$("#spanMsg").html("<font color='green'>"+ data.msg + "</font>");
}
},
error:function () {
alert("請求處理失敗!")
}
});
}
})
});
</script>
</head>
<body>
<form action="#" method="post">
用戶名: <input type="text" id="username" name="username" placeholder="請輸入用戶名">
<span id="spanMsg" style="color:red"></span><br>
密碼: <input type="text" name="password" placeholder="請輸入密碼"><br>
</form>
</body>
</html>
