模仿jQuery的ajax的封装

/*
 * 我们使用了ajax 的xmlHttpRequest 跟服务器进行交互。
 *
 * 交互了有四个基本步骤
 * 1：创建对象
 * 2：建立连接
 * 3：发送请求
 * 4：接收数据
 *
 *  这些操作特别繁琐，一个页面有很多地方都发送ajax 请求。
 *  这里面我们就使用了一个jQuery 的框架，它提供了一些方法
 *  让我们来发送ajax 请求。 我模拟jQuery 封装一个方法出来
 *  我们以后用我们自己的方法来发送ajax 请求。
/*
 *  $.ajax({
 *      url:"",
 *      type:""
 *      data:"",
 *      success:function(){
 *      }
 *  });
 * */
var $={
    /*
     * 进来一个对象，出来一个字符串。
     * username=zhangsan&age=11
     *
     * */
    params:function(obj){
        var data='';

        for(var key in obj){

            data+=key+"="+obj[key]+"&"
        }
        return data.substring(0,data.length-1);
    },
    /*
     * 可以通过此方法来发送一个http 请求。
     * */
    ajax:function(obj){
        //实现这样的功能，可以用来发送请求。

        //接收用户传递的数据.
        var type=obj.type;
        var url=obj.url;
        var data=obj.data;
        var success=obj.success;
        var complete=obj.complete;
        var error=obj.error;


        //我必须创建一个XMLHttpRequest 对象。
        var xhr=new XMLHttpRequest();
        if(type=='get'){
            url=obj.url+"?"+this.params(data);
            data=null;
        }

        xhr.open(type,url);
        /*
         * post要给服务器端一个请求头
         * */
        if(type=='post'){
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            data=this.params(data);
        }
        //我在这里要进行一个判断，如果用户的请求时get
        //发送服务器的参数的数据就应该在请求的地址的后面
        //username=''&age=''
        //如果我的请求是post 请求，
        //假设get ，send(null);
        //如果是post ，send("username=zhangsan&age=11")
        xhr.send(data);
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4 && xhr.status==200){
               var data=xhr.responseText;
                success(data);
                complete();
            }
            else if(xhr.readyState==4 && xhr.status!=200){

                error();
                //这个属于请求完成了之后调用
                complete();
            }
        }
    }

};

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="ajax.js"></script>
    <script>
            $.ajax({
                url:"ajax.php",
                data:{
                    "username":"zhangsan"
                },
                type:"post",
                success:function(data){
                    alert(data);
                },
                //这个肯定是success 完成之后调用
                complete:function(){
                    alert("响应完成调用");
                },
                error:function(){
                    alert("出错了调用");
                }
            });

    </script>
</head>
<body>
</body>
</html>

  //jsonp demo。
        $.ajax({
            type: "get",
            async: false,
            url: "http://192.168.1.195:8080/yg_mobile/mobile/ygProduct/detail.do?id=1",
            dataType: "jsonp",
            jsonp: "callback", //传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
            jsonpCallback: "fn", //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
            success: function (json) {
                alert(json.id);
            },
            error: function () {
                alert('fail');
            }
        });

 
   /*生成任意长度的随机字符串。*/
 function randomString(len) {
 len = len || 32;
 var $chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
 var maxPos = $chars.length;
 var pwd = '';
 for (i = 0; i < len; i++) {
 pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
 }
 return pwd;
 };
 
 
 

秒客网

模仿jQuery的ajax的封装

相关文章