native javascript ajax

一直以來Aidec都是使用jquery來編寫前端的，但自從有天看到angularjs後（那陣子超紅的），便考慮學習一下這個由google開發的框架。但個人覺得他的學習曲線跟jquery比起來難度是比較高的，所以花了大約幾週才將它的基本用法搞懂，但是腦袋卻不知道這些功能要應用在什麼地方……（可能被jQuery荼毒太深），再加上學完後不久又出現facebook的react 甚至還有angularjs2.0 !! 這讓我深深覺得前端框架變化太快了，根本是一個還沒學好就又出新的了…… 因此決定不追隨流行框架，讓自己返樸歸真改去學原生javascript （打好基本功），說不定以後學框架就容易多了

Native Javascript Ajax vs jQuery Ajax

讓我們來比較一下原生ajax與jQuery ajax之間的差異吧！

jQuery Ajax 

一般ajax

<script>
$.ajax({
  type: 'POST',
  url: "path/to/api",
  data: "banana=yellow",
  success: function (data) {
    alert("Success: " + data);
  },
});
</script>

post

以post形式傳遞ajax

$.post( "ajax/test.html", function( data ) {
  $( ".result" ).html( data );
});

get 

以get的形式傳遞ajax

$.get( "ajax/test.html", function( data ) {
  $( ".result" ).html( data );
  alert( "Load was performed." );
});

load 

以POST形式傳遞到處理頁面,並回傳至指定的selector

(1).
$( "#a" ).load( "action.php" , somefunction );
function somefunction(){
    // code
}
(2).
$( "#a" ).load( "action.php" , {name:value} );

Native Ajax 

get

var r = new XMLHttpRequest();
r.open("GET", "path/to/api", true);
r.onreadystatechange = function () {
  if (r.readyState != 4 || r.status != 200) return;
  alert("Success: " + r.responseText);
};
r.send("banana=yellow");

post

var r = new XMLHttpRequest();
r.open("POST", "path/to/api", true);
r.onreadystatechange = function () {
  if (r.readyState != 4 || r.status != 200) return;
  alert("Success: " + r.responseText);
};
r.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
r.send("banana=yellow");

優缺點比較

綜合以上優缺點，可以得知原生js似乎比較麻煩，唯一的優點就是"快"。

但是我們也可以自己動手做一個解決上面的問題...以下是Aidec整理好的原生ajax js 有興趣的可以看看 (當然還是有不足的地方)

原生ajax js

var Ajax = {
    param: function (object) {
                var encodedString = '';
                for (var prop in object) {
                    if (object.hasOwnProperty(prop)) {
                        if (encodedString.length > 0) {
                            encodedString += '&';
                        }
                        encodedString += encodeURI(prop + '=' + object[prop]);
                    }
                }
                return encodedString;
            },
    xhr : null,
    request : function (url,method, data,success,failure){
        if (!this.xhr){
            this.xhr = window.ActiveX ? new ActiveXObject("Microsoft.XMLHTTP"): new XMLHttpRequest();
        }
        var self = this.xhr;
        self.onreadystatechange = function () {
            if (self.readyState === 4 && self.status === 200){ 
                //var response = JSON.parse(self.responseText);
                var response = self.responseText;
                success(response);
            }else if (self.readyState === 4) {  
                console.log('error');
            }
        };
        this.xhr.open(method,url,true);
        if(method=='POST'){
          this.xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
          
          if(typeof data === 'object'){
            data=this.param(data);
          }else{
            data=encodeURI(data);
          } 
          this.xhr.send(data);  
        }else{
             this.xhr.send();
         } 
    },
};

使用方法

var myName='aidec';
var myAge='24';
/*
    傳遞參數的方式 可以使用方式1或方式2都可以
*/
//傳遞的參數方式1
var data={name:myName,
          age:myAge 
         };
//傳遞的參數方式2
var data="name="+myName+"&age="+myAge;

          
//使用原生ajax         
Ajax.request("something.php","POST",data,function(r){
    //成功回傳
    console.log(r);
});

說明

Ajax.request(處理的頁面,傳遞的形式(POST/GET),傳遞的參數, 成功回調);

後記

今天的正文就到這邊啦~~ 改天再來寫其它框架的文章。

接下來就是我之前發生的小蠢事，那就是開頭的時候說到我覺得前端框架太多太雜有些又太肥，因此當時想找一個簡單輕量化的框架來用...

後來就找到了這個vanilla-js 起初看它的介紹說各家知名大網站都有用它的框架時，我就很納悶(竟然我沒聽過!!!)。後來又看到它寫說它的速度是其它框架的十幾倍快，我整個人當下的反應就是我跟外界脫離成這樣了嗎??

後來仔細瞧瞧它的code怎麼跟原生javascript那麼像...後來發現它真的是原生js，原來它是作者故意在嘲諷用框架的人...

但在我看來，它根本是在欺騙我這個英文不好的人啊~~~~ 

文章轉載或引用，請先告知並保留原文出處與連結！！(單純分享或非營利的只需保留原文出處，不用告知)

原文連結:
https://blog.aidec.tw/post/native-javascript-ajax