ajax获取servlet发送的数据

缺乏、安全感 2022-06-12 08:57 213阅读 0赞

XMLHTTP中readState与status的状态值  
0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）  
1 (初始化) 对象已建立，尚未调用send方法  
2 (发送数据) send方法已调用，但是当前的状态及http头未知  
3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，  
4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据

当readState为4 status为200时说明成功

通过responseText获取servlet的文本

### jsp ###

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <script> function getContent() { var xmlHttp; xmlHttp = createXmlHttp(); alert("readyState："+xmlHttp.readyState + "status:"+xmlHttp.status); xmlHttp.onreadystatechange=function (){ alert("readyState："+xmlHttp.readyState + "status:"+xmlHttp.status); if (xmlHttp.readyState == 4 && xmlHttp.status == 200){ alert(xmlHttp.responseText); var text = document.getElementById("text"); text.value=xmlHttp.responseText; } }; xmlHttp.open("get", "servlet", true); xmlHttp.send(null); } function createXmlHttp() { var xmlHttp; if(window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } //兼容IE else if(window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); if(!xmlHttp) { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } } return xmlHttp; } </script>
    
      </head>
    
      <body>
        <input type="text" id="text">
        <button id="btn" onclick="getContent()">获取ajax数据</button>
      </body>
    </html>

### servlet ###

package com.cyh.test;
    
    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;
    
    public class Servlet extends HttpServlet { 
    
        public void doGet(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {
            request.setCharacterEncoding("UTF-8");
            response.setCharacterEncoding("UTF-8");
    
            PrintWriter out = response.getWriter();
            out.println("后台发送的数据");
        }
    
        public void doPost(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {
        }
    
    }

### 若servlet发送json格式 ###

package com.cyh.test;
    
    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;
    
    public class Servlet extends HttpServlet { 
    
        public void doGet(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {
            request.setCharacterEncoding("UTF-8");
            response.setCharacterEncoding("UTF-8");
    
            //json格式{k : v, k : v}
            String content = "{\"name\":\"张三\" , \"age\":\"18\"}"; 
    
            PrintWriter out = response.getWriter();
            out.println(content);
        }
    
        public void doPost(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {
            System.out.println("post");
        }
    
    }

### 前台接受 ###

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <script> function getContent() { var xmlHttp; xmlHttp = createXmlHttp(); xmlHttp.onreadystatechange=function (){ if (xmlHttp.readyState == 4 && xmlHttp.status == 200){ alert(xmlHttp.responseText); } }; xmlHttp.open("get", "servlet", true); xmlHttp.send(null); } function createXmlHttp() { var xmlHttp; if(window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } //兼容IE else if(window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); if(!xmlHttp) { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } } return xmlHttp; } </script>
      </head>
    
      <body>
        姓名<input type="text" id="name"><br>
        年龄<input type="text" id="age"><br>
        <button id="btn" onclick="getContent()">获取ajax数据</button>
      </body>
    </html>

返回的形式是\{“name”:”张三”, “age”:”18”\}  
通过 var obj = eval(“(“+xmlHttp.responseText+”)”);  
返回的obj就是一对象， 可以输出key对应的值  
alert(obj.name);  
alert(obj.age);

### 导入json jar包 ###

在servlet中可以这样设置  
JSONObject content = new JSONObject();  
content.put(“name”, “张三”);  
content.put(“age”,”19”);