不依賴jQuery的Ajax請求 Ajax Request Without jQuery · CoffeeScript Cookbook

## 問題 Problem 你想不借助jQuery，使用AJAX從服務器上下載數據。 You want to load data from your server via AJAX without using the jQuery library. ## 方法 Solution 你可以使用原生的[XMLHttpRequest](http://en.wikipedia.org/wiki/XMLHttpRequest)對象。 You will use the native?[XMLHttpRequest](http://en.wikipedia.org/wiki/XMLHttpRequest)?object. 我們搭建一個簡單的頁面，該頁面上有一個按鈕。 Let’s set up a simple test HTML page with a button. ~~~ <!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> ~~~ 當按鈕被點擊時，我們希望可以給服務器發送一個Ajax請求，獲取一些數據。為此，我們使用了一個很小的JSON文件。 When the button is clicked, we want to send an Ajax request to the server to retrieve some data. For this sample, we have a small JSON file. ~~~ // data.json { message: "Hello World" } ~~~ 下一步，創建一個CoffeeScript文件來處理頁面邏輯。本文件中的代碼創建了一個函數，當Load Data按鈕被點擊時調用它。 Next, create the CoffeeScript file to hold the page logic. The code in this file creates a function to be called when the Load Data button is clicked. ~~~ 1 # XMLHttpRequest.coffee 2 loadDataFromServer = -> 3 req = new XMLHttpRequest() 4 5 req.addEventListener 'readystatechange', -> 6 if req.readyState is 4 # ReadyState Compelte 7 if req.status is 200 or req.status is 304 # Success result codes 8 data = eval '(' + req.responseText + ')' 9 console.log 'data message: ', data.message 10 else 11 console.log 'Error loading data...' 12 13 req.open 'GET', 'data.json', false 14 req.send() 15 16 loadDataButton = document.getElementById 'loadDataButton' 17 loadDataButton.addEventListener 'click', loadDataFromServer, false ~~~ ## 討論 Discussion 在上面的代碼中，我們本質上是獲取了一個HTML中（16行）的按鈕的一個句柄，添加了一個_click_事件監聽器（17行）。在我們的事件監聽器中，吧我們的回調函數定義為loadDataFromServer。 In the above code we essentially grab a handle to the button in our HTML (line 16) and add a?_click_?event listener (line 17). In our event listener, we define our callback function as loadDataFromServer. 我們在第2行那里定義了我們的loadDataFromServer回調函數。 We define our loadDataFromServer callback beginning on line 2. 我們創建了一個XMLHttpRequest請求對象（3行），并添加了一個_readystatechange_事件處理器。只要請求對象的readystate發生變化，該事件處理器就會被觸發。 We create a XMLHttpRequest request object (line 3) and add a_readystatechange_?event handler. This fires whenever the request’s readyState changes. 在事件處理器中，我們檢查readyState是否等于4，即表明請求已經完成。然后，我們再查看請求的狀態值，狀態碼為200或者304都代表這是一次成功的請求。其他狀態碼都表示請求出錯。 In the event handler we check to see if the readyState = 4, indicating the request has completed. Then, we check the request status value. Both 200 or 304 represent a succsessful request. Anything else represents an error condition. 如果請求確實成功了，我們會對從服務器端返回來的JSON進行求值，然后把其賦值給一個數據變量。這個時候，我們就可以隨心所欲地使用返回的數據了。 If the request was indeed successful, we eval the JSON returned from the server and assign it to a data variable. At this point, we can use the returned data in any way we need to. 最后一件要做的事情就是把我們的請求發出去。 The last thing we need to do is actually make our request. 13行，打開一個’GET’請求，來獲取data.json文件。 Line 13 opens a ‘GET’ request to retreive the data.json file. 14行，把請求發給服務器。 Line 14 sends our request to the server. ## 支持老掉牙的瀏覽器 Older Browser Support 如果你的程序需要支持老版本的Internet Explorer，你需要確保XMLHttpRequest對象是否存在。做法就是在創建XMLHttpRequest實例之前，先包含下面這段代碼。 If your application needs to target older versions of Internet Explorer, you will need to ensure the XMLHttpRequest object exists. You can do this by including this code before creating the XMLHttpRequest instance. ~~~ 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對象。 This code ensures the XMLHttpRequest object is available in the global namespace.