前端開發的ajax

[# ajax

如何發出請求

• form表單action發出請求，重新整理頁面
• a標籤的href, 重新整理或者跳轉
• img標籤src，可以通過onload和onerror
• script標籤src，可以通過動態建立script，jsonp用法

微軟

IE5率先在js中引入ActiveX物件[這個東西我的確用過簡單說下，在IE8中如果想呼叫CMD操作讓IE跳往谷歌可以用這個物件]，之後各大瀏覽器廠商模仿寫出xmlhttprequest。

AJAX

AJAX非同步的javascript+xml

使用ajax

    var xhr = new XMLHttpRequest();
    xhr.open(method, url) // 啟動
    xhr.onreadystatechange = function(){
        if (xhr.readyState==4){ // 響應完畢
            console.log(xhr.status);
            if(xhr.status >= 200 && xhr.status < 300) {
                console.log('請求成功');
                var string = xhr.responseText
            }
        }
    }
    xhr.send() // 發出
複製程式碼

封裝ajax

    window.$  = window.jquery;
    window.jquery = {
        ajax: function({url, method, header, body}){
            return new Promise((reject, resolve) => {
                var xhr = new XMLHttpRequest();
                xhr.open(method, url)
                Object.keys(header).forEach( key => {
                    xhr.setRequestHeader(key, header[key])
                })
                xhr.onreadystatechange = function(){
                    if (xhr.readyState==4){ // 響應完畢
                        console.log(xhr.status);
                        if(xhr.status >= 200 && xhr.status < 300) {
                            reject.call(undefined, xhr.responseText)
                        } else {
                            resolve.call(undefined, xhr.responseText)
                        }
                    }
                }  
            })
            xhr.send(body) 
        }        
    }
    jquery.ajax().then()
複製程式碼