ajax的封装

最新推荐文章于 2023-09-20 10:27:08 发布

weixin_30896825

最新推荐文章于 2023-09-20 10:27:08 发布

阅读量42

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xagg/p/10853819.html

(function () {

    var ajax = {
        getxhr: function () {
            return new XMLHttpRequest();
        },
        get: function (url, fun, sync = true) {
            // 调用对象中的方法获取xhr对象
            var xhr = this.getxhr();
            // 设置状态码改变事件
            xhr.onreadystatechange = function () {
                // 状态码为4 说明服务器返回结束 客户端接收到全部数据
                if (xhr.readyState == 4) {

                    fun(xhr.responseText);
                }
            }
            xhr.open('get', url, sync);
            xhr.send();
        },

        post: function (url, post_data, sync = true, fun) {
            var xhr = this.getxhr();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    fun(xhr.responseText);
                }
            }
            xhr.open('post', url, sync);
            xhr.send(post_data);
        }
    }

    // 封装时将封装内容给window对象
    // 不要和现有window对象中的属性重名
    window.myajax = ajax;

})()

封装完成后使用时直接在需要使用的位置引入例如： <script src="./ajax.js"></script>

通过myajax.get ( ) / post ( )的方式使用

例：html部分

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

myajax.get('http://127.0.0.1/gets', function (d) {

alert(d);

})

}

</script>

</html>

服务器部分：

var http = require('http');
var fs = require('fs');
var url = require('url');
var server = http.createServer();
server.listen(8080,function(){
    console.log('8080')
});
server.on('request',function(req,res){
    var urls = url.parse(req.url,true);
    if (urls.pathname == '/gets'){
        res.end('hello world!');
    }else{
        fs.readFile('.'+urls.pathname,function(err,data_str){
            if(!err){
                res.end(data_str);
            }else{
                res.end('');
            }
        })
    }
　　
})