后端程序员如何玩转AJAX

1.原生的Ajax入门 (感觉很是繁琐,所以一般我们都是用简单的方式)

创建一个核心对象 XMLHttpRequest

1         var xmlhttp;
2         if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
3             xmlhttp = new XMLHttpRequest();
4         } else {// code for IE6, IE5
5             xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
6         }

编写一个回调函数

xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                //xmlhttp.responseText;
                //这里可以对返回的数据进行处理
            }
        }

编写请求方式和请求的路径(open操作)

xmlhttp.open("GET", "${pageContext.request.contextPath}/ajax1", true);

发送请求(send操作)
```
xmlhttp.send();
```

入门案例演示

前端页面

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 7 <title>AJAX</title>
 8 </head>
 9 <body>
10     <button onclick="yuansheng()">点我一下</button>
11 </body>
12 <script type="text/javascript">
13     function yuansheng() {
14         var xmlhttp;
15         if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
16             xmlhttp = new XMLHttpRequest();
17         } else {// code for IE6, IE5
18             xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
19         }
20         xmlhttp.onreadystatechange = function() {
21             if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
22                 //xmlhttp.responseText;
23                 alert(xmlhttp.responseText);
24             }
25         }
26         xmlhttp.open("GET", "${pageContext.request.contextPath}/ajax1", true);
27         xmlhttp.send();
28 
29     }
30 </script>
31 </html>

View Code

Servlet页面

 1 package ajax;
 2 
 3 import java.io.IOException;
 4 import javax.servlet.ServletException;
 5 import javax.servlet.annotation.WebServlet;
 6 import javax.servlet.http.HttpServlet;
 7 import javax.servlet.http.HttpServletRequest;
 8 import javax.servlet.http.HttpServletResponse;
 9 
10 
11 @WebServlet("/ajax1")
12 public class YuanshengAjax extends HttpServlet {
13     private static final long serialVersionUID = 1L;
14 
15     protected void doGet(HttpServletRequest request, HttpServletResponse response)
16             throws ServletException, IOException {
17         System.out.println("点我了一下");
18         response.getWriter().print("hello");
19     }
20 
21     protected void doPost(HttpServletRequest request, HttpServletResponse response)
22             throws ServletException, IOException {
23         doGet(request, response);
24     }
25 
26 }

View Code

2.Jquery发送Ajax (记得导入jquery.js)

方式一:jquery对象.load(url,params,function(数据){});
```
$("#feeds").load("feeds.html");
```

★★★方式二:$.get(url,params,function(数据){},type);

     function jqget() {
        $.get("${pageContext.request.contextPath}/jsget", {
            "hello" : "hellovalue"
        }, function(data) {
            alert(data);
        },type="json");

    }

★★★方式三:$.post(url,params,function(数据){},type);

    function jqpost(){
        $.post("${pageContext.request.contextPath}/jspost", {
            "hello" : "hellovalue"
        }, function(data) {
            alert(data);
        },type="json");
    }

方式四:$.ajax([选项]);

$.ajax({ url: "test.html", context: document.body, success: function(){
    $(this).addClass("done");
}});

3.Jquery发送Ajax如何发送数据

$.get(url,params,function(数据){},type);
- params:请求的参数参数为key\value的形式 key=value {"":"","":""}
$.post(url,params,function(数据){},type);
- params:请求的参数参数为key\value的形式 key=value {"":"","":""}

4.Jquery发送的Ajax如何接受数据

在使用Ajax发送Ajax的时候我们可以在我们可以通过指定type的值来设置返回数据的格式　　
- type:返回内容格式，xml, html, script, json, text, _default。我们经常在开发中使用"json"

如果后台返回的数据为json格式我们如何获取呢?

    function jqget() {
        $.get("${pageContext.request.contextPath}/jsget", {
            "hello" : "hellovalue"
        }, function(data) {
            var j = eval(json);
            alert(j.username)
        },type="json");

    }

posted @ 2017-11-13 02:20 jimisun 阅读(1208) 评论(0) 编辑收藏举报

刷新页面返回顶部

jimisun

后端程序员如何玩转AJAX

公告