ajax基本寫法及屬性說明、跨域訪問
1.什麼是 AJAX？（進一步瞭解什麼是非簡單ajax請求，以及重複發請求的問題）
AJAX = 非同步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
簡短地說，在不過載整個網頁的情況下，AJAX 通過後臺載入資料，並在網頁上進行顯示。
非同步載入，區域性重新整理！
2、jQuery寫法：
1）、$(selector).load(URL,data,callback);
必需的 URL 引數規定您希望載入的 URL。
可選的 data 引數規定與請求一同傳送的查詢字串鍵/值對集合。
可選的 callback 引數是 load() 方法完成後所執行的函式名稱。
例子：
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部內容載入成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
2）、$.get(URL,callback);
必需的 URL 引數規定您希望請求的 URL。
可選的 callback 引數是請求成功後所執行的函式名
例子：
$.get("demo_test.php",function(data,status){
alert("資料: " + data + "\n狀態: " + status);
});
3）、$.post(URL,data,callback);
必需的 URL 引數規定您希望請求的 URL。
可選的 data 引數規定連同請求傳送的資料。
可選的 callback 引數是請求成功後所執行的函式名。
例子：
$.post("/try/ajax/demo_test_post.php",
{
name:"菜鳥教程",
url:"http://www.runoob.com"
},
function(data,status){
alert("資料: \n" + data + "\n狀態: " + status);
});
4)、$.ajax({url,type,timeout...});
例子：
$.ajax({
url：“請求的伺服器ur”l,
type：“ 請求方式post/get”,
dataType： ”請求返回的資料格式json“
})
.done(function (response) {// 成功獲得資料
//回撥函式 用於處理資料
fnHandlerData(response);
})
.fail(function () { // 失敗
alert("網路異常,請重試!")
});
或：
$.ajax({
type: "GET",
url: "test.json",
data: {username:$("#username").val(), content:$("#content").val()},
dataType: "json",
beforeSend: function (xhr) {
// 禁用按鈕防止重複提交
$("#submit").attr({ disabled: "disabled" });
//設定請求頭
xhr.屬性名 = 值;
},
success: function(data){
$('#resText').empty(); //清空resText裡面的所有內容
var html = '';
$.each(data, function(commentIndex, comment){
html += '<div class="comment"><h6>' + comment['username']
+ ':</h6><p class="para"' + comment['content']
+ '</p></div>';
});
$('#resText').html(html);
}
});
屬性詳解：
1.url:要求為String型別的引數，（預設為當前頁地址）傳送請求的地址。
2.type:
要求為String型別的引數，請求方式（post或get）預設為get。注意其他http請求方法，例如put和delete也可以使用，但僅部分瀏覽器支援。
3.timeout:
要求為Number型別的引數，設定請求超時時間（毫秒）。此設定將覆蓋$.ajaxSetup()方法的全域性設定。
4.async:
要求為Boolean型別的引數，預設設定為true，所有請求均為非同步請求。如果需要傳送同步請求，請將此選項設定為false。
注意，同步請求將鎖住瀏覽器，使用者其他操作必須等待請求完成才可以執行。
5.cache:
要求為Boolean型別的引數，預設為true（當dataType為script時，預設為false），設定為false將不會從瀏覽器快取中載入請求資訊。
6.data:
要求為Object或String型別的引數，傳送到伺服器的資料。如果已經不是字串，將自動轉換為字串格式。get請求中將附加在url後。
防止這種自動轉換，可以檢視processData選項。物件必須為key/value格式，例如{foo1:"bar1",foo2:"bar2"}轉換為&foo1=bar1&foo2=bar2。
如果是陣列，JQuery將自動為不同值對應同一個名稱。例如{foo:["bar1","bar2"]}轉換為&foo=bar1&foo=bar2。
7.dataType:
要求為String型別的引數，預期伺服器返回的資料型別。如果不指定，JQuery將自動根據http包mime資訊返回responseXML或responseText，
並作為回撥函式引數傳遞。可用的型別如下：
xml：返回XML文件，可用JQuery處理。
html：返回純文字HTML資訊；包含的script標籤會在插入DOM時執行。
script：返回純文字JavaScript程式碼。不會自動快取結果。除非設定了cache引數。注意在遠端請求時（不在同一個域下），所有post請求都將轉為get請求。
json：返回JSON資料。
jsonp：JSONP格式。使用SONP形式呼叫函式時，例如myurl?callback=?，JQuery將自動替換後一個“?”為正確的函式名，以執行回撥函式。
text：返回純文字字串。
8.beforeSend：
要求為Function型別的引數，傳送請求前可以修改XMLHttpRequest物件的函式，例如新增自定義HTTP頭。
在beforeSend中如果返回false可以取消本次ajax請求。XMLHttpRequest物件是惟一的引數。
function(XMLHttpRequest){
this; //呼叫本次ajax請求時傳遞的options引數
}
注：可在此設定提交按鈕禁用，防止表單重複提交，還可設定request請求頭中引數值
9.complete：
要求為Function型別的引數，請求完成後呼叫的回撥函式（請求成功或失敗時均呼叫）。引數：XMLHttpRequest物件和一個描述成功請求型別的字串。
function(XMLHttpRequest, textStatus){
this; //呼叫本次ajax請求時傳遞的options引數
}
10.success：要求為Function型別的引數，請求成功後呼叫的回撥函式，有兩個引數。
(1)由伺服器返回，並根據dataType引數進行處理後的資料。
(2)描述狀態的字串。
function(data, textStatus){
//data可能是xmlDoc、jsonObj、html、text等等
this; //呼叫本次ajax請求時傳遞的options引數
}
11.error:
要求為Function型別的引數，請求失敗時被呼叫的函式。該函式有3個引數，即XMLHttpRequest物件、錯誤資訊、捕獲的錯誤物件(可選)。
ajax事件函式如下：
function(XMLHttpRequest, textStatus, errorThrown){
//通常情況下textStatus和errorThrown只有其中一個包含資訊
this; //呼叫本次ajax請求時傳遞的options引數
}
12.contentType：
要求為String型別的引數，當傳送資訊至伺服器時，內容編碼型別預設為"application/x-www-form-urlencoded"。該預設值適合大多數應用場合。
13.dataFilter：
要求為Function型別的引數，給Ajax返回的原始資料進行預處理的函式。提供data和type兩個引數。data是Ajax返回的原始資料，
type是呼叫jQuery.ajax時提供的dataType引數。函式返回的值將由jQuery進一步處理。
function(data, type){
//返回處理後的資料
return data;
}
14.dataFilter：
要求為Function型別的引數，給Ajax返回的原始資料進行預處理的函式。提供data和type兩個引數。data是Ajax返回的原始資料，
type是呼叫jQuery.ajax時提供的dataType引數。函式返回的值將由jQuery進一步處理。
function(data, type){
//返回處理後的資料
return data;
}
15.global：
要求為Boolean型別的引數，預設為true。表示是否觸發全域性ajax事件。設定為false將不會觸發全域性ajax事件，ajaxStart或ajaxStop可用於控制各種ajax事件。
16.ifModified：
要求為Boolean型別的引數，預設為false。僅在伺服器資料改變時獲取新資料。伺服器資料改變判斷的依據是Last-Modified頭資訊。
預設值是false，即忽略頭資訊。
17.jsonp：
要求為String型別的引數，在一個jsonp請求中重寫回調函式的名字。該值用來替代在"callback=?"這種GET或POST請求中URL引數裡的"callback"部分，
例如{jsonp:'onJsonPLoad'}會導致將"onJsonPLoad=?"傳給伺服器。
18.username：
要求為String型別的引數，用於響應HTTP訪問認證請求的使用者名稱。
19.password：
要求為String型別的引數，用於響應HTTP訪問認證請求的密碼。
20.processData：
要求為Boolean型別的引數，預設為true。預設情況下，傳送的資料將被轉換為物件（從技術角度來講並非字串）以配合
預設內容型別"application/x-www-form-urlencoded"。如果要傳送DOM樹資訊或者其他不希望轉換的資訊，請設定為false。
21.scriptCharset：
要求為String型別的引數，只有當請求時dataType為"jsonp"或者"script"，並且type是GET時才會用於強制修改字符集(charset)。
通常在本地和遠端的內容編碼不同時使用。
5）、$(selector).getJSON(url,data,success(data,status,xhr));
例子：
$.getJSON("demo_ajax_json.js",function(result){
$.each(result, function(i, field){
$("div").append(field + " ");
});
});
6）、js-ajax實現跨域
<script type="text/javascript">
$.ajax({
url:"http://chenqiong.com.cn/test.php",
dataType:"jsonp",
type:"get",
jsonp: "my",
success:function(data){
console.log('success');
document.write(data['Name']);
console.log(data);
}
});
</script>
利用JSONP實現跨域！
jQuery的ajax方法：