木心

毕竟几人真得鹿，不知终日梦为鱼

导航

封装ajax

1.写一个类封装ajax：

 1 /*
 2   option有如下参数: 
 3     method：请求方式，
 4     url：请求地址，
 5     async：是否异步，
 6     params：请求体，可以是json对象，比如{name:'张三',age:10}，或字符串，比如"name=张三&age=10"
 7     callback：回调方法，
 8     type：服务器响应数据转换成什么类型
 9 */
10 function ajax(option) {
11     var xmlHttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
12     
13     if(!option.method) { // 如果option中不给属性method，默认为GET请求
14         option.method = "GET";
15     }
16     
17     if(option.async == undefined) { // 如果option中不给属性async，默认为异步请求 
18         option.async = true;
19     }
20     
21     // 如果option.params为undefined，下面这一个if块不会执行
22     // 如果option.params为json对象，比如{name:'张三',age:10}，转换成字符串"name=张三&age=10"
23     if(typeof option.params == 'object') {
24         //alert("option.params:" + option.params); // option.params:[object Object]
25         var tempArray = [];
26         for(var key in option.params) {
27             var value = option.params[key];
28             tempArray.push(key + "=" + value);
29         }
30         // tempArray ==> [ 'key1=value1', 'key2=value2']
31         // option.params ==> 'key1=value1&key2=value2'
32         option.params = tempArray.join("&");
33         
34         //alert("option.params:" + option.params); // option.params:name=张三&age=10
35     }
36     
37     if(option.params) {
38         if("GET" == option.method.toUpperCase()) {
39             option.url += "?" + option.params;
40             //alert(option.url); // /%E5%B0%81%E8%A3%85ajax/AServlet?name=张三&age=10
41         }
42     }
43     
44     xmlHttp.open(option.method, option.url, option.async);
45     
46     if("POST" == option.method.toUpperCase()) {
47         xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
48     }
49     
50     xmlHttp.send(option.params); // 如果请求方式为get，这里传的参数会被忽略
51     
52     xmlHttp.onreadystatechange = function() {
53         if(xmlHttp.readyState == 4) {
54             var data;
55             
56             if (!option.type || option.type == "text") { // 如果option中不给属性type，默认返为text
57                 data = xmlHttp.responseText;
58             } else if (option.type == "xml") {
59                 data = xmlHttp.responseXML;
60             } else if (option.type == "json") {
61                 data = eval("(" + xmlHttp.responseText + ")");
62             }
63             
64             option.callback(data);
65         }
66     }
67 }

 

2.写一个jsp页面，测试自己封装的ajax函数

<script type="text/javascript">
    // 测试自己封装的ajax函数
    window.onload = function() {
        var btn = document.getElementById("btn");
        btn.onclick = function() {
            
            var option = {
                url:"${pageContext.request.contextPath}/AServlet",
                callback:function(data) {
                    var fontEle = document.getElementById("font");
                    fontEle.innerHTML = data;
                },
                params:{name:'张三',age:10}
            };
            
            ajax(option);
            
        };
    };
</script>
</head>
<body>
    <input type="button" id="btn" value="点击发送Ajax请求"/>
    <h1><font color="red" id="font"></font></h1>
</body>

 

3.为了方便，ajax请求的url资源为一个Servlet，响应一个普通字符串

public class AServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
    
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
    
    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");
        System.out.println(request.getParameter("name")); // 张三
        System.out.println(request.getParameter("age")); // 10
        
        // 响应一个普通字符串
        response.getWriter().print("hello 世界！");
    }
}

 

4.测试服务端返回json格式的字符串

// jsp页面

<script type="text/javascript">
    // 测试自己封装的ajax函数
    window.onload = function() {
        var btn = document.getElementById("btn");
        btn.onclick = function() {
            
            var option = {
                url:"${pageContext.request.contextPath}/AServlet",
                callback:function(data) {
                    var fontEle = document.getElementById("font");
                    fontEle.innerHTML = data.name;
                },
                params:{name:'张三',age:10},
                type: 'json'
            };
            
            ajax(option);
            
        };
    };
</script>
</head>
<body>
    <input type="button" id="btn" value="点击发送Ajax请求"/>
    <h1><font color="red" id="font"></font></h1>
</body>

// Servlet代码：

public class AServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
    
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
    
    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");
        System.out.println(request.getParameter("name")); // 张三
        System.out.println(request.getParameter("age")); // 10
        
        // 响应json格式的字符串
        response.getWriter().print("{\"name\":\"测试\"}");
    }
}

 

posted on 2019-02-28 18:19  wenbin_ouyang  阅读(140)  评论(0)  编辑  收藏  举报