Ajax是一門快速創建動態網頁的技術，學習的過程中我遇到了如下問題：
- 此例子github地址
- 下面是一段純Ajax請求的代碼
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","./ajax/test.txt",true);
xmlhttp.send();
我們知道readyState中保存了xmlhttpRequest的五種狀態，狀態改變就會觸發onreadystatechange事件，分別是:
0：請求未初始化
1：服務器已建立連接
2：請求已接收
3：請求正在處理
4：請求完成并響應就緒
但我對這五種狀態分別位于代碼中的哪個時刻依然不是很理解，于是我做了下面的實驗
首先在第6行代碼下添加console.log(xmlhttp.readyState);可以看到請求發出后控制臺打印出了1，2，3，4狀態。那么0狀態在哪里？哪句代碼實現了請求的初始化。
這次我在第5行,第11行,和12行下面分別添加console.log(xmlhttp.readyState);，控制臺輸出0，1，1狀態，也就是說xmlhttp.open和xmlhttp.send就是初始化請求的過程
組件的數據來源，通常是通過 Ajax 請求從服務器獲取，可以使用 componentDidMount 方法設置 Ajax 請求，等到請求成功，再用 this.setState 方法重新渲染 UI
可以看我在github上的例子react-ajax.js,以下為代碼片段：
componentDidMount: function() {
$.get(this.props.source, function(result) {
var user = result[0];
if (this.isMounted()) {
this.setState({
username: user.name,
url: user.items.html_url
});
}
}.bind(this));
},
在寫這個例子時針對這段代碼我存在以下疑惑：
- componentDidMount是發生在組建掛載之后，渲染之前的為什么還要判斷
if (this.isMounted())
這個問題我在官網上找到了解答，意思是執行異步請求的響應時，在更新 state 前， 一定要先通過 this.isMounted() 來檢測組件的狀態是否還是 mounted。
- 為什么要用
bind(this),有沒有別的方式可以替代它
實驗后發現，在$get的callback中，this的值會被更改為傳進來的數據，而我們希望this依然是App組件，因此要使用bind(this)。還有一種簡單的方法就是使用ES6中的=>來保證this的值不被更改，即：
$.get(this.props.source, (result)=> {
var user = result[0];
if (this.isMounted()) {
this.setState({
username: user.name,
url: user.items.html_url
});
}
});
