原生AJAX和jQuery ajax的使用和區別
#Ajax簡介
Ajax被認為是(Asynchronous(非同步) JavaScript And Xml的縮寫）。現在，允許瀏覽器與伺服器通訊而無須重新整理當前頁面的技術都被叫做Ajax.
- 同步是指：傳送方發出資料後，等接收方發回響應以後才發下一個數據包的通訊方式。
- 非同步是指：傳送方發出資料後，不等接收方發回響應，接著傳送下個數據包的通訊方式 。
##1.原生JavaScript寫法：
原生js寫ajax就像打電話
打電話分下面4步
1.拿出手機
2.撥號
3.說話
4.挺對方說話
ajax也分下面4步
1.建立ajax物件
2.連線到伺服器
3.傳送請求（告訴伺服器我要什麼檔案）
4.接收返回值
#####readyState與status:
######readyState有五種狀態：
0 (未初始化)： (XMLHttpRequest)物件已經建立，但還沒有呼叫open()方法；
1 (載入)：已經呼叫open() 方法，但尚未傳送請求；
2 (載入完成)： 請求已經發送完成；
3 (互動)：可以接收到部分響應資料；
4 (完成)：已經接收到了全部資料，並且連線已經關閉。
而status實際是一種輔狀態判斷，只是status更多是伺服器方的狀態判斷。status的狀態有幾十種，只列出平時常用的幾種：
100——客戶必須繼續發出請求
101——客戶要求伺服器根據請求轉換HTTP協議版本
200——成功
201——提示知道新檔案的URL
300——請求的資源可在多處得到
301——刪除請求資料
404——沒有發現檔案、查詢或URl
500——伺服器產生內部錯誤
####具體程式碼：
var xhr; function rukou()//入口函式 { xhr=getxhr(); if(xhr==null) { alert("瀏覽器不支援！"); } var url=""; xhr.onreadystatechange=fanhui; xhr.open("GET",url,true); xhr.send(null); } function fanhui()//請求成功的回撥函式 { if(readyState==4) { document.getElementById("xx").innerHTML=xhr.responseText; } } function getxhr()//獲取xmlhttp物件 { xhr=null; try{ xhr=new XMLHttpRequest(); } catch(e) {//針對IE6，IE5.5，IE5 xhr=new ActiveXObject("Microsoft.XMLHTTP"); } }
##2.jQuery寫法
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="Public/js/jquery-easyui-1.3.1/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function(){
//按鈕單擊時執行
$("#testAjax").click(function(){
//Ajax呼叫處理
var html = $.ajax({
type: "POST",
url: "xxx",
data: "name=garfield&age=18",
async: false
}).responseText;
$("#myDiv").html('<h2>'+html+'</h2>');
});
});
</script>
</head>
<body>
<div id="myDiv"><h2>通過 AJAX 改變文字</h2></div>
<button id="testAjax" type="button">Ajax改變內容</button>
</body>
</html>
也可以
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="Public/js/jquery-easyui-1.3.1/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function(){
//按鈕單擊時執行
$("#testAjax").click(function(){
//Ajax呼叫處理
$.ajax({
type: "POST",
url: "test.php",
data: "name=garfield&age=18",
success: function(data){
$("#myDiv").html('<h2>'+data+'</h2>');
}
});
});
});
</script>
</head>
<body>
<div id="myDiv"><h2>通過 AJAX 改變文字</h2></div>
<button id="testAjax" type="button">Ajax改變內容</button>
</body>
</html>
##注意：關於onload和ready
####1. DOM ready
- 用jQ的人很多人都是這麼開始寫指令碼的：
$(function(){
// do something
});
其實這個就是jq ready()的簡寫，他等價於：
$(document).ready(function(){
//do something
})
//或者下面這個方法，jQuer的預設引數是：“document”；
$().ready(function(){
//do something
})
這個就是jq ready()的方法就是Dom Ready，他的作用或者意義就是:在DOM載入完成後就可以可以對DOM進行操作。
文件載入的順序：域名解析–>載入HTML–>載入JavaScript和CSS–>載入圖片等非文字媒體檔案。
####2、DOM load
- 文件載入的順序：域名解析–>載入HTML–>載入JavaScript和CSS–>載入圖片等非文字媒體檔案。
DOM load在載入圖片等非文字媒體檔案之後，表示在document文件載入完成後才可以對DOM進行操作，document文件包括了載入圖片等非文字媒體檔案。
如需要等該圖片載入完成，才可設定圖片的屬性或樣式等。
在原生JavaScript中使用onload事件。
- window load：
window.onload = function() {
...
}
- 圖片load：
document.getElementsByTagName("img")[0].onload = function() {
...
}