CoffeeScript 不使用 jQuery 的 Ajax 請求

2022-06-29 17:11 更新

不使用 jQuery 的 Ajax 請求

問題

你想要通過AJAX來從你的服務(wù)器加載數(shù)據(jù)，而不使用jQuery庫。

解決方案

你將使用本地的XMLHttpRequest對象。

通過一個按鈕來打開一個簡單的測試HTML頁面。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>XMLHttpRequest Tester</title>
</head>
<body>
    <h1>XMLHttpRequest Tester</h1>
    <button id="loadDataButton">Load Data</button>

    <script type="text/javascript" src="XMLHttpRequest.js"></script>
</body>
</html>

當(dāng)單擊該按鈕時，我們想給服務(wù)器發(fā)送Ajax請求以獲取一些數(shù)據(jù)。對于該例子，我們使用一個JSON小文件。 

// data.json
{
  message: "Hello World"
}

然后，創(chuàng)建CoffeeScript文件來保存頁面邏輯。此文件中的代碼創(chuàng)建了一個函數(shù)，當(dāng)點擊加載數(shù)據(jù)按鈕時將會調(diào)用該函數(shù)。 

# XMLHttpRequest.coffee
loadDataFromServer = ->
  req = new XMLHttpRequest()

  req.addEventListener 'readystatechange', ->
    if req.readyState is 4                        # ReadyState Complete
      successResultCodes = [200, 304]
      if req.status in successResultCodes
        data = eval '(' + req.responseText + ')'
         console.log 'data message: ', data.message
       else
         console.log 'Error loading data...'
 
   req.open 'GET', 'data.json', false
   req.send()
 
 loadDataButton = document.getElementById 'loadDataButton'
 loadDataButton.addEventListener 'click', loadDataFromServer, false

討論

在以上代碼中，我們對HTML中按鍵進行了處理（第16行）以及添加了一個單擊事件監(jiān)聽器（第17行）。在事件監(jiān)聽器中，我們把回調(diào)函數(shù)定義為loadDataFromServer。

我們在第2行定義了loadDataFromServer回調(diào)的開頭。

我們創(chuàng)建了一個XMLHttpRequest請求對象（第 3 行），并添加了一個readystatechange事件處理器。請求的readyState發(fā)生改變的那一刻，它就會被觸發(fā)。

在事件處理器中，我們會檢查判斷是否滿足readyState=4，若等于則說明請求已經(jīng)完成。然后檢查請求的狀態(tài)值。狀態(tài)值為200或者304都代表著請求成功，其它則表示發(fā)生錯誤。

如果請求確實成功了，那我們就會對從服務(wù)器返回的JSON重新進行運算，然后把它分配給一個數(shù)據(jù)變量。此時，我們可以在需要的時候使用返回的數(shù)據(jù)。

在最后我們需要提出請求。

在第13行打開了一個“GET”請求來讀取data.json文件。

在第14行把我們的請求發(fā)送至服務(wù)器。

舊版服務(wù)器支持

如果你的應(yīng)用需要使用舊版本的Internet Explorer ，你需確保XMLHttpRequest對象存在。為此，你可以在創(chuàng)建XMLHttpRequest實例之前輸入以下代碼。

if (typeof @XMLHttpRequest == "undefined")
  console.log 'XMLHttpRequest is undefined'
  @XMLHttpRequest = ->
    try
      return new ActiveXObject("Msxml2.XMLHTTP.6.0")
    catch error
    try
      return new ActiveXObject("Msxml2.XMLHTTP.3.0")
    catch error
    try
      return new ActiveXObject("Microsoft.XMLHTTP")
    catch error
    throw new Error("This browser does not support XMLHttpRequest.")

這段代碼確保了XMLHttpRequest對象在全局命名空間中可用。


以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號