jQuery的AJAX實(shí)現(xiàn)
??其實(shí)坦白的說(shuō) 就是我也比清除底層是什么樣子的，但是就是$.ajax就是AJAX的封裝，更簡(jiǎn)單是使用，這里我就直接講解一下使用步驟哈哈哈傍药。
先說(shuō)一下語(yǔ)法
- $,jQuery
- ajax()
- 參數(shù)
- ajax()
{
type:設(shè)置請(qǐng)求的類型磺平，常用的有GET和POST
url:設(shè)置請(qǐng)求的地址
data:設(shè)置POST方式提交的數(shù)據(jù)
success:請(qǐng)求響應(yīng)完成后要執(zhí)行的方法
}
-
JS中的{}對(duì)象
- {}代表一個(gè)對(duì)象
- 屬性：
- {屬性名稱:屬性值,屬性名稱2:屬性值2}
- var stu = {name:"zhangsan",age:18}
- stu.name
- 方法:
- {方法名:function(){}}
- var stu = {sum:function(a,b){return a + b;}}
- stu.sum()
- 屬性：
- {}代表一個(gè)對(duì)象
-
不管是原生的還是jQuery的AJAX,需要設(shè)置5個(gè)部分
- type:請(qǐng)求方式
- url:請(qǐng)求路徑
- data:請(qǐng)求參數(shù)
- success:回調(diào)函數(shù)
- 對(duì)于post請(qǐng)求,設(shè)置一個(gè)Content-Type ---jQuery已經(jīng)幫我們實(shí)現(xiàn)了
ajax的請(qǐng)求方式
- get請(qǐng)求
$.ajax({
type:"GET",
url:"/myJQueryAJAX/JQueryAJAXServlet?username=zhangsan",
success:function(msg) {
//alert(msg);
$("#div01").html(msg);
}
});
- post請(qǐng)求
$.ajax({
type:"POST",
url:"/myJQueryAJAX/JQueryAJAXServlet",
data:"username=zhangsan",
success:function(msg) {
$("#div01").html(msg + "post");
}
});
jQuery的其他AJAX方法
-
get
- 兩個(gè)參數(shù)
- url:設(shè)置請(qǐng)求的地址
- fn:設(shè)置請(qǐng)求響應(yīng)完成后要執(zhí)行的方法
- 三個(gè)參數(shù)
- url:設(shè)置請(qǐng)求的地址
- data:設(shè)置向服務(wù)器提交的數(shù)據(jù)
- "username=zhangsan&password=123"
- {username:"zhangsan",password:"123"}
- fn:設(shè)置請(qǐng)求響應(yīng)完成后要執(zhí)行的方法
- 兩個(gè)參數(shù)
-
post
- 三個(gè)參數(shù)
- url:設(shè)置請(qǐng)求的地址
- data:設(shè)置向服務(wù)器提交的數(shù)據(jù)
- "username=zhangsan&password=123"
- {username:"zhangsan",password:"123"}
- fn:設(shè)置請(qǐng)求響應(yīng)完成后要執(zhí)行的方法
- 三個(gè)參數(shù)
-
load
- 一個(gè)參數(shù)
- url
- 兩個(gè)參數(shù)
- url
- data
- 一個(gè)參數(shù)
-
注意:
- load方法是由標(biāo)簽來(lái)調(diào)用,他可以直接把服務(wù)器傳過(guò)來(lái)的數(shù)據(jù)塞到調(diào)用它的這個(gè)jQuery對(duì)象里面(標(biāo)簽)
- load方法會(huì)根據(jù)參數(shù)的不同,選擇不同的提交方式,只有第二個(gè)參數(shù)是js對(duì)象,才會(huì)用post方法
- 實(shí)際開發(fā)中 get和post
- 如果你僅僅是想得到一些數(shù)據(jù),用get就可以 某一頁(yè)商品的信息 傳一個(gè)頁(yè)碼
- 像表單登錄,驗(yàn)證,重要程度比較高的,用post請(qǐng)求,相對(duì)的安全!
案例異步加載所有學(xué)生信息 我這里就提供jsp部分代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
<script type="text/javascript">
//展示所有學(xué)生信息
function findAll() {
$.ajax({
type:"GET",
url:"/myJQueryAJAX/StudentServlet",
success:function(msg) {
//$("table").html($("table").html() + msg);
$("table").append(msg);
}
});
}
$(function() {
findAll();
});
</script>
</head>
<body>
<table border="1" width="500">
<tr>
<td>姓名</td>
<td>性別</td>
<td>年齡</td>
</tr>
</table>
</body>
</html>
