首页 > > 网页制作 > Javascript >

ajax 三种数据格式

2018-06-24 01:01:03来源：未知 阅读 ()

新老客户大回馈,云服务器低至5折

1.JSON（格式要正确，可以引jar包操作）

servlet代码

 1 package com.hsp.action;
 2 
 3 import java.io.IOException;
 4 import java.io.PrintWriter;
 5 
 6 import javax.json.JsonString;
 7 import javax.servlet.ServletException;
 8 import javax.servlet.annotation.WebServlet;
 9 import javax.servlet.http.HttpServlet;
10 import javax.servlet.http.HttpServletRequest;
11 import javax.servlet.http.HttpServletResponse;
12 
13 /**
14  * Servlet implementation class showCities
15  */
16 @WebServlet("/showCities")
17 public class showCities extends HttpServlet {
18     private static final long serialVersionUID = 1L;
19        
20     /**
21      * @see HttpServlet#HttpServlet()
22      */
23     public showCities() {
24         super();
25         // TODO Auto-generated constructor stub
26     }
27 
28     /**
29      * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
30      */
31     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
32         // TODO Auto-generated method stub
33     }
34 
35     /**
36      * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
37      */
38     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
39         // TODO Auto-generated method stub
40         response.setContentType("text/xml;charset=utf-8");  
41         response.setHeader("Cache-Control", "no-cache");
42         
43         //接收用户选择的省的名字
44         String shengString=request.getParameter("province");
45         System.out.println(shengString);
46         PrintWriter out=response.getWriter();
47         StringBuilder builder=new StringBuilder();
48       
49 
50         String info="";
51 
52 //        if ("zhejiang".equals(shengString)) {
53 //            System.out.println("浙江");
54 //            info="<province><city>杭州</city><city>温州</city><city>宁波</city></province>";
55 //        }
56 //        else if ("jiangsu".equals(shengString)) {
57 //            System.out.println("江苏");
58 //
59 //            info="<province><city>南京</city><city>徐州</city><city>苏州</city></province>";
60 //        }
61         if ("zhejiang".equals(shengString))
62         {
63             info= "[{"+'"'+"city"+'"'+":"+'"'+"杭州"+'"'+"},{"+'"'+"city"+'"'+":"+'"'+"温州"+'"'+"}]";
64         }
65         else if ("jiangsu".equals(shengString)) {
66             info= "[{"+'"'+"city"+'"'+":"+'"'+"南京"+'"'+"},{"+'"'+"city"+'"'+":"+'"'+"苏州"+'"'+"}]";
67 
68         }
69         System.out.println("{"+'"'+"ins"+'"'+":"+info+"}");
70        builder.append("{"+'"'+"ins"+'"'+":"+info+"}");
71 
72        out.println(builder.toString());
73     }
74 
75 }

jsp代码

  1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2 <%
  3 String path = request.getContextPath();
  4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5 %>
  6 
  7 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  8 <html>
  9   <head>
 10     <base href="<%=basePath%>">
 11     
 12     <title>My JSP 'Mycity.jsp' starting page</title>
 13     
 14     <meta http-equiv="pragma" content="no-cache">
 15     <meta http-equiv="cache-control" content="no-cache">
 16     <meta http-equiv="expires" content="0">    
 17     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 18     <meta http-equiv="description" content="This is my page">
 19     <!--
 20     <link rel="stylesheet" type="text/css" href="styles.css">
 21     -->
 22 
 23   </head>
 24   
 25   <body>
 26   <script type="text/javascript">
 27    //1.创建ajax引擎
 28   function getXmlHttpObject(){
 29   var xmlHttpRequest;
 30   //不同的浏览器获取对象xmlhttprequest对象方法不一样
 31   if(window.ActiveXobject)
 32   {
 33       xmlHttpRequest=new ActiveXobject("Microsoft.XMLHTTP");
 34   }
 35   else
 36   {
 37         xmlHttpRequest=new XMLHttpRequest();
 38   }
 39   return xmlHttpRequest;
 40   }
 41  
 42  //新建myXmlHttpRequest对象
 43  var myXmlHttpRequest="";
 44   
 45   function getCities(){
 46   //创建对象
 47       myXmlHttpRequest=getXmlHttpObject();
 48        // window.alert(myXmlHttpRequest);
 49       //如果创建成功，则进行post请求
 50       if(myXmlHttpRequest){
 51       //创建url
 52       var url="/ajax/showCities";//post
 53       //携带的参数
 54       var data="province="+$('sheng').value;
 55       //
 56       myXmlHttpRequest.open("post",url,true);
 57       //必填
 58       myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 59       //指定回调函数
 60             myXmlHttpRequest.onreadystatechange=chuli;
 61       //发送请求
 62       myXmlHttpRequest.send(data);
 63       
 64       }
 65       
 66       
 67   }
 68   
 69   function chuli(){
 70       if(myXmlHttpRequest.readyState==4){
 71             var mes=    myXmlHttpRequest.responseText;
 72       window.alert(mes);
 73       var mes_obj=eval("("+mes+")");
 74       window.alert(mes_obj);
 75       window.alert(mes_obj.ins[0].city);
 76       // $('myres').value=mes_obj.info;
 77       
 78       
 79       //取出xml格式数据
 80           /* if(myXmlHttpRequest.status==200)
 81           {          
 82               //取出服务器回送的数据
 83               window.alert(myXmlHttpRequest.responseXML);
 84               var cities= (myXmlHttpRequest.responseXML.getElementsByTagName("city"));
 85               //window.alert(cities.length);
 86               //alert(cities[1].lastChild.nodeValue);
 87               for(var i=0;i<cities.length;i++)
 88               {alert(cities[i].childNodes[0].nodeValue);}
 89           } */
 90       
 91       }
 92       
 93   }
 94   
 95   
 96    function $(id)
 97   {
 98   return document.getElementById(id);
 99   }
100   
101   </script>
102   
103   
104     This is my JSP page. <br>
105     
106     <select id="sheng" onchange="getCities();">
107     <option value="">---省---</option>
108     <option value="zhejiang">浙江</option>
109     <option value="jiangsu">江苏</option>
110     </select>
111     
112     <select id="city" onchange="sendRequest();">
113     <option value="">--城市--</option>
114     </select>
115     
116      <select id="country" onchange="sendRequest();">
117     <option value="">--县城--</option>
118     </select>
119     
120   </body>
121 </html>

2.xml格式

servlet代码

 1 package com.hsp.action;
 2 
 3 import java.io.IOException;
 4 import java.io.PrintWriter;
 5 
 6 import javax.json.JsonString;
 7 import javax.servlet.ServletException;
 8 import javax.servlet.annotation.WebServlet;
 9 import javax.servlet.http.HttpServlet;
10 import javax.servlet.http.HttpServletRequest;
11 import javax.servlet.http.HttpServletResponse;
12 
13 /**
14  * Servlet implementation class showCities
15  */
16 @WebServlet("/showCities")
17 public class showCities extends HttpServlet {
18     private static final long serialVersionUID = 1L;
19        
20     /**
21      * @see HttpServlet#HttpServlet()
22      */
23     public showCities() {
24         super();
25         // TODO Auto-generated constructor stub
26     }
27 
28     /**
29      * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
30      */
31     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
32         // TODO Auto-generated method stub
33     }
34 
35     /**
36      * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
37      */
38     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
39         // TODO Auto-generated method stub
40         response.setContentType("text/xml;charset=utf-8");  
41         response.setHeader("Cache-Control", "no-cache");
42         
43         //接收用户选择的省的名字
44         String shengString=request.getParameter("province");
45         System.out.println(shengString);
46         PrintWriter out=response.getWriter();
47         StringBuilder builder=new StringBuilder();
48       
49 
50         String info="";
51 
52         if ("zhejiang".equals(shengString)) {
53             System.out.println("浙江");
54             info="<province><city>杭州</city><city>温州</city><city>宁波</city></province>";
55         }
56         else if ("jiangsu".equals(shengString)) {
57             System.out.println("江苏");
58 
59             info="<province><city>南京</city><city>徐州</city><city>苏州</city></province>";
60         }
61 //        if ("zhejiang".equals(shengString))
62 //        {
63 //            info= "[{"+'"'+"city"+'"'+":"+'"'+"杭州"+'"'+"},{"+'"'+"city"+'"'+":"+'"'+"温州"+'"'+"}]";
64 //        }
65 //        else if ("jiangsu".equals(shengString)) {
66 //            info= "[{"+'"'+"city"+'"'+":"+'"'+"南京"+'"'+"},{"+'"'+"city"+'"'+":"+'"'+"苏州"+'"'+"}]";
67 //
68 //        }
69 //        System.out.println("{"+'"'+"ins"+'"'+":"+info+"}");
70 //       builder.append("{"+'"'+"ins"+'"'+":"+info+"}");
71         builder.append(info);
72        out.println(builder.toString());
73     }
74 
75 }

jsp代码

  1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2 <%
  3 String path = request.getContextPath();
  4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5 %>
  6 
  7 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  8 <html>
  9   <head>
 10     <base href="<%=basePath%>">
 11     
 12     <title>My JSP 'Mycity.jsp' starting page</title>
 13     
 14     <meta http-equiv="pragma" content="no-cache">
 15     <meta http-equiv="cache-control" content="no-cache">
 16     <meta http-equiv="expires" content="0">    
 17     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 18     <meta http-equiv="description" content="This is my page">
 19     <!--
 20     <link rel="stylesheet" type="text/css" href="styles.css">
 21     -->
 22 
 23   </head>
 24   
 25   <body>
 26   <script type="text/javascript">
 27    //1.创建ajax引擎
 28   function getXmlHttpObject(){
 29   var xmlHttpRequest;
 30   //不同的浏览器获取对象xmlhttprequest对象方法不一样
 31   if(window.ActiveXobject)
 32   {
 33       xmlHttpRequest=new ActiveXobject("Microsoft.XMLHTTP");
 34   }
 35   else
 36   {
 37         xmlHttpRequest=new XMLHttpRequest();
 38   }
 39   return xmlHttpRequest;
 40   }
 41  
 42  //新建myXmlHttpRequest对象
 43  var myXmlHttpRequest="";
 44   
 45   function getCities(){
 46   //创建对象
 47       myXmlHttpRequest=getXmlHttpObject();
 48        // window.alert(myXmlHttpRequest);
 49       //如果创建成功，则进行post请求
 50       if(myXmlHttpRequest){
 51       //创建url
 52       var url="/ajax/showCities";//post
 53       //携带的参数
 54       var data="province="+$('sheng').value;
 55       //
 56       myXmlHttpRequest.open("post",url,true);
 57       //必填
 58       myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 59       //指定回调函数
 60             myXmlHttpRequest.onreadystatechange=chuli;
 61       //发送请求
 62       myXmlHttpRequest.send(data);
 63       
 64       }
 65       
 66       
 67   }
 68   
 69   function chuli(){
 70       if(myXmlHttpRequest.readyState==4){
 71            // var mes=    myXmlHttpRequest.responseText;
 72       /* window.alert(mes);
 73       var mes_obj=eval("("+mes+")");
 74       window.alert(mes_obj);
 75       window.alert(mes_obj.ins[0].city); */
 76       // $('myres').value=mes_obj.info;
 77       
 78       
 79    //取出xml格式数据
 80            if(myXmlHttpRequest.status==200)
 81           {          
 82               //取出服务器回送的数据
 83               window.alert(myXmlHttpRequest.responseXML);
 84               var cities= (myXmlHttpRequest.responseXML.getElementsByTagName("city"));
 85               //window.alert(cities.length);
 86               //alert(cities[1].lastChild.nodeValue);
 87               for(var i=0;i<cities.length;i++)
 88               {alert(cities[i].childNodes[0].nodeValue);}
 89           } 
 90       
 91       }
 92       
 93   }
 94   
 95   
 96    function $(id)
 97   {
 98   return document.getElementById(id);
 99   }
100   
101   </script>
102   
103   
104     This is my JSP page. <br>
105     
106     <select id="sheng" onchange="getCities();">
107     <option value="">---省---</option>
108     <option value="zhejiang">浙江</option>
109     <option value="jiangsu">江苏</option>
110     </select>
111     
112     <select id="city" onchange="sendRequest();">
113     <option value="">--城市--</option>
114     </select>
115     
116      <select id="country" onchange="sendRequest();">
117     <option value="">--县城--</option>
118     </select>
119     
120   </body>
121 </html>

3.text格式

servlet 格式

 1 package com.hsp.action;
 2 
 3 import java.io.IOException;
 4 import java.io.PrintWriter;
 5 
 6 import javax.servlet.ServletException;
 7 import javax.servlet.ServletOutputStream;
 8 import javax.servlet.annotation.WebServlet;
 9 import javax.servlet.http.HttpServlet;
10 import javax.servlet.http.HttpServletRequest;
11 import javax.servlet.http.HttpServletResponse;
12 
13 /**
14  * Servlet implementation class registerServlet
15  */
16 @WebServlet("/registerServlet")
17 public class registerServlet extends HttpServlet {
18     private static final long serialVersionUID = 1L;
19        
20     /**
21      * @see HttpServlet#HttpServlet()
22      */
23     public registerServlet() {
24         super();
25         // TODO Auto-generated constructor stub
26     }
27 
28     /**
29      * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
30      */
31     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
32         // TODO Auto-generated method stub
33     
34     //接受数据
35         //String username=request.getParameter("username");
36         //System.out.println(username);
37         String infoString="";
38         if ("shunping".equals("")) {
39             infoString="用户名不可用";
40         }
41         else {
42             infoString="用户名可用";
43 
44         }
45         //返回文本数据  
46        // response.setContentType("text/;charset=utf-8");  
47        //返回xml格式文件
48         response.setContentType("text/xml;charset=utf-8");  
49 
50         response.setHeader("Cache-Control", "no-cache");
51         
52         
53         //返回xml 格式数据
54         PrintWriter out=response.getWriter();
55         StringBuilder builder=new StringBuilder();
56        // builder.append("<message>");
57        // builder.append(infoString).append("</message>");
58         
59       //  builder.append( "{"+'"'+"info"+'"'+":"  ).append('"'+infoString+'"'+"}");
60         builder.append(infoString);
61         out.println(builder.toString());
62         
63         //返回text格式数据
64 //        ServletOutputStream outputStream = response.getOutputStream();  
65 //        outputStream.write(infoString.getBytes("utf-8"));  
66 //        //outputStream.write(pwd.getBytes("utf-8"));  
67 //        outputStream.flush();  
68 //        outputStream.close();  
69     }
70 
71     /**
72      * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
73      */
74     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
75         // TODO Auto-generated method stub
76         doGet(request, response);
77     }
78 
79 }

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>
  <script type="text/javascript">
  
  //创建ajax引擎
  function getXmlHttpObject(){
  var xmlHttpRequest;
  //不同的浏览器获取对象xmlhttprequest对象方法不一样
  if(window.ActiveXobject)
  {
      xmlHttpRequest=new ActiveXobject("Microsoft.XMLHTTP");
  }
  else
  {
        xmlHttpRequest=new XMLHttpRequest();
  }
  return xmlHttpRequest;
  }
  
  
  var    myXmlHttpRequest=null;
  //验证用户名是否存在
  function checkName()
  {
  
     myXmlHttpRequest=getXmlHttpObject();
      
  //    window.alert(myXmlHttpRequest);
 
 if(myXmlHttpRequest ){
  //    window.alert("创建成功");
      //通过myXmlHttpRequest对象发送请求到服务器的某个页面
      //1.第一个参数表示请求的方式，"get"/"post"
      //2.第二个参数指定url,对哪个页面发出ajax请求（本质仍然是http请求）
      //3.第三个参数 true表示使用异步机制，如果false，表示不使用异步
       var url="/ajax/registerServlet?mytime="+new Date()+"&username="+$("username").value
      //打开请求
      myXmlHttpRequest.open("post",url,true);
      //window.alert(url);
      //指定回调函数,chuli  是函数名
      myXmlHttpRequest.onreadystatechange=chuli;
      //真的发送函数,如果是get请求，则填入null即可
      //如果是post请求，则填入实际的数据
      myXmlHttpRequest.send(null); 
      
      
      }
 
      
  }
  
  //回调函数
   function chuli(){
  //window.alert("处理函数被调用"+myXmlHttpRequest.readyState);
  //取出从serlet返回的数据
   if(myXmlHttpRequest.readyState==4)
      {
      //取出值，文本格式
     //window.alert("服务器返回"+myXmlHttpRequest.responseText)
 //
 //window.alert( "xml:"+myXmlHttpRequest.responseXML);
  //获取message节点
 // var mes=myXmlHttpRequest.responseXML.getElementsByTagName("message");
  //window.alert(mes.length);
  //取出message节点
  //es[0]-->表示取出第一个message节点
  //childNodes[0]表示message节点的第一个子节点
 // var mes_val=mes[0].childNodes[0].nodeValue;
  //window.alert(mes_val);
 // ${'myres'}.value= mes_val;
      //$('myres').value=myXmlHttpRequest.responseText;
  /* var mes=    myXmlHttpRequest.responseText;
      window.alert(mes);
      var mes_obj=eval("("+mes+")");
      //window.alert(mes_obj.info);
       $('myres').value=mes_obj.info;
       */
        var mes=    myXmlHttpRequest.responseText;
       
             $('myres').value=mes;
      
      } 
  }
    
  function $(id)
  {
  return document.getElementById(id);
  }
   
  
  
  
 
   
  
  
  
  
  
  
  
  
  
 
  </script>
  
  
    This is my JSP page. <br>
    <form action="???" method="post">
    
    用户名：<input type="text"name="username1" onkeyup="checkName();" id="username">
    <input type="button" onclick="checkName();" value="验证用户名">
  <input style="border-width: 0;color: red" type="text" id="myres"><br>
    用户密码：<input type="password" name="password"><br>
    电子邮件:<input type="text" name="email"><br>
    <input type="submit" value="用户注册"> 
    </form>
    
    
    
  </body>
</html>

 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：ES6 函数扩展

下一篇：关于easyui中的alert弹出框在可视范围弹出

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签