jQuery對Ajax操作進行了封裝，在jQuery中最底層的方法是$.ajax()，第二個是load()，$.get()和$.post()，第三層是$.getscript()和$.getJSON()。
load()方法
-load()方法是jquery中最為簡單和常用的ajax方法，能載入遠程的HTML並插入到DOM中，它的結構是：load(url [，data][，callback])；
url string 請求HTML頁面的URL地址
data可選 object 發送到服務器的key/value數據
callback function 請求完成時的回調函數，無論請求成功或失敗
-程序員只需要使用jquery選擇器為HTML片段指定目標位置，然后將要加載的文件的URL作為參數傳遞更給load()方法即可
細節
-如果需要加載目標HTML頁面內的某些元素，則可以通過load()方法的url參數來達到目的，通過url參數指定選擇符，就可以方便的從加載過來的HTML文檔中選出所需要的內容，load()方法的url參數的語法結構為“url selector”(注意：url和選擇器之間有一個空格)
-傳遞方式：load()方法的傳遞參數根據data來自動自定，如果沒有參數，采用GET方式傳遞，否則采用POST方式
-對於必須在加載完才能繼續的操作，load()方法提供了回調函數，該函數由三個參數：代表請求返回內容的data；代表請求狀態的textStatus對象和XMLHttpRequest對象
-laod()方法 只能用於 txt和html 數據傳輸
<body>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(function(){
//使用jquery來操作Ajax
$("a:first").on("click",function(){
var url=this.href; //直接填寫url就行 默認方式是get
$("#show").load(url);
return false;
});
});
</script>
<ul>
<li><a href="content1.txt">content</a></li>
<li><a href=""></a>container</li>
<li><a href=""></a>conmand</li>
</ul>
<div id="show"></div>
</body>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(function(){
//使用jquery來操作Ajax
$("a:first").on("click",function(){
//<h2><a href="">www.zhongguo.com</a></h2>
//如果只想要a標簽 可以這么寫
var url=this.href+" a";
$("#show").load(url);
return false;
});
});
</script>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(function(){
//使用jquery來操作Ajax
$("a:first").on("click",function(){
var data={"time":new Date()}; //post請求JSON格式，清理緩存
//<h2><a href="">www.zhongguo.com</a></h2>
//如果只想要a標簽 可以這么寫
var url=this.href+" a";
$("#show").load(url,data);
return false;
});
});
</script>
$.get() $.post方法
$.get()方法使用GET方式來進行異步請求，它的結構是：$.get(url,[,data][,callback][,type]);
參數名稱 類型 說明
url string 請求HTML頁面的url地址
data(可選) object 發送到服務器的key/value數據作為QueryString
附加到請求url中
callback(可選) function 載入成功時，回調函數（只有當response返回
狀態時，success才調用該方法）
type （可選） string 服務器返回內容的格式，包括 xml、html json
script text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(function(){
$("a:first").on("click",function(){
var url=this.href;
//解析xml數據格式使用$.get()，其中返回的對象在回調函數function中 a
$.get(url,function(a){
//獲取a子元素from的文本
var name=$(a).find("from").text();
//添加到DIV中
$("#show").append(name);
});
return false;
});
});
</script>
<ul>
<li><a href="content3.xml">content</a></li>
<li><a href=""></a>container</li>
<li><a href=""></a>conmand</li>
</ul>
<div id="show"></div>
</body>
</html>
$.post()方法和$.get()方式參數都是一樣的 只是請求不一樣 一個是GET 一個是POST
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(function(){
$("a:first").on("click",function(){
var url=this.href;
//解析xml數據格式使用$.get()，其中返回的對象在回調函數function中 a
$.post(url,function(a){
//獲取a子元素from的文本
var name=$(a).find("from").text();
//先清空div中的元素 之后在添加元素，防止多次點擊的時候重復添加
$("#show").empty().append(name);
});
return false;
});
});
</script>
<ul>
<li><a href="content3.xml">content</a></li>
<li><a href=""></a>container</li>
<li><a href=""></a>conmand</li>
</ul>
<div id="show"></div>
</body>
</html>
$.getJSON()方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(function(){
$("a:first").on("click",function(){
var url=this.href;
$.getJSON(url,function(a){
//getJSON 返回的是json格式的數據，原生的js，不需要解析，而且也不需要返回jquery對象
//返回的xml對象，jquery要是想使用，必須轉換jquery對象
//獲取a子元素from的文本
var name=a.email;
//先清空div中的元素 之后在添加元素，防止多次點擊的時候重復添加
$("#show").empty().append(name);
});
return false;
});
});
</script>
<ul>
<li><a href="content.js">content</a></li>
<li><a href=""></a>container</li>
<li><a href=""></a>conmand</li>
</ul>
<div id="show"></div>
</body>
</html>