AJAX = Asynchronous JavaScript and XML（非同步的 JavaScript 和 XML） 原生 例子 點擊按鈕，訪問伺服器上的ajax_info.txt文件，獲得txt文件的內容，並修改顯示的文本 "參考鏈接菜鳥教程" XMLHttpRequest對象 ajax的核心 ...
AJAX = Asynchronous JavaScript and XML（非同步的 JavaScript 和 XML）
原生
例子
點擊按鈕，訪問伺服器上的ajax_info.txt文件，獲得txt文件的內容，並修改顯示的文本
<!DOCTYPE html>
<html>
<head>
<script>
var xmlhttp;//xmlhttp對象
function loadXMLDoc(url,cfunc){
//不同的瀏覽器，或得xmlhttp對象所調用的方法不同
if (window.XMLHttpRequest){
// IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{
// IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//回調函數
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction(){
//訪問伺服器上的/try/ajax/ajax_info.txt，並回調函數
loadXMLDoc("/try/ajax/ajax_info.txt",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
});
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改文本內容</h2></div>
<button type="button" onclick="myFunction()">修改內容</button>
</body>
</html>XMLHttpRequest對象
ajax的核心對象，是伺服器和客戶端中間的橋梁，客戶端向伺服器發送請求和客戶端獲得伺服器響應都是通過此對象的屬性和方法來進行。
var xmlhttp;
//window.XMLHttpRequest不為空，就是true
if (window.XMLHttpRequest){
// IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{// IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}發送請求
- open(method,url,async) 連接伺服器
method：請求的類型；GET 或 POSTurl：文件在伺服器上的位置async：true（非同步）或 false（同步），推薦使用非同步
- send(string) 發送請求
如果請求方式為get，send中的參數可以省略不寫
onreadystatechange事件
xmlhttp對象有兩個屬性readyState和status
當readyState發生改變，就會觸發onreadystatechange事件
readyState有以下幾種狀態
- 0: 請求未初始化
- 1: 伺服器連接已建立
- 2: 請求已接收
- 3: 請求處理中
- 4: 請求已完成，且響應已就緒
status有兩種狀態
- 200: "OK"
- 404: 未找到頁面
伺服器響應
使用 XMLHttpRequest 對象的 responseText 或 responseXML屬性可以獲得來自伺服器的響應數據
responseText獲得字元串形式的響應數據。responseXML獲得 XML 形式的響應數據。
JQuery實現ajax
1. $.ajax(url,[settings])
最基本的ajax方法
2. load(url,[data],[callback])
從伺服器載入數據並且將返回的HTML代碼並插入至匹配的元素中。
data是傳遞給伺服器的數據參數 ,可以是一個普通的對象或字元串
提供了一個回調函數complete(responseText, textStatus, XMLHttpRequest)，當HTML代碼並插入至匹配的元素中就會被調用
$('#mydiv').load("test.html");
//這裡的first.html是當前同級目錄的一個html文件
$('#mydiv').load('first.html',function (data,status) {
console.log(data);
console.log(status);//狀態，成功為success,失敗則為error
});3. $.get(url,[data],[fn],[type])
使用一個HTTP GET請求從伺服器載入數據
//這裡實現的效果與上面的load一致
$.get("first.html",function(data){
$('#mydiv').html("test.html");
});4. $.post(url,[data],[fn],[type])
使用一個HTTP POST請求從伺服器載入數據，與上面get類似
5. $.getJSON(url,[data],[fn])
獲得json數據並自動解析自動解析
$.getJSON("test.js", function(json){
console.log(json.users[3].name);
});6. $.getScript(url,[callback])
使用一個HTTP GET請求從伺服器載入並執行一個 JavaScript 文件
