手写ajax请求

1.XMLHttpRequest的发展

Level 1

• 受同源策略限制，不能发送跨域请求
• 不能发送二进制文件，只能发送纯文本数据
• 在发送和获取数据的过程中，无法实时获取进度信息，只能判断是否完成

Level 2

• 可以发送跨域请求，在Origin头部添加源信息
• 支持发送和接收二进制数据
• 新增

'use strict';

document.addEventListener('DOMContentLoaded', function () {
    var form=document.querySelector('#form');

    form.addEventListener('submit',function(event){ 
        event.preventDefault();

        var formData=new FormData(form);
        ajax({
            url: 'red',
            type: 'GET',
            data: formData,
            success: function(data){
                console.log(data);
            },
            error: function(status){
                console.log(status);
            }
        });
    });

    //发送ajax请求
    function ajax(userOption) {
        var defaultOption = {
            url: location.href,
            type: 'GET',   //对大小不敏感
            success: function () {},
            error: function () {},
            data: null,
            timeout: 0
        };
        var option = Object.assign({}, defaultOption, userOption);

        var xhr = new XMLHttpRequest();
        if(option.timeout>0){
            xhr.timeout=option.timeout;
        }

        //处理响应
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
                    option.success(xhr.responseText);
                } else {
                    option.error(xhr.status, xhr.statusText);
                }
            }
        }
        
        //处理超时
        xhr.ontimeout=function(){
            option.error(0,'timeout');
        }

        //处理错误
        xhr.onerror=function(){
            options.error(0,'error');
        }

        if(option.type.toUpperCase()==='GET'){
            var url=formateUrl(option.url,option.data);
            //带上参数，是否异步发送请求
            xhr.open(option.type, url, true);
            xhr.send(null);
        } else {
            xhr.open(option.type, option.url, true);
            xhr.send(option.data);
        }
    }

    //格式化get请求的url
    function formateUrl(url, data) {
        //为参数间添加&符号，可以直接使用数组join处理
        var params=[];
        if(data instanceof FormData){
            var entries=data.entries();
            for(var i of entries){
                params.push(i[0]+'='+i[1]);
            }
        } else {
            for(var i in data){
                if(data.hasOwnProperty(i)){
                    params.push(i+'='+data[i]);
                }
            }
        }

        if(params.length>0){
            if (url.indexOf('?') === -1) {
                url+='?';
            } else {
                url+='&';
            }
            url+=params.join('&');
        }
        return url;
    }
});

其中：

1.formData

• formData中的表单的值是私有的，无法直接通过属性访问，需要通过get函数才能访问
• formData对象可以直接放入xhr.send(formData)中发送到服务端

2.timeout超时

• 可以设置xhr.timeout超时时间，请求超过时间后就终止，触发timeout事件
• 超时时间是在调用send，开始发送请求开始算起的

3.限制

• xhr无法获取响应中的Set-Cookie字段
• 跨域资源请求无法携带cookie和响应cookie

4.取消异步请求

可以通过调用xhr.abort()来取消异步请求