jquery框架對於ajax的封裝
1.
jquery封裝ajax加載機制
$.ajax({
});
$.ajax({
type:get|post, // 異步請求的提交方式,若不寫，默認get方式,相當於method
url:"/ajax/check", //提交的路徑，如：/ajax/check 若是get則後直接跟參數/ajax/check?name=123&password=123
data:"name=123&password=123", //若是post，則在data後傳，data等效於xhr.send
success：function(result){//響應處理
result等效於 xhr.responseText
result爲形參，隨意寫值
}
});實例代碼
註冊信息使用juery對於ajax的封裝
//首先需要引入jquery-1.8.3.js插件,放在WebContent下面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
//當name丟失焦點時調用此函數
$("#name").blur(function(){
//1.獲得文本框中的內容
var name = $(this).val();
//2.發送ajax異步請求$.ajax();
$.ajax({
type:"post",
url:"CheckName",
data:"name="+name,
success:function(result){
$("#msg").text(result);
}
});
});
});
</script>
<title>註冊</title>
</head>
<body>
<table>
<tr>
<td>UserName</td>
<td><input type="text" name="name" id="name"/><span id="msg"></span></td>
</tr>
<tr>
<td>UserPassword</td>
<td><input type="text" name="password" id="password"/><span id="msg"></span></td>
</tr>
<tr>
<td>UserEmail</td>
<td><input type="text" name="email" id="email"/><span id="msg"></span></td>
</tr>
<tr>
<td><input type="button" value="註冊"/></td>
</tr>
</table>
</body>
</html>
//CheckNameServlet請見Day01get中2.
load:加載局部頁面
網站，首頁，大頁面會切分爲多個頁面
先加載出來main頁面，main中部分內容會經過ajax繼續加載，防止網頁卡頓，main頁面加載慢的問題。
$("#B").load("Bload-query2.jsp"); //load 頁面的局部加載此處使用的jsp，以後則路徑爲servlet或controller路徑，由此返回jsp頁面
實例代碼
先加載Aload-query1.jsp頁面，後使用ajax方法加載其餘內容Bload-query2.jspAload-query1.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
window.setTimeout(function(){//模擬網絡卡頓，加載速度慢的效果
$("#B").load("Bload-query2.jsp"); //load 頁面的局部加載
},5000);
});
</script>
<title>load</title>
</head>
<body>
AAAAAAAA
<br>
AAAAAAAA
<br>
AAAAAAAA
<br>
AAAAAAAA
<br>
AAAAAAAA
<br>
AAAAAAAA
<br>
AAAAAAAA
<br>
AAAAAAAA
<br>
AAAAAAAA
<br>
AAAAAAAA
<br>
AAAAAAAA
<br>
AAAAAAAA
<br>
AAAAAAAA
<br>
<div id="B">
loadding……………………
</div>
</body>
</html>Bload-query2.jsp
BBBBBBBB<br>
BBBBBBBB<br>
BBBBBBBB<br>
BBBBBBBB<br>
BBBBBBBB<br>
BBBBBBBB<br>
BBBBBBBB<br>
BBBBBBBB<br>
BBBBBBBB<br>
BBBBBBBB<br>