AJAX(Asynchronous Javascript And XML) = 非同步 JavaScript + XML 在後臺與伺服器進行非同步資料交換，不用過載整個網頁，實現區域性重新整理。

建立 ajax 步驟：

1.建立 XMLHttpRequest 物件
2.建立一個新的 HTTP 請求，並指定該 HTTP 請求的型別、驗證資訊
3.設定響應 HTTP 請求狀態變化的回撥函式
4.傳送 HTTP 請求
5.獲取非同步呼叫返回的資料
6.使用 JavaScript 和 DOM 實現區域性重新整理

var xhr = new XMLHttpRequest();
xhr.open
 
("POST", url, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
        fn.call(this, xhr.responseText);
    }
};
xhr.send(data);

//完整封裝
function ajax
 
(method, url, data, callback, flag) {
    //建立一個ajax物件  但是要相容IE
    var xhr = null;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject('Micro soft.XMLHttp');
    }

    //請求方式不同時的相容性寫法
    method = method.toUpperCase(); //相容大小寫，避免傳入小寫不顯示
    if
 
 (method == 'GET') {
        xhr.open(method, url + '?' + data, flag);
        xhr.send();
    } else if (method == 'POST') {
        xhr.open(method, url, flag);
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
        xhr.send(data);
    }
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                callback(xhr.responseText);
            } else {
                console.log('error');
            }
        }
    }
}    

// jQuery $.ajax()
// 兩種寫法
// 寫法一
$('#input_box').on('input', function () {
    var value = this.value;
    $.ajax({
        type: 'GET', //請求型別
        url: 'http://wuzhe128520.xicp.net:40038',
        // url:' https://api.douban.com/v2/music/search',
        success: function (res) {
            console.log(res)
        }
    })
})

 // 寫法二：GET請求，jq提供的簡化版
  $(function (){
    S.get('http://wuzhe128520.xicp.net:40038',function(res){
        console.log(res)
    })
})