ajax原生js面向对象封装及开发时遇到的问题

在工作中我们经常会向后台请求各种数据，遇到各种问题，以自己在该开始开发时经常出现的错误来说明。

1、首先定义一个对象 Ajax

    var Ajax = {        ajax : function(type,url,callback){            var xhr = new XMLHttpRequest();//定义对象            xhr.open(type , url , true);            if(type == 'post'){                 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=utf-8');                xhr.send();            }else{                xhr.send();            }            xhr.onreadystatechange = function () {                if( xhr.readyState === 4 && xhr.status ===200){                    console.log(xhr.responseText)                    console.log(JSON.parse(xhr.responseText));                    callback && callback();                }            }        }}

上面是封装好的Ajax对象,在调用时只需要进行下面操作

window.onload = function (){    Ajax.ajax('type' ,'自己数据的路径' , function (){//进行数据的处理        console.log(this);//查看此时的对象是谁        console.log(arguments);//实参列表    } )}

出现下面图片中的问题是如何出现的：

(1)没有开启服务器，或者没有再服务器端打开文件，只是本地打开
(2)有可能是服务器端口冲突，没有达到同源策略。

2、在ajax请求时需要给路径后面链接一些参数，然后去请求数据（以post为例封装）

function Post(opt) {    this.init(opt);}Post.prototype = {    constructor: 'Post',    init: function (opt) {        this.method = 'POST';        this.data = opt.data || null;        this.url = opt.url || '';        this.async = true;        this.success = opt.success || function () {}        this.format();    },    format: function () {//将data中的键值对用变成“键=值&键=值”        var data = this.data;        var params = [];        for (var key in data) {            params.push(key + '=' + data[key]);        }        this.postData = params.join('&');        this.xhr();    },    xhr: function () {        var that = this;        var xhr = new XMLHttpRequest();//定义一个对象        xhr.open(this.method, this.url, this.async);        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=utf-8');        xhr.send(this.postData);//发送        xhr.onreadystatechange = function () {            if (xhr.status === 200 && xhr.readyState === 4) {                that.success(xhr.response);            }        }    }}

然后调用此函数，demo如下：

new Post({            url:'http://www.tuling123.com/openapi/api',            data:{                "键":"值",                "键":"值"            },            success:function(res){                console.log(res)                console.log(this)                console.log(argunents)            }        })