前端开发的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()