ajax 续3 比较好的对ajax的get和post进行封装和实现回调

思想：

续2的代码，封装的也算是可以，

但要求参数必须要顺序出的出现：能否给一部分数据，不用null占位：

       思想就是接收Object即Map：

添加一个get方法,url请求地址,succ是成功以后的回调，falure是失败以后的回调

 直接接受一个map={url:url,succ:suc,falure:fal,xtype:text}

 添加post方法，{url:url,param:{name:Jack,age:90},succ:suc,failure:fal,xtype:text}

jsp页面使用时传递是一个map，在js中map就是一个Object

var ajax = newAjax();

         // var url ="<c:url value='/xml/a.txt'/>";

         // var url ="<c:url value='/xml/aa.json'/>";

        // var url = "<c:urlvalue='/xml/a.txt'/>";

         var url = "<c:urlvalue='/JSONServlet'/>";

         ajax.post(

                 {

                    url:url,

                    succ:function(data){

                           alert("成功了"+data);

                           // alert(data.length);

                          // alert(data.getElementsByTagName("user").length);                          这是一个map，同时也是一个对象

                     },

                     failure:function(status){

                         alert("没有成功.."+status);

                     },

                     xtype:"text",

                     param:'name=张'

                 }

         );

1.xhr.js

//声明一个方法

function Ajax() {

    // 实例化xhr对象

    var xhr = null;

    if (window.XMLHttpRequest){

        xhr= newXMLHttpRequest();

    }else{

        xhr= newActiveXObject("Microsoft.XMLHttp");

    }

    // 添加一个get方法,url请求地址,succ是成功以后的回调，falure是失败以后的回调

    // 直接接受一个map={url:url,succ:suc,falure:fal,xtype:text}

    this.get = function(obj) {

        if (!obj.url) {// 如果没有URL则直接返回

            return;

        }

        xhr.open("GET", obj.url, true);

        // 设置回调

        xhr.onreadystatechange= function(){

            if (xhr.readyState == 4) {

                if (xhr.status == 200) {

                   if (obj.succ) {

                       // 判断succ是否是一个函数

                       if (typeof (obj.succ) == "function"){

                           // 获取数据,判断返回类型

                           var res = null;

                           if (!obj.xtype || obj.xtype == "text") {

                               res= xhr.responseText;

                           }elseif(obj.xtype == "json") {

                               res= xhr.responseText;

                               res= eval("("+ res + ")");

                           }elseif(obj.xtype == "xml") {

                               res= xhr.responseXML;

                           }

                           obj.succ(res);

                       }

                   }

                }else{

                   if (obj.failure) {

                       if (typeof (obj.failure) == "function"){

                           // 返回错误的状态码

                           obj.failure(xhr.status);

                       }

                   }

                }

            }

        };

        // 发送请求

        xhr.send(null);

    };

    // 添加post方法，{url:url,param:{name:Jack,age:90},succ:suc,failure:fal,xtype:text}

    this.post = function(obj) {

        if (!obj.url) {// 如果没有url直接返回

            return;

        }

        xhr.open("POST", obj.url, true);

        xhr.setRequestHeader("Content-type",

                "application/x-www-form-urlencoded");

        xhr.onreadystatechange= function(){

            if (xhr.readyState == 4) {

                if (xhr.status == 200) {

                   if (obj.succ) {

                       var res = xhr.responseText;

                       if (obj.xtype == "json") {

                           res= eval("("+ res + ")");

                       }elseif(obj.xtype == "xml"){

                           res= xhr.responseXML;

                       }

                       if (typeof (obj.succ) == "function"){

                           obj.succ(res);

                       }

                   }

                }else{

                   if (typeof (obj.failure) == "function"){

                       obj.failure(xhr.status);

                   }

                }

            }

        };

        if (obj.param) {

            xhr.send(obj.param);

        }else{

            xhr.send("");

        }

    };

}

2.xhr.jsp

<script type="text/javascript" src="<c:url value='/js/xhr2.js'/>"></script>

</head>

<body>

  <button onclick="_one();">get</button>

  <button onclick="_two();">post</button>

</body>

<script type="text/javascript">

  function_one(){

     //声明ajax对象

     var ajax = newAjax();

     // var url ="<c:url value='/xml/a.txt'/>";

     // var url ="<c:url value='/xml/aa.json'/>";

     //  var url = "<c:urlvalue='/xml/a.xml'/>";

     var url = "<c:urlvalue='/JSONServlet'/>";

     ajax.get(

             {

                 url:url,

                 succ:function(data){

                       //alert("成功了"+data);

                       // alert(data.length);

                       alert(data.getElementsByTagName("user").length);

                 },

                 failure:function(status){

                     alert("没有成功.."+status);

                 },

                 xtype:"json"

             }

     );

  };

  function_two(){

         //声明ajax对象

         var ajax = newAjax();

         // var url ="<c:url value='/xml/a.txt'/>";

         // var url ="<c:url value='/xml/aa.json'/>";

        // var url = "<c:urlvalue='/xml/a.txt'/>";

         var url = "<c:urlvalue='/JSONServlet'/>";

         ajax.post(

                 {

                    url:url,

                    succ:function(data){

                           alert("成功了"+data);

                           // alert(data.length);

                          // alert(data.getElementsByTagName("user").length);

                     },

                     failure:function(status){

                         alert("没有成功.."+status);

                     },

                     xtype:"text",

                     param:'name=张'

                 }

         );

       };

</script>

</html>

3.当xhr2.jsp访问servlet时:

public classJSONServlet extends HttpServlet {
    public voiddoGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException,IOException {
        System.err.println("get.............");
        Randomr = newRandom();
        int a = r.nextInt(30);
        List<User>us = newArrayList<User>();
        for (int i = 0; i < a; i++) {
            us.add(new User("U" + i, "张三" + i, i));
        }
        // 2:设置返回text/html
        response.setContentType("text/html;charset=UTF-8");
        //3:转成json
        Stringstr = JSONArray.toJSONString(us);
        response.getWriter().print(str);
    }
    public voiddoPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException,IOException {
        request.setCharacterEncoding("UTF-8");
        Stringname = request.getParameter("name");
        System.err.println("post............."+name);
        
        
        Randomr = newRandom();
        int a = r.nextInt(30);
        List<User>us = newArrayList<User>();
        for (int i = 0; i < a; i++) {
            us.add(new User("U" + i, "张三" + i, i));
        }
        // 2:设置返回text/html
        response.setContentType("text/html;charset=UTF-8");
        //3:转成json
        Stringstr = JSONArray.toJSONString(us);
        response.getWriter().print(str);
    }
}

运行结果：