全面認識Ajax

首先,在認識Ajax之前,我們來了解一下同步和異步

在Ajax沒被發現之前:有一個很長很多信息要填的表單,有姓名,編號,工作內容,聯繫方式,地址,郵箱等等,當你填完後,點擊提交,等待了好幾分鐘,它給你返回一個郵箱重複了,你把郵箱改好了之後,再提交,又等了好幾分鐘,它給你返回聯繫方式格式錯誤。—–這就是同步請求:每按一次提交,客戶端就發送一次請求(內含你填的信息)給服務器,服務器就返回信息給客戶端, 同樣是上面的例子,當Ajax出現之後,你填寫郵箱的時候,如果重複了,它會提示:郵箱重複,而不用刷新整個頁面,這就是異步請求:我們需要改變某一塊的內容而不影響其他內容,可以對網頁局部的信息進行刷新。

接着,Ajax是什麼?

AJAX = Asynchronous JavaScript and XML(異步的 JavaScript 和 XML)。

AJAX 不是新的編程語言,而是一種使用現有標準的新方法。

AJAX 是與服務器交換數據並更新部分網頁的藝術,在不重新加載整個頁面的情況下。

我們怎樣學習Ajax?

發送Ajax請求需要的技術不多:HTML+CSS把頁面做好,利用JS就可以很好地學習Ajax。下面由我們來看看Ajax請求的步驟。

①建立一個Ajax對象
var xmlhttp=new XmlHttpRequest();

②發送請求
xmlhttp.open(method,url,async);其中method是請求方法,分爲Get和Post兩種。url是接收請求頁面的地址,async:true表示異步,false表示同步,默認是true。
然後,GET方法:xmlhttp.send();
POST方法:
xmlhttp.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);xmlhttp.send(param);其中param是要傳遞的參數。POST方法是要設置HTTP請求頭的。

③接收響應
xmlhttp.responseText :返回的是String類型,而我們通常是利用JSON來接收的。

④我們怎樣判斷請求發送成功呢?
readyState:存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。
0: 請求未初始化
1: 服務器連接已建立
2: 請求已接收
3: 請求處理中
4: 請求已完成,且響應已就緒

當請求被髮送到服務器時,我們需要執行一些基於響應的任務。

每當 readyState 改變時,就會觸發 onreadystatechange 事件。

readyState 屬性存有 XMLHttpRequest 的狀態信息。

通常我們是這樣判斷的:

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
     //code....
    }
  } 

下面我們來看看一個簡單的實例

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
<script>
function load()
{
var xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","test.txt",true);
xmlhttp.send();
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

}
</script>
        <title>Ajax例子</title>
    </head>

    <body>
<div id="myDiv"><h2>使用 AJAX 獲取內容</h2></div>
<button type="button" onclick="load()">獲取文檔裏的內容</button>
    </body>
</html>

同目錄下的test.txt文件

歡迎來到羅堅元的博客。

其實Ajax並沒有那麼難,上手也是很簡單的,但是它還是有很多新鮮的信息需要我們去學習的。上面的只是JS原生的ajax請求代碼,而在開發中我們經常利用JS框架來幫助我們更好的寫Ajax請求,關於Jquery框架Ajax請求的文章請繼續瀏覽我的博客。

更多精彩內容等待你的瀏覽—By:羅堅元博客

發佈了29 篇原創文章 · 獲贊 15 · 訪問量 5萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章