鋒利的jQuery讀書筆記---jQuery中Ajax--load方法
鋒利的jQuery(第2版) 完整版PDF+源碼 http://www.linuxidc.com/Linux/2013-10/91527.htm
第一個Ajax例子
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="Ajax提交" onclick="Ajax();" />
<div id="resText"></div>
</body>
<script type="text/javascript">
function Ajax() {
var xmlHttpReq = null;//聲明一個空對象用來裝入XMLHttpRequest對象
if(window.ActiveXObject) {
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");//IE5 IE6是以ActiveXObject的方式引入XMLHttpRequest的
} else if(window.XMLHttpRequest) {//除IE5 IE6 以外的浏覽器XMLHttpRequest是window的子對象
xmlHttpReq = new XMLHttpRequest();//實例化一個XMLHttpRequest對象
}
if(xmlHttpReq != null) {
xmlHttpReq.open("GET", "test.jsp", true);//調用open()方法並采用異步方式
xmlHttpReq.onreadystatechange = RequestCallBack;//設置回調函數
xmlHttpReq.send(null);//因為使用get方式提交，所以可以使用null參調用
}
function RequestCallBack() {//一旦readyState值改變，將會調用這個函數}
if(xmlHttpReq.readyState == 4) {
if(xmlHttpReq.status == 200) {
//將xmlHttpReq.responseText的值賦予id為resText的元素
document.getElementById("resText").innerHTML = xmlHttpReq.responseText;
}
}
}
}
</script>
</html>
test.jsp的內容：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%out.println("Hello Ajax!");%>
jQuery中的Ajax
1.load()
load()方法時jQuery中最為簡單和常用的Ajax方法，能遠程載入HTML代碼並插入DOM中。
遠程HTML代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="comment">
<h6>張三:</h6>
<p class="para">沙發.</p>
</div>
<div class="comment">
<h6>李四:</h6>
<p class="para">板凳.</p>
</div>
<div class="comment">
<h6>王五:</h6>
<p class="para">地板.</p>
</div>
</body>
</html>
load()載入HTML
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script type="text/javascript" src="../../js/jquery-2.1.3.js"></script>
<style>
* { margin:0; padding:0;}
body { font-size:12px;}
.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
.comment h6 { font-weight:700; font-size:14px;}
.para { margin-top:5px; text-indent:2em;background:#DDD;}
</style>
<title></title>
</head>
<body>
<input type="button" id="send" value="Ajax獲取" />
<div class="comment">已有評論</div>
<div id="resText"></div>
</body>
<script type="text/javascript">
$(function () {
$("#send").click(function () {
$("#resText").load("test.html");
});
})
/**
* jQuery中的Ajax
*
* jQuery對Ajax操作進行了封裝，
* 在jQuery中$.ajax()方法屬於最底層的方法，
* 第2層是load()、$.get()、$.post()方法
* 第3層是$.getScript()和$.getJSON()方法
*
*
* load()方法是jQuery中最為簡單和常用的Ajax方法，能載入遠程HTML代碼並插入DOM中。
* load(url [, data] [, callback])
*
* url String 請求HTML界面的URL地址
* data(可選) Object 發送至服務器的key/value數據
* callback(可選) Function 請求完成時的回調函數，無論請求成功或失敗
* */
</script>
</html>
load()載入篩選後的HTML文檔
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script type="text/javascript" src="../../js/jquery-2.1.3.js"></script>
<style>
* { margin:0; padding:0;}
body { font-size:12px;}
.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
.comment h6 { font-weight:700; font-size:14px;}
.para { margin-top:5px; text-indent:2em;background:#DDD;}
</style>
<title></title>
</head>
<body>
<input type="button" id="send" value="Ajax獲取" />
<div class="comment">已有評論</div>
<div id="resText"></div>
</body>
<script type="text/javascript">
$(function () {
$("#send").click(function () {
$("#resText").load("test.html .para");
});
})
/**
* 篩選載入的HTML文檔
*
* load()方法的URL參數的語法結構為："url selector"，注意URL和選擇器之間有一個空格
*
* load()方法的傳遞方式根據參數data來自動指定。
* 如果沒有參數傳遞，則采用GET方式進行傳遞；
* 反之，則會自動轉換為POST傳遞
*
* **/
</script>
</html>
load()方法---回調函數
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script type="text/javascript" src="../../js/jquery-2.1.3.js"></script>
<style>
* { margin:0; padding:0;}
body { font-size:12px;}
.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
.comment h6 { font-weight:700; font-size:14px;}
.para { margin-top:5px; text-indent:2em;background:#DDD;}
</style>
<title></title>
</head>
<body>
<input type="button" id="send" value="Ajax獲取" />
<div class="comment">已有評論</div>
<div id="resText"></div>
</body>
<script type="text/javascript">
$(function () {
$("#send").click(function () {
$("#resText").load("test.html .para", function (responseText, textStatus, XMLHttpRequest) {
alert($(this).html());
alert(responseText);//請求返回的內容
alert(textStatus);//請求狀態：success、error、notmodified、timeout
alert(XMLHttpRequest);//XMLHttpRequest對象
});
});
})
/**
*
* load()方法的回調參數
*
* **/
</script>
</html>
jQuery權威指南 PDF版中文+配套源代碼 http://www.linuxidc.com/Linux/2013-10/91059.htm
jQuery實戰 中文PDF+源碼 http://www.linuxidc.com/Linux/2013-09/90631.htm
《jQuery即學即用（雙色）》 PDF+源代碼 http://www.linuxidc.com/Linux/2013-09/90383.htm
鋒利的jQuery(第2版) 完整版PDF+源碼 http://www.linuxidc.com/Linux/2013-10/91527.htm
jQuery完成帶復選框的表格行高亮顯示 http://www.linuxidc.com/Linux/2013-08/89406.htm
jQuery基礎教程(第4版) PDF 完整高清版+配套源碼 http://www.linuxidc.com/Linux/2014-03/98162.htm
--------------------------------------分割線 --------------------------------------
jQuery 的詳細介紹：請點這裡
jQuery 的下載地址：請點這裡
