目標(biāo)
- 簡(jiǎn)介
- load
- ajax
- get/post
- 表單序列化
第1節(jié)課 ajax概念和例子
AJAX:Asynchronous JavaScript and XML
jquery ajax請(qǐng)求特點(diǎn)優(yōu)勢(shì)：1）異步請(qǐng)求 2）局部刷新頁(yè)面
原生ajax例子
https://www.cnblogs.com/wangxuerui/p/5292421.html
readyState
//0:send方法還沒(méi)有被調(diào)用
//1:已經(jīng)調(diào)用了send方法谓苟，請(qǐng)求還在處理
//2:send方法已完成 整個(gè)應(yīng)答已接收
//3:正在解析應(yīng)答
//4:應(yīng)答解析完成
$.ajax制作用戶名驗(yàn)證功能
reg.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">
<title>Insert title here</title>
<script src="<%=request.getContextPath()%>/js/jquery-1.11.2.min.js"></script>
<script>
$(function(){
$("#username").blur(function(){
var username=$("#username").val();
//ajax請(qǐng)求到后臺(tái)，進(jìn)行驗(yàn)證协怒。而且攜帶著用戶名
$.ajax({
type: "POST",
url: "<%=request.getContextPath()%>/TestLoadServlet",
data: "username="+username,
success: function(msg){
alert( "Data Saved: " + msg );
$("span").html(msg);
}
});
})
})
</script>
</head>
<body>
<form action="#">
<%--用戶注冊(cè)涝焙，用戶名失去焦點(diǎn)時(shí)，用ajax請(qǐng)求后臺(tái)孕暇，判斷用戶名的合法性仑撞，在input框下面直接顯示是否合法 --%>
用戶名：<input type="text" name="username" id="username"/><span></span>
密碼：<input type="password" name="password" id="password"/>
確認(rèn)密碼：<input type="password" name="repassword" id="repassword"/>
<input type="submit" value="注冊(cè)"/>
</form>
</body>
</html>
TestLoadServlet
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username=request.getParameter("username");
//jdbc進(jìn)行判斷
response.getWriter().append("用戶名合法");
}
第2節(jié)課
.load
載入遠(yuǎn)程 HTML 文件代碼并插入至 DOM 中。
1） 載入靜態(tài)頁(yè)
<script src="../js/jquery-1.11.2.min.js"></script>
<script>
$(function () {
$("#content").load("../chap04/05-表格操作.html");
})
</script>
<h2>ajax load靜態(tài)頁(yè)面</h2>
<div id="content">
</div>
load動(dòng)態(tài)頁(yè)
1）test.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">
<title>Insert title here</title>
<script src="<%=request.getContextPath()%>/js/jquery-1.11.2.min.js"></script>
<script>
$(function() {
$("#content").load("<%=request.getContextPath()%>/TestLoadServlet", {username : 'wang.qj'}, function(response, status, xhr) {
alert("response" + response);
alert("responseXML---->"+xhr.responseXML);
alert("responseText---->"+xhr.responseText);
alert("status---->"+xhr.status);
alert("statusText---->"+xhr.statusText);
$(this).html(response);
});
/* $("#content").load("login.html"); */
})
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>
XMLHttpRequest對(duì)象
屬于JavaScript 范疇妖滔，可以調(diào)用一些屬性如下：
responseText 作為響應(yīng)主體被返回的文本
responseXML 如果響應(yīng)主體內(nèi)容類型是"text/xml"或"application/xml"隧哮，則返回包含響應(yīng)數(shù)據(jù)的XML DOM 文檔
status 響應(yīng)的HTTP 狀態(tài)
statusText HTTP 狀態(tài)的說(shuō)明
status
如果成功返回?cái)?shù)據(jù)，那么xhr 對(duì)象的statusText 屬性則返回'OK'字符串座舍。除了'OK'的狀態(tài)字符串沮翔，statusText 屬性還提供了一系列其他的值，如下：
200 OK/success 服務(wù)器成功返回了頁(yè)面 （tomcat9.0返回success）
400 Bad Request 語(yǔ)法錯(cuò)誤導(dǎo)致服務(wù)器不識(shí)別
401 Unauthorized 請(qǐng)求需要用戶認(rèn)證
404 Not found 指定的URL 在服務(wù)器上找不到
500 Internal Server Error 服務(wù)器遇到意外錯(cuò)誤簸州，無(wú)法完成請(qǐng)求
503 ServiceUnavailable 由于服務(wù)器過(guò)載或維護(hù)導(dǎo)致無(wú)法完成請(qǐng)求
第3節(jié)課
JSON:
JSON對(duì)象：{"id":"20120301", "name":"張三", "age": 23}
json數(shù)組：[ "abc" , 123 , true, null ]
簡(jiǎn)化成get/post
實(shí)際使用時(shí)鉴竭，我們用load加載靜態(tài)頁(yè)歧譬，用get/post加載動(dòng)態(tài)頁(yè)
get(url, [data], [callback], [type])
url:待載入頁(yè)面的URL地址
data:待發(fā)送 Key/value 參數(shù)。
callback:載入成功時(shí)回調(diào)函數(shù)搏存。
type:返回內(nèi)容格式瑰步，xml, html, script, json, text, _default。
<script src="js/jquery-1.11.2.min.js"></script>
<script>
$(function(){
$("#btn1").click(function(){
$.get("showme.jsp", {realname: "John", time: "2pm" },
function(data){
$("#content").html(data);
});
})
$("#btn2").click(function(){
$.post("showme.jsp", {realname: "John", time: "2pm" },
function(data){
$("#content").html(data);
});
})
})
</script>
</head>
<body>
<input type="button" id="btn1" value="測(cè)試get"/>
<input type="button" id="btn2" value="測(cè)試post"/>
<div id="content"></div>
</body>
</html>
)
.post()方法有四個(gè)參數(shù)
前面三個(gè)參數(shù)和.load()一樣璧眠，多了一個(gè)第四參數(shù)type
url(必須缩焦，請(qǐng)求html 文件的url 地址，參數(shù)類型為String)
data(可選责静，發(fā)送的key/value 數(shù)據(jù)袁滥，參數(shù)類型為Object)
callback(可選，成功或失敗的回調(diào)函數(shù)灾螃，參數(shù)類型為函數(shù)Function)题翻。
type(可選，即服務(wù)器返回的內(nèi)容格式：包括xml腰鬼、html嵌赠、script、json熄赡、jsonp 和text)
第四節(jié)課
type=xml
ajax.xml
<?xml version="1.0" encoding="UTF-8"?>
<root>
<name>劉能</name>
<contnet>我是小品演員</contnet>
</root>
相關(guān)js
$("#btn1").click(function(){
$.get("ajax.xml", function(data){
$("#content").html($(data).find("root").find("name").text());
$("#content").html($(data).find("root").find("contnet").text());
},'xml');
})
type=json
test.json
[{"name":"劉能","contnet":"我是小品演員"},{"name":"小沈陽(yáng)","contnet":"我是小品演員"}]
相關(guān)js
$("#btn2").click(function(){
$.post("test.json", function(response){
//alert(response.name);
$("#content").html(response[1].name);
});
})
表單序列化
<%@ 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">
<title>Insert title here</title>
<script src="js/jquery-1.11.2.min.js"></script>
<script>
$(function(){
$("#btn1").click(function(){
//alert($("#form1").serialize());
$.ajax({
type: "post",
url: "<%=request.getContextPath()%>/regServlet",
data: $("#form1").serialize(),
success: function(msg){
//alert( "Data Saved: " + msg );
$("#result").html(msg);
}
});
})
})
</script>
</head>
<body>
<form id="form1">
用戶名:<input type="text" name="uname"/>
密碼:<input type="text" name="paw"/>
<input type="button" id="btn1" value="添加"/>
</form>
<span id="result"></span>
</body>
</html>
