前段時間，因為太無聊了，用PHP寫了一個產生隨機密碼的函數，自我感覺挺良好的，於是便想做成一個網頁，以後註冊賬號什麽的就不用再費神想密碼了，直接隨機產生一個就可以用了，還可以順便做一個密碼管理的小小web app。雖然只是自己用的，但也要把使用體驗做得好一些，所以就要使用到Ajax，操作頁勾選好組成密碼的字符以後，點擊一下創建密碼，通過Ajax向後臺提交請求，再把產生的密碼顯示出來。

<----就像這樣---->

以前，我用過jQuery的Ajax，不夠現在覺得老用別人的框架一點也不cool，我也得學著寫寫原生的JavaScript才好。翻閱了Mozilla的MDN中關於Ajax的文檔後，用了十來分鐘便拼湊出來一段可行的JavaScript代碼了。

 1     httpRequest = new XMLHttpRequest();
 2     httpRequest.onreadystatechange = function() {
 3         try {
 4             if (httpRequest.readyState === XMLHttpRequest.DONE) {
 5                 if (httpRequest.status === 200) {
 6                     document.getElementById("bov-getPassword").innerHTML = httpRequest.responseText;
 
 7                 } else {
 8                     alert(‘There was a problem with the request.‘);
 9                 }
10             }
11         }
12         catch( e ) {
13             alert(‘Caught Exception: ‘ + e.description);
14         }
15     };
16     httpRequest.open( ‘POST‘, bovSecuraURL, true
 
 );
17     httpRequest.send();

雖然這段代碼並不長，不過考慮到Ajax的應用場景還是非常多的，有必要封裝起來，寫出來一個自己的Ajax類，那以後調用起來就能更符合自己的使用習慣了。在Mozilla的MDN文檔的幫助下，我很快也寫出來了自己的第一個JavaScript類。

 1 class bovAjax {
 2     init ( URL, output, type) {
 3         this.URL = URL;
 4         this.output = output;
 5         this.type = type;
 6         this.http = new XMLHttpRequest();
 7     }
 8     run() {
 9         this.http.onreadystatechange = function() {//這裏出問題了
10             try {
11                 if (this.http.readyState === XMLHttpRequest.DONE) {
12                     if (this.http.status === 200) {
13                         alert(this.http.responseText);
14                         if( 1 == this.type ) {
15                             this.output.value = this.http.responseText;
16                         } else ( 2 == this.type ) {
17                             this.output.innerHTML = this.http.responseText;
18                         }
19                     } else {
20                         alert(‘There was a problem with the request.‘);
21                     }
22                 }
23             }
24             catch( e ) {
25                 alert(‘Caught Exception: ‘ + e.description);
26             }
27         }
28         this.http.open( ‘POST‘, this.URL, true );
29         this.http.send();
30     }
31 }

但是這個類並不能給我任何輸出，一直給我拋出undefined的錯誤。作為一個Js新人，這個問題實在讓我太為難了。一邊看代碼一邊調試代碼，好不容易拼湊出來的一個類，我早已經眼冒金星，結果還出錯了。反復調試了一個下午，直到晚上，某寶君下班回家幫忙排查，才找到問題出在了this.http.onreadystatechange = function() {}；這裏。原本的this應該是bovAjax的對象指針，但是創建了XMLHttpRequest對象以後，this的指向便混亂出錯了，指向了XMLHttpRequest。

找到問題就好辦了。既然創建XMLHttpRequest對象會使this指向出錯，只要重新定義變量，不使用this調用變量或者方法就可以解決問題了。於是我換了一個類的定義方式，創建新的變量把變量成員的值提取出來，再用到成員方法裏去。

 1 function bovAjax( URL, output, type ) {
 2     this.url = URL;
 3     this.output = output;
 4     this.type = type;
 5     this.run = function() {
 6         var requestURL = this.url;
 7         var outputArea = this.output;
 8         var outputType = this.type;    
 9         httpRequest = new XMLHttpRequest();
10         httpRequest.onreadystatechange = function() {
11             try {
12                 if (httpRequest.readyState === XMLHttpRequest.DONE) {
13                     if (httpRequest.status === 200) {
14                         outputArea.innerHTML = httpRequest.responseText;
15                     } else {
16                         alert(‘There was a problem with the request.‘);
17                     }
18                 }
19             }
20             catch( e ) {
21                 alert(‘Caught Exception: ‘ + e.description);
22             }
23         };
24         httpRequest.open( ‘POST‘, requestURL, true );
25         httpRequest.send();
26     }
27 }

果然，這樣改了以後，程序能夠正確輸出我想要的結果了。

但又總覺得這樣的解決方案太醜陋了，一點都不符合我的代碼美學。於是在某寶君的提示和幫助下，最後，屬於我自己的Ajax類變成了這樣：

 1 class bovAjax extends XMLHttpRequest {
 2     constructor (URL, output, type) {
 3         super();
 4         this.URL = URL;
 5         this.output = output;
 6         this.type   = type;
 7     }
 8 
 9     onreadystatechange_alias() {
10         try {
11             if (this.readyState === XMLHttpRequest.DONE) {
12                 if (this.status === 200) {
13                     if( 1 == this.type) {
14                         this.output.value = this.responseText;
15                     } else if( 2 == this.type ) {
16                         this.output.innerHTML = this.responseText;
17                     }
18                 } else {
19                     alert(‘There was a problem with the request.‘);
20                 }
21             }
22         }
23         catch( e ) {
24             alert(‘Caught Exception: ‘ + e.description);
25         }
26     }
27     run() {
28       this.onreadystatechange = this.onreadystatechange_alias;
29       this.open( ‘POST‘, this.URL, true );
30       this.send();
31     }
32 }

現在只寫了單個數據傳輸的方法，以後還可以增加其他數據形式的傳輸方法，譬如Json之類的。

第一次的原生JavaScript嘗試非常愉快！以後還請多多指教哦。

封裝自己的ajax類