ajax非同步實時載入進度條詳解「ajax進度條特效怎麼寫」

一、ajax的簡介

Ajax被認為是(Asynchronous(非同步) JavaScript And Xml的縮寫）。現在，允許瀏覽器與伺服器通信而無須刷新當前頁面的技術都被叫做Ajax.

同步是指：發送方發出數據後，等接收方發迴響應以後才發下一個數據包的通訊方式。

非同步是指：發送方發出數據後，不等接收方發迴響應，接著發送下個數據包的通訊方式 。

二、ajax的缺陷

AJAX大量使用了JavaScript和AJAX引擎，而這個取決於瀏覽器的支持。IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持，Mozilla雖然也支持AJAX，但是提供XMLHttpRequest的方式不一樣。所以，使用AJAX的程序必須測試針對各個瀏覽器的兼容性。

AJAX更新頁面內容的時候並沒有刷新整個頁面，因此，網頁的後退功能是失效的；有的用戶還經常搞不清楚現在的數據是舊的還是已經更新過的。這個就需要在明顯位置提醒用戶「數據已更新」。

對流媒體的支持沒有FLASH好。

一些手持設備（如手機、PDA等）現在還不能很好的支持Ajax。

三、ajax的四種type類型：

1、GET請求會向資料庫發索取數據的請求，從而來獲取信息，該請求就像資料庫的select操作一樣，只是用來查詢一下數據，不會修改、增加數據，不會影響資源的內容，即該請求不會產生副作用。無論進行多少次操作，結果都是一樣的。

2、與GET不同的是，PUT請求是向伺服器端發送數據的，從而改變信息，該請求就像資料庫的update操作一樣，用來修改數據的內容，但是不會增加數據的種類等，也就是說無論進行多少次PUT操作，其結果並沒有不同。

3、POST請求同PUT請求類似，都是向伺服器端發送數據的，但是該請求會改變數據的種類等資源，就像資料庫的insert操作一樣，會創建新的內容。幾乎目前所有的提交操作都是用POST請求的。

4、DELETE請求顧名思義，就是用來刪除某一個資源的，該請求就像資料庫的delete操作。

簡單的說就是

get理解為查詢 delete就是刪除 post就是新增 put就是更新數據

四、ajax的原生寫法

window.onload = function () {
 var oBtn = document.getElementById("btn1");
 oBtn.onclick = function () {
 //1.創建ajax對象
 //只兼容非ie6的瀏覽器，在ie6瀏覽器上運行會提示沒有被定義
 //var oAjax = new XMLHttpRequest();//這才是ajax實際的請求
 //alert(oAjax);
 //ie6瀏覽器下按照下面方法寫,但是在別的瀏覽器中不能用，會報錯。
 //var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
 //alert(oAjax);
 //鑒於上面出現的問題，可以採取下面的方法解決，用if判斷是否為IE6瀏覽器
 if (window.XMLHttpRequest)//如果有XMLHttpRequest，那就是非IE6瀏覽器。()裡面加window的原因下面會有描述。
 {
 var oAjax = new XMLHttpRequest();//創建ajax對象
 }
 else//如果沒有XMLHttpRequest，那就是IE6瀏覽器
 {
 var oAjax = new ActiveXObject("Microsoft.XMLHTTP");//IE6瀏覽器創建ajax對象
 }
 //2.連接伺服器
 //open(方法、文件名、非同步傳輸）
 //方法：
 //傳輸方式是get方式還是post方式。
 //文件名
 //告訴伺服器要讀哪個文件
 //非同步傳輸
 //非同步：多件事一件一件的做
 //同步：多件事情一起進行
 //但是js裡面的同步和非同步和現實的同步非同步相反。
 //同步：多件事一件一件的做
 //非同步：多件事情一起進行
 //ajax天生是用來做非同步的
 oAjax.open("GET", "a.txt?t='+new Date().getTime()", true);//加上t='+new Date().getTime()"的目的是為了消除緩存，每次的t的值不一樣。
 //3.發送請求
 oAjax.send();
 //4.接收返回
 //客戶端和伺服器端有交互的時候會調用onreadystatechange
 oAjax.onreadystatechange = function () {
 //oAjax.readyState //瀏覽器和伺服器，進行到哪一步了。
 //0->（未初始化）：還沒有調用 open() 方法。
 //1->（載入）：已調用 send() 方法，正在發送請求。
 //2->載入完成）：send() 方法完成，已收到全部響應內容。
 //3->（解析）：正在解析響應內容。
 //4->（完成）：響應內容解析完成，可以在客戶端調用。
 if (oAjax.readyState == 4) {
 if (oAjax.status == 200)//判斷是否成功,如果是200，就代表成功
 {
 alert("成功" + oAjax.responseText);//讀取a.txt文件成功就彈出成功。後面加上oAjax.responseText會輸出a.txt文本的內容
 }
 else {
 alert("失敗");
 }
 }
 };
 }
};

五、ajax的jquery寫法：

$.ajax({
 url: "http://www.microsoft.com", //請求的url地址
 dataType: "json", //返回格式為json
 async: true, //請求是否非同步，默認為非同步，這也是ajax重要特性
 data: {
 "id": "value"
 }, //參數值
 type: "GET", //請求方式
 processData: false, //對錶單data數據是否進行序列化
 contentType: false, //dataType設置你收到伺服器數據的格式
 xhr: function () { //ajax進度條
 var xhr = $.ajaxSettings.xhr();
 if (onprogress && xhr.upload) {
 xhr.upload.addEventListener("progress", progressBar, false);
 return xhr;
 }
 },
 beforeSend: function () {
 //請求前的處理
 },
 success: function (req) {
 //請求成功時處理
 },
 complete: function () {
 //請求完成的處理
 },
 error: function () {
 //請求出錯處理
 }
});

當然，jquery還有很多簡單變形的寫法。