Ten的XHR



Ten.XHR = new Ten.Class({                                                                         // XHR : XMLHttpRequest
    initialize: function(uri,opts,obj,callPropertyName) {                                         //
        Ten.EventDispatcher.implementEventDispatcher(this);                                       //
        this.method = 'GET';                                                                      //
                                                                                                  //
        if (!uri) return;                                                                         //
                                                                                                  //
        if (!Ten.XHR.isSafeUri(uri)) {                                                            //
            throw "host differs : " + uri;                                                        //
        }                                                                                         //
                                                                                                  //
        if (!opts) opts = {};                                                                     // 只是为了opts.method不报错
                                                                                                  //
        if (opts.method)                                                                          //
            this.method = opts.method;                                                            //
                                                                                                  //
        var self = this;                                                                          //
        this.addEventListener('complete', function() {                                            //
            if (!obj) return;                                                                     //
            if (typeof(obj) == 'function' && typeof(callPropertyName) == 'undefined') {           //
                obj.call(obj, self.request);                                                      //
            } else {                                                                              //
                obj[callPropertyName].call(obj, self.request);                                    //
            }                                                                                     //
        });                                                                                       //
                                                                                                  //
        this.load(uri, opts.data);                                                                //
    },                                                                                            //
    getXMLHttpRequest: function() {                                                               //
        var xhr;                                                                                  //
        var tryThese = [                                                                          //
            function () { return new XMLHttpRequest(); },                                         //
            function () { return new ActiveXObject('Msxml2.XMLHTTP'); },                          //
            function () { return new ActiveXObject('Microsoft.XMLHTTP'); },                       //
            function () { return new ActiveXObject('Msxml2.XMLHTTP.4.0'); }                       //
        ];                                                                                        //
        for (var i = 0; i < tryThese.length; i++) {                                               //
            var func = tryThese[i];                                                               //
            try {                                                                                 //
                xhr = func;                                                                       //
                return func();                                                                    //
            } catch (e) {                                                                         //
                //alert(e);                                                                       //
            }                                                                                     //
        }                                                                                         //
        return xhr;                                                                               //
    },                                                                                            //
    isSafeUri: function(uri) {                                                                    //
        if (uri.match(/^\w+:/) || uri.match(/^\/\//)) {                                           //
            if (uri.split('/')[2] == location.host) return true;                                  //
            else return false;                                                                    //
        } else if (uri.match(/^\/[^\/]/) || uri == '/') {                                         //
            return true;                                                                          //
        } else if (!uri || uri.length == 0) {                                                     //
            return false;                                                                         //
        }                                                                                         //
        return true;                                                                              //
    },                                                                                            //
    makePostData: function(data) {                                                                //
        var regexp = /%20/g;                                                                      //
        if (typeof data == 'string' || (data instanceof String)) {                                //
            return encodeURIComponent(data).replace(regexp, '+');                                 //
        }                                                                                         //
        var pairs = [];                                                                           //
        for (var k in data) {                                                                     //
            if (typeof data[k] == 'undefined') continue;                                          //
            var prefix = encodeURIComponent(k).replace(regexp, '+') + '=';                        //
            var values = Array.prototype.concat(data[k]);                                         //
            for (var i = 0; i < values.length; i++) {                                             //
                var pair = prefix + encodeURIComponent(values[i]).replace(regexp, '+');           //
                pairs.push(pair);                                                                 //
            }                                                                                     //
        }                                                                                         //
        return pairs.join('&');                                                                   //
    }                                                                                             //
},{                                                                                               //
    load: function(url, params) {                                                                 //
        var req = Ten.XHR.getXMLHttpRequest();                                                    //
        this.request = req;                                                                       //
                                                                                                  //
        var self = this;                                                                          //
        req.onreadystatechange = function() {                                                     //
            self.stateChangeHandler.call(self, req);                                              //
        };                                                                                        //
        params = params ? Ten.XHR.makePostData(params) : null;                                    //
                                                                                                  //
        req.open(this.method, url, true);                                                         //
        if (this.method == 'POST')                                                                //
            req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');            // 最常见的 POST 提交数据的方式.提交的数据按照 key1=val1&key2=val2 的方式进行编码,key 和 val 都进行了 URL 转码。
        req.send(params);                                                                         //
    },                                                                                            //
    stateChangeHandler: function(req) {                                                           //
        this.dispatchEvent('state_change');                                                       //
                                                                                                  //
        if (req.readyState == 4) {                                                                //
            this.dispatchEvent('ready', req.status.toString());                                   //
                                                                                                  //
            if (req.status >= 200 && req.status < 300) {                                          //
                this.dispatchEvent('complete', req);                                              //
            } else {                                                                              //
                this.dispatchEvent('error', req);                                                 //
            }                                                                                     //
        }                                                                                         //
    }                                                                                             //
});                                                                                               //


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
XHR 是 XMLHttpRequest 的缩写,它是一种可以在不重新加载整个页面的情况下,通过 JavaScript 发送 HTTP 请求和接收服务器响应的技术。在网页开发中,我们经常会用到 XHR 来实现异步数据交互,比如获取远程数据、发送表单数据等等。 要实现一个简单的 XHR 请求,我们可以通过以下几个步骤来操作: 1. 创建一个 XMLHttpRequest 对象 2. 指定请求的方法、URL 和是否异步 3. 发送请求 4. 监听 XHR 对象的状态变化,并在接收到响应后处理数据 下面是一个简单的示例代码: ```javascript var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://api.example.com/data', true); xhr.send(); xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE) { if (xhr.status === 200) { console.log('成功收到响应:', xhr.responseText); } else { console.log('请求出错:', xhr.status); } } }; ``` 在这个例子中,我们创建了一个 XHR 对象,并使用 GET 方法向 https://api.example.com/data 发送了一个异步请求。然后,我们监听 XHR 对象的状态变化,当 readyState 变为 XMLHttpRequest.DONE 时,表示请求完成。此时我们可以通过 status 属性来判断请求的状态,通过 responseText 属性来获取服务器返回的数据。 总之,XHR 是一种非常有用的技术,可以让我们在网页中实现更加流畅的用户体验,并为用户提供更加丰富的交互功能。希望这个回答能够帮助你更好地了解并使用 XHR

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值