前后端数据交互（一）

在开发的过程中，有时候我们需要设计一个数据接口。有时候呢，数据接口和Web服务器又不在一起，所以就有跨域访问的问题。

第一步：简单的设计一个数据接口。

数据接口，听起来高大上，其实呢就是一个简单的Serlvlet,在有get的请求的时候，返回我们要提供的数据就可以。现在JSON数据格式已经很普遍，因为很方便，所以我们做一个json数据的接口。直接看代码

先建立一个实体类，就是包装我们的数据的

bean/kapian.java

[java] view plain copy

print ?

1. package bean;  
2.   
3. public class kapian {  
4.       
5.     //头像路进  
6.     public String imgurl;  
7.       
8.     public String getImgurl() {  
9.         return imgurl;  
10.     }  
11.   
12.     public void setImgurl(String imgurl) {  
13.         this.imgurl = imgurl;  
14.     }  
15.   
16.     public String getName() {  
17.         return name;  
18.     }  
19.   
20.     public void setName(String name) {  
21.         this.name = name;  
22.     }  
23.   
24.     public String getMoney() {  
25.         return money;  
26.     }  
27.   
28.     public void setMoney(String money) {  
29.         this.money = money;  
30.     }  
31.   
32.     public String getStyle() {  
33.         return style;  
34.     }  
35.   
36.     public void setStyle(String style) {  
37.         this.style = style;  
38.     }  
39.   
40.     public String getNum() {  
41.         return num;  
42.     }  
43.   
44.     public void setNum(String num) {  
45.         this.num = num;  
46.     }  
47.   
48.     public String getRevenue() {  
49.         return revenue;  
50.     }  
51.   
52.     public void setRevenue(String revenue) {  
53.         this.revenue = revenue;  
54.     }  
55.   
56.     public String getId() {  
57.         return id;  
58.     }  
59.   
60.     public void setId(String id) {  
61.         this.id = id;  
62.     }  
63.   
64.     //名字  
65.     public String name;  
66.       
67.     //金额  
68.     public String money;  
69.       
70.     //交易风格  
71.     public String style;  
72.       
73.     //订阅人数  
74.     public String num;  
75.       
76.       
77.     //收益率  
78.     public String revenue;  
79.       
80.     //标记  
81.     public String id;  
82.       
83.     public kapian(String imgurl,String name,String money,String style,String num,String revenue,String id){  
84.           
85.         this.imgurl=imgurl;  
86.         this.name=name;  
87.         this.money=money;  
88.         this.style=style;  
89.         this.num=num;  
90.         this.revenue=revenue;  
91.         this.id=id;  
92.     }  
93.       
94. }  

package bean;

public class kapian {

    //头像路进
    public String imgurl;

    public String getImgurl() {
        return imgurl;
    }

    public void setImgurl(String imgurl) {
        this.imgurl = imgurl;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getMoney() {
        return money;
    }

    public void setMoney(String money) {
        this.money = money;
    }

    public String getStyle() {
        return style;
    }

    public void setStyle(String style) {
        this.style = style;
    }

    public String getNum() {
        return num;
    }

    public void setNum(String num) {
        this.num = num;
    }

    public String getRevenue() {
        return revenue;
    }

    public void setRevenue(String revenue) {
        this.revenue = revenue;
    }

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    //名字
    public String name;

    //金额
    public String money;

    //交易风格
    public String style;

    //订阅人数
    public String num;


    //收益率
    public String revenue;

    //标记
    public String id;

    public kapian(String imgurl,String name,String money,String style,String num,String revenue,String id){

        this.imgurl=imgurl;
        this.name=name;
        this.money=money;
        this.style=style;
        this.num=num;
        this.revenue=revenue;
        this.id=id;
    }

}

Serlvet 类：

bean/message.java

[java] view plain copy

print ?

1. package bean;  
2.   
3. import java.io.IOException;  
4. import java.io.PrintWriter;  
5.   
6. import javax.servlet.ServletException;  
7. import javax.servlet.http.HttpServlet;  
8. import javax.servlet.http.HttpServletRequest;  
9. import javax.servlet.http.HttpServletResponse;  
10.   
11. import org.json.JSONObject;  
12. import org.json.JSONArray;  
13.   
14.   
15.   
16. import java.util.ArrayList;  
17. import bean.kapian;  
18. import java.util.List;   
19.   
20. public class message extends HttpServlet {  
21.   
22.     /** 
23.      * Constructor of the object. 
24.      */  
25.       
26.       
27.       
28.     public message() {  
29.         super();  
30.     }  
31.   
32.     /** 
33.      * Destruction of the servlet. <br> 
34.      */  
35.     public void destroy() {  
36.         super.destroy(); // Just puts “destroy” string in log  
37.         // Put your code here  
38.     }  
39.   
40.     /** 
41.      * The doGet method of the servlet. <br> 
42.      * 
43.      * This method is called when a form has its tag value method equals to get. 
44.      *  
45.      * @param request the request send by the client to the server 
46.      * @param response the response send by the server to the client 
47.      * @throws ServletException if an error occurred 
48.      * @throws IOException if an error occurred 
49.      */  
50.     public void doGet(HttpServletRequest request, HttpServletResponse response)  
51.             throws ServletException, IOException {  
52.   
53.          response.setHeader(”Content-type”, “text/html;charset=UTF-8”);    
54.          response.setContentType(”text/html;charset=utf-8”);    
55.            
56.           
57.           
58.         List<kapian> li = new ArrayList<kapian>();  
59.           
60.         li.add(new kapian(“1.jpg”,“陈永康”,“2345323”,“牛逼”,“10234323”,“200%”,“周”));  
61.         li.add(new kapian(“1.jpg”,“唐露露”,“123143”,“稳健”,“1234234”,“190%”,“周”));  
62.         li.add(new kapian(“1.jpg”,“宋豪杰”,“2345323”,“牛逼”,“10234323”,“200%”,“周”));  
63.         li.add(new kapian(“1.jpg”,“小斌”,“2345323”,“牛逼”,“10234323”,“200%”,“周”));  
64.         li.add(new kapian(“1.jpg”,“李研”,“2345323”,“厉害”,“234235”,“2000%”,“周”));  
65.           
66.           
67.         li.add(new kapian(“1.jpg”,“陈永康”,“2345323”,“牛逼”,“10234323”,“200%”,“月”));  
68.         li.add(new kapian(“1.jpg”,“唐露露”,“123143”,“稳健”,“1234234”,“190%”,“月”));  
69.         li.add(new kapian(“1.jpg”,“宋豪杰”,“2345323”,“牛逼”,“10234323”,“200%”,“月”));  
70.         li.add(new kapian(“1.jpg”,“小斌”,“2345323”,“牛逼”,“10234323”,“200%”,“月”));  
71.         li.add(new kapian(“1.jpg”,“李研”,“2345323”,“厉害”,“234235”,“2000%”,“月”));  
72.           
73.           
74.         li.add(new kapian(“1.jpg”,“陈永康”,“2345323”,“牛逼”,“10234323”,“200%”,“年”));  
75.         li.add(new kapian(“1.jpg”,“唐露露”,“123143”,“稳健”,“1234234”,“190%”,“年”));  
76.         li.add(new kapian(“1.jpg”,“宋豪杰”,“2345323”,“牛逼”,“10234323”,“200%”,“年”));  
77.         li.add(new kapian(“1.jpg”,“小斌”,“2345323”,“牛逼”,“10234323”,“200%”,“年”));  
78.         li.add(new kapian(“1.jpg”,“李研”,“2345323”,“厉害”,“234235”,“2000%”,“年”));  
79.           
80.           
81.         li.add(new kapian(“1.jpg”,“陈永康”,“2345323”,“牛逼”,“10234323”,“200%”,“总”));  
82.         li.add(new kapian(“1.jpg”,“唐露露”,“123143”,“稳健”,“1234234”,“190%”,“总”));  
83.         li.add(new kapian(“1.jpg”,“宋豪杰”,“2345323”,“牛逼”,“10234323”,“200%”,“总”));  
84.         li.add(new kapian(“1.jpg”,“小斌”,“2345323”,“牛逼”,“10234323”,“200%”,“总”));  
85.         li.add(new kapian(“1.jpg”,“李研”,“2345323”,“厉害”,“234235”,“2000%”,“总”));  
86.           
87.           
88.           
89.         try{  
90.         JSONArray json = new JSONArray();  
91.           
92.         for(kapian a :li){  
93.             JSONObject obj = new JSONObject();  
94.             obj.put(”imgurl”,a.getImgurl());  
95.             obj.put(”name”,a.getName());  
96.             obj.put(”money”,a.getMoney());  
97.             obj.put(”style”,a.getStyle());  
98.             obj.put(”num”,a.getNum());  
99.             obj.put(”revenue”,a.getRevenue());  
100.             obj.put(”id”,a.getId());  
101.               
102.             json.put(obj);  
103.               
104.           
105.         }  
106.         JSONObject js =new JSONObject();  
107.           
108.         response.getWriter().print(json.toString());      
109.           
110.         }  
111.           
112.         catch(Exception e){  
113.             e.printStackTrace();  
114.         }  
115.           
116.           
117.           
118.           
119.           
120.     }  
121.   
122.     /** 
123.      * The doPost method of the servlet. <br> 
124.      * 
125.      * This method is called when a form has its tag value method equals to post. 
126.      *  
127.      * @param request the request send by the client to the server 
128.      * @param response the response send by the server to the client 
129.      * @throws ServletException if an error occurred 
130.      * @throws IOException if an error occurred 
131.      */  
132.     public void doPost(HttpServletRequest request, HttpServletResponse response)  
133.             throws ServletException, IOException {  
134.   
135.         response.setContentType(”text/html”);  
136.         PrintWriter out = response.getWriter();  
137.         out.println(”<!DOCTYPE HTML PUBLIC \”-//W3C//DTD HTML 4.01 Transitional//EN\”>”);  
138.         out.println(”<HTML>”);  
139.         out.println(”  <HEAD><TITLE>A Servlet</TITLE></HEAD>”);  
140.         out.println(”  <BODY>”);  
141.         out.print(”    This is ”);  
142.         out.print(this.getClass());  
143.         out.println(”, using the POST method”);  
144.         out.println(”  </BODY>”);  
145.         out.println(”</HTML>”);  
146.         out.flush();  
147.         out.close();  
148.     }  
149.   
150.     /** 
151.      * Initialization of the servlet. <br> 
152.      * 
153.      * @throws ServletException if an error occurs 
154.      */  
155.     public void init() throws ServletException {  
156.         // Put your code here  
157.     }  
158.   
159. }  

package bean;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.json.JSONObject;
import org.json.JSONArray;



import java.util.ArrayList;
import bean.kapian;
import java.util.List; 

public class message extends HttpServlet {

    /**
     * Constructor of the object.
     */



    public message() {
        super();
    }

    /**
     * Destruction of the servlet. <br>
     */
    public void destroy() {
        super.destroy(); // Just puts "destroy" string in log
        // Put your code here
    }

    /**
     * The doGet method of the servlet. <br>
     *
     * This method is called when a form has its tag value method equals to get.
     * 
     * @param request the request send by the client to the server
     * @param response the response send by the server to the client
     * @throws ServletException if an error occurred
     * @throws IOException if an error occurred
     */
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

         response.setHeader("Content-type", "text/html;charset=UTF-8");  
         response.setContentType("text/html;charset=utf-8");  



        List<kapian> li = new ArrayList<kapian>();

        li.add(new kapian("1.jpg","陈永康","2345323","牛逼","10234323","200%","周"));
        li.add(new kapian("1.jpg","唐露露","123143","稳健","1234234","190%","周"));
        li.add(new kapian("1.jpg","宋豪杰","2345323","牛逼","10234323","200%","周"));
        li.add(new kapian("1.jpg","小斌","2345323","牛逼","10234323","200%","周"));
        li.add(new kapian("1.jpg","李研","2345323","厉害","234235","2000%","周"));


        li.add(new kapian("1.jpg","陈永康","2345323","牛逼","10234323","200%","月"));
        li.add(new kapian("1.jpg","唐露露","123143","稳健","1234234","190%","月"));
        li.add(new kapian("1.jpg","宋豪杰","2345323","牛逼","10234323","200%","月"));
        li.add(new kapian("1.jpg","小斌","2345323","牛逼","10234323","200%","月"));
        li.add(new kapian("1.jpg","李研","2345323","厉害","234235","2000%","月"));


        li.add(new kapian("1.jpg","陈永康","2345323","牛逼","10234323","200%","年"));
        li.add(new kapian("1.jpg","唐露露","123143","稳健","1234234","190%","年"));
        li.add(new kapian("1.jpg","宋豪杰","2345323","牛逼","10234323","200%","年"));
        li.add(new kapian("1.jpg","小斌","2345323","牛逼","10234323","200%","年"));
        li.add(new kapian("1.jpg","李研","2345323","厉害","234235","2000%","年"));


        li.add(new kapian("1.jpg","陈永康","2345323","牛逼","10234323","200%","总"));
        li.add(new kapian("1.jpg","唐露露","123143","稳健","1234234","190%","总"));
        li.add(new kapian("1.jpg","宋豪杰","2345323","牛逼","10234323","200%","总"));
        li.add(new kapian("1.jpg","小斌","2345323","牛逼","10234323","200%","总"));
        li.add(new kapian("1.jpg","李研","2345323","厉害","234235","2000%","总"));



        try{
        JSONArray json = new JSONArray();

        for(kapian a :li){
            JSONObject obj = new JSONObject();
            obj.put("imgurl",a.getImgurl());
            obj.put("name",a.getName());
            obj.put("money",a.getMoney());
            obj.put("style",a.getStyle());
            obj.put("num",a.getNum());
            obj.put("revenue",a.getRevenue());
            obj.put("id",a.getId());

            json.put(obj);


        }
        JSONObject js =new JSONObject();

        response.getWriter().print(json.toString());    

        }

        catch(Exception e){
            e.printStackTrace();
        }





    }

    /**
     * The doPost method of the servlet. <br>
     *
     * This method is called when a form has its tag value method equals to post.
     * 
     * @param request the request send by the client to the server
     * @param response the response send by the server to the client
     * @throws ServletException if an error occurred
     * @throws IOException if an error occurred
     */
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        response.setContentType("text/html");
        PrintWriter out = response.getWriter();
        out.println("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">");
        out.println("<HTML>");
        out.println("  <HEAD><TITLE>A Servlet</TITLE></HEAD>");
        out.println("  <BODY>");
        out.print("    This is ");
        out.print(this.getClass());
        out.println(", using the POST method");
        out.println("  </BODY>");
        out.println("</HTML>");
        out.flush();
        out.close();
    }

    /**
     * Initialization of the servlet. <br>
     *
     * @throws ServletException if an error occurs
     */
    public void init() throws ServletException {
        // Put your code here
    }

}

使用Json的时候，我们要导入JSON包,org.json包，可以网上下载

然后用将设计好的List转换成json格式

我们用到两个json对象，一个是JSONObject,一个是JSONArray。顾名思义，前者就是一个json对象，后者是一个json数组。

这里扩展一下：

最后我们用response.getWrite()和print(),返回数据。也可以用response.getOututStream.write()

write和print的区别

write()：仅支持输出字符类型数据，字符、字符数组、字符串等
   print()：可以将各种类型（包括Object）的数据通过默认编码转换成bytes字节形式，这些字节都通过write(int c)方法被输出

response.getWriter()和response.getOutputStream的区别：前者是字符流，后者是字节流

response.getOutputStream().write(data.getBytes(“UTF-8”));

response.getWriter().write(data);

回到正题：

这是项目的文件接口，然后浏览器中输入

http://192.168.3.60:8089/Data/servlet/message

现在如果我们在另外一台电脑上使用ajax， 来获取数据

[java] view plain copy

print ?

1. $.ajax({&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;url:<span class="string">'http://localhost:8089/Data/servlet/message'</span><span>,&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;method:<span class="string">'get'</span><span>,&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;dataType:<span class="string">'json'</span><span>,&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;success:function(data){&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.each(data,function(i,term){&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(term.name);&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;error:function(XMLHttpRequest,textStatus,errorThrown){&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(XMLHttpRequest.status);&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(XMLHttpRequest.readyState);&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(textStatus);&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;});&nbsp;&nbsp;</span></li></ol></div><pre code_snippet_id="2548381" snippet_file_name="blog_20170824_3_8767925" name="code" class="java" style="display: none;">$.ajax({ url:’http://localhost:8089/Data/servlet/message’, method:’get’, dataType:’json’, success:function(data){ $.each(data,function(i,term){ alert(term.name); }); }, error:function(XMLHttpRequest,textStatus,errorThrown){ alert(XMLHttpRequest.status); alert(XMLHttpRequest.readyState); alert(textStatus); } });
   

   这个时候回到error的回调函数，XMLHtppRequset.status=0;readyState=0; 都是0。 0表示请求根本没有建立。这是因为，另一个电脑和我的数据接口

   不在一个服务器上，当然，如果你在自己的电脑上写ajax也不可以，必须写到项目里，才可以访问。所以，跨域问题必须要解决。网上的办法很简单，

   新建一个Filter类：

   Filter是一个过滤器。对你设定的请求地址进行拦截，然后设置。

   [java] view plain copy

   print ?

   1. package Filter;  
   2.   
   3. import java.io.IOException;  
   4.   
   5. import javax.servlet.Filter;  
   6. import javax.servlet.FilterChain;  
   7. import javax.servlet.FilterConfig;  
   8. import javax.servlet.ServletException;  
   9. import javax.servlet.ServletRequest;  
   10. import javax.servlet.ServletResponse;  
   11. import javax.servlet.http.HttpServletResponse;  
   12.   
   13.   
   14. public class HeaderFilter implements Filter   
   15. {   
   16.     public void doFilter(ServletRequest request, ServletResponse resp, FilterChain chain) throws IOException, ServletException  
   17.     {  
   18.     HttpServletResponse response = (HttpServletResponse) resp; response.setHeader(”Access-Control-Allow-Origin”, “*”); //解决跨域访问报错   
   19.     response.setHeader(”Access-Control-Allow-Methods”, “POST, PUT, GET, OPTIONS, DELETE”);   
   20.     response.setHeader(”Access-Control-Max-Age”, “3600”); //设置过期时间   
   21.     response.setHeader(”Access-Control-Allow-Headers”, “Origin, X-Requested-With, Content-Type, Accept, client_id, uuid, Authorization”);   
   22.     response.setHeader(”Cache-Control”, “no-cache, no-store, must-revalidate”); // 支持HTTP 1.1.   
   23.     response.setHeader(”Pragma”, “no-cache”); // 支持HTTP 1.0. response.setHeader(“Expires”, “0”);   
   24.     chain.doFilter(request, resp);   
   25.     }   
   26.     public void init(FilterConfig filterConfig) {}   
   27.     public void destroy() {}  
   28. }  

   package Filter;
   
   import java.io.IOException;
   
   import javax.servlet.Filter;
   import javax.servlet.FilterChain;
   import javax.servlet.FilterConfig;
   import javax.servlet.ServletException;
   import javax.servlet.ServletRequest;
   import javax.servlet.ServletResponse;
   import javax.servlet.http.HttpServletResponse;
   
   
   public class HeaderFilter implements Filter 
   { 
       public void doFilter(ServletRequest request, ServletResponse resp, FilterChain chain) throws IOException, ServletException
       {
       HttpServletResponse response = (HttpServletResponse) resp; response.setHeader("Access-Control-Allow-Origin", "*"); //解决跨域访问报错 
       response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE"); 
       response.setHeader("Access-Control-Max-Age", "3600"); //设置过期时间 
       response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, client_id, uuid, Authorization"); 
       response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // 支持HTTP 1.1. 
       response.setHeader("Pragma", "no-cache"); // 支持HTTP 1.0. response.setHeader("Expires", "0"); 
       chain.doFilter(request, resp); 
       } 
       public void init(FilterConfig filterConfig) {} 
       public void destroy() {}
   }

   
   

   在web.xml中配置：

   [html] view plain copy

   print ?

   1. <filter>  
   2.      <filter-name>HeaderFilter</filter-name>  
   3.      <filter-class>Filter.HeaderFilter</filter-class><!–你过滤器的包 –>  
   4.    </filter>  
   5.    <filter-mapping>  
   6.      <filter-name>HeaderFilter</filter-name>  
   7.      <url-pattern>/*</url-pattern><!– 你开放的接口前缀  –>  
   8.    </filter-mapping>  

    <filter>
         <filter-name>HeaderFilter</filter-name>
         <filter-class>Filter.HeaderFilter</filter-class><!--你过滤器的包 -->
       </filter>
       <filter-mapping>
         <filter-name>HeaderFilter</filter-name>
         <url-pattern>/*</url-pattern><!-- 你开放的接口前缀  -->
       </filter-mapping>

   
   
   

   然后，ajax在任何地方就都可以访问了。

   
   

   还有一点就是，ajax在处理json数据的时候：

   有两种方式，一种数据格式不声明为json，直接是文本，然后传过来，需要解析一下，用eval() 或者JSON.parse()

   还有一种，是声明为json,直接可以用

   后端和前端，如果有一个声明为json,那么格式就是json.