jsonp和XMLHttpRequest用法异同，jsp+js+servlet+mysql

来源：互联网发布：大数据搜索引擎技术编辑：程序博客网时间：2024/06/06 10:01

XMLHttpRequest版：

index.html:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>  <%      String path = request.getContextPath();      String basePath = request.getScheme() + "://"              + request.getServerName() + ":" + request.getServerPort()              + path + "/";  %>  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  <html>  <head>  <base href="<%=basePath%>">    <title>My JSP 'index.jsp' starting page</title>  <meta http-equiv="pragma" content="no-cache">  <meta http-equiv="cache-control" content="no-cache">  <meta http-equiv="expires" content="0">  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  <meta http-equiv="description" content="This is my page">  <!--     <link rel="stylesheet" type="text/css" href="styles.css">     -->  </head>    <body>      <input type="button" onclick="validate()" value="请求并解析JSON">      <div id="div"></div>      <table border="1" style="width:300px;height:200px;" id="table">          <tr id="tr" border="1">              <td>1</td>              <td>1</td>              <td>1</td>          </tr>            <tr border="1">              <td>1</td>              <td>1</td>              <td>1</td>          </tr>      </table>      <script type="text/javascript">           function validate(){       var div=document.getElementById("div");       var xmlhttp;       var table=document.getElementById('table');            if (window.XMLHttpRequest) {              xmlhttp = new XMLHttpRequest();          } else {              xmlhttp = new ActiveObject("Microsoft.XMLHTTP");          }          xmlhttp.onreadystatechange = function() {              if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {                  var x = xmlhttp.responseText                  div.innerHTML = x;                  var sd = eval("(" + x + ")");                    var arr = new Array();                  var i = 0;                  for ( var a in sd.person) {//获取有几个person                      var count = 0;//计算person属性值的个数                      i++;                      for ( var item in sd.person[a]) {                          count++;                          var p = sd.person[a][item];//得到属性值的内容                          table.rows[i - 1].cells[count - 1].innerHTML = p;//把内容填向table表格                      }                  }              }          }          var url = "json";          xmlhttp.open("POST", url, false);          xmlhttp.send();        }  </script>  </body>  </body>  </html>

servlet:

 public void doPost(HttpServletRequest request, HttpServletResponse response)              throws ServletException, IOException {                    response.setContentType("text/xml;character=utf-8");          response.setHeader("Cache-Control", "no-cache");          try {              //创建Person对象，保存数据，如果有数据库的话，此处数据应该为从数据库中取出                          classManager cl = new classManager();            List<classes> list = new ArrayList<classes>();            try {                  //创建JsonArray对象，JSONArray则是[]包裹起来的一个数组(Array)，此处调用方法将对象集合装入                  JSONArray json = JSONArray.fromObject(list);                  //JSONObject是一个{}包裹起来的一个对象(Object)，此处希望以对象为单位进行操作，所以创建JSONObject对象                  JSONObject jb = new JSONObject();                  //将jsonArray对象装入                  jb.put("person", json);                  //输出Json数据，它就是一种特殊格式的字符串                  response.getWriter().write(jb.toString());                                    /*此处可以用另一种方式将数据装入Json,同样可以,只是前台接受的是JSONArray对象，是[]包裹起来的一个数组(Array)                  *JSONArray jsonArray = new JSONArray();                  *JSONObject jb = new JSONObject();                  *jb.put("person", json);                  *jsonArray.add(jb);                  *response.getWriter().write(jsonArray.toString());                  */                                } catch (IOException e) {                  e.printStackTrace();              }          } catch (Exception e) {              e.printStackTrace();          }      }

jsonp版本：

index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>  <%      String path = request.getContextPath();      String basePath = request.getScheme() + "://"              + request.getServerName() + ":" + request.getServerPort()              + path + "/";  %>  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  <html>  <head>  <base href="<%=basePath%>">    <title>My JSP 'index.jsp' starting page</title>  <meta http-equiv="pragma" content="no-cache">  <meta http-equiv="cache-control" content="no-cache">  <meta http-equiv="expires" content="0">  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  <meta http-equiv="description" content="This is my page">  <!--     <link rel="stylesheet" type="text/css" href="styles.css">     -->  </head>    <body>        <div id="div"></div>      <table border="1" style="width:300px;height:200px;" id="table">          <tr id="tr" border="1">              <td>1</td>              <td>1</td>              <td>1</td>            <td>1</td>          </tr>            <tr border="1">              <td>1</td>              <td>1</td>              <td>1</td>             <td>1</td>         </tr>      </table>      <script type="text/javascript">      console.log("aaaaa");     function validate(sa){       console.log("aa");     var div=document.getElementById("div");         var table=document.getElementById("table");                    div.innerHTML = sa;                 var i = 0;                  for ( var a in sa.person) {//获取有几个person                      var count = 0;//计算person属性值的个数                      i++;                      for ( var item in sa.person[a]) {                          count++;                          var p = sa.person[a][item];//得到属性值的内容                          table.rows[i - 1].cells[count - 1].innerHTML = p;//把内容填向table表格                      }                  }      }  </script>  <script  src="json?callback=validate"></script>  </body>  </html>

servlet:

 public void doPost(HttpServletRequest request, HttpServletResponse response)              throws ServletException, IOException {                    response.setContentType("text/json;character=utf-8");           try {              //创建Person对象，保存数据，如果有数据库的话，此处数据应该为从数据库中取出             classManager cl = new classManager();           List<classes> list = new ArrayList<classes>();           String callback = request.getParameter("callback");            cl.showClass(list);            try {                //创建JsonArray对象，JSONArray则是[]包裹起来的一个数组(Array)，此处调用方法将对象集合装入                  JSONArray json = JSONArray.fromObject(list);                  //JSONObject是一个{}包裹起来的一个对象(Object)，此处希望以对象为单位进行操作，所以创建JSONObject对象                  JSONObject jb = new JSONObject();                  //将jsonArray对象装入                  jb.put("person", json);                  //输出Json数据，它就是一种特殊格式的字符串                  response.getWriter().write(callback+"("+jb.toString()+")");                                    /*此处可以用另一种方式将数据装入Json,同样可以,只是前台接受的是JSONArray对象，是[]包裹起来的一个数组(Array)                  *JSONArray jsonArray = new JSONArray();                  *JSONObject jb = new JSONObject();                  *jb.put("person", json);                  *jsonArray.add(jb);                  *response.getWriter().write(jsonArray.toString());                  */                                } catch (IOException e) {                  e.printStackTrace();              }          } catch (Exception e) {              e.printStackTrace();          }      }

XML版本

json版本

可以看出new XMLHttpRequest().responseText返回的是一串特殊的字符串，需要调用eval将其封装为json对象，然后对对象数组进行操作

而jsonp返回的是一个object对象，个人认为这里是json上传为object对象，然后对对象数组进行操作

博主刚入门，见识不深，如有指教，欢迎补充。

0 0