《Vue.js实战一书p231练习试做

Posted 2022-08-19 sx00xs

练习： 学习XMLHttpRequest （即XHR ）相关知识，开发一个简单的 ajax 插件，用于异步获
取服务端数据。

解答：

书作者提供了一段代码作为参考，实际上是要求我们把这段代码封装起来，此插件会提供 2 个接口：get 和 post，接受一个字符串参数：url

const install = function(Vue, options=)

　　　//辅助函数，用于创建 xhr对象，添加readystatechange事件处理函数
    function createXhr()
        const xhr = new XMLHttpRequest();
        xhr.onreadystatechange=function()
            if(xhr.response===4)
                const status = xhr.status;
                if(status >= 200 && status < 300)
                    options.success &&
                    options.success(JSON.parse(xhr.responseText),xhr.responseXML);
                else
                    options.error &&
                    options.error(status);
                
            
        ;
        return xhr;
    
　　//辅助函数，用于·创建传送给服务器的数据data
    function createData()
        const data =[];
        for(let i in options.data)
            data.push(encodeURIComponent(i) + 
            ‘=‘ + encodeURIComponent(options.data[i]));
        
        data=data.join(‘&‘);
        return data;
    

    const ajax = new Vue(
        methods:
　　　　　　　//接口1，接受url参数，
            get(url)
                const xhr = createXhr();
                const data = createData();
                xhr.open(‘GET‘, url + ‘?‘ + data, true);
                xhr.send(null);
            ,
　　　　　　　　//接口2，接受url参数
            post(url)
                const xhr = createXhr();
                const data = createData();
                xhr.post(‘POST‘, url, true);
                xhr.setRequestHeader(
                    ‘Content-Type‘,
                    ‘application/x-www-form-rulencoded‘
                );
                xhr.send(data);
            
        
    );

    Vue.prototype.$ajax = ajax;

;

export default install;