代码改变世界

jsp Ajax请求(返回html标签)

2017-01-14 16:25  甘雨路  阅读(4256)  评论(0编辑  收藏  举报
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
  

  <servlet>
    <servlet-name>AServlet</servlet-name>
    <servlet-class>ajax.AServlet</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>AServlet</servlet-name>
    <url-pattern>/AServlet</url-pattern>
  </servlet-mapping>
  
</web-app>
package ajax;

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 AServlet extends HttpServlet {

    private static final long serialVersionUID = 1L;

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        System.out.println("doGet...");
        //设置编码
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html");
        
       response.getWriter().print("<span style='color:red'>请求返回的内容</span>");
        
    }

}
<a href="http://baidu.com">百度</a>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  
    <title>My JSP  page</title>
    
    <script>
        function addTag(){
            //创建XMLHttpRequest 请求的对象
            var request = new XMLHttpRequest();
            // 请求的方式
            var method = "GET";
            // 请求的连接地址
            var url = "myTag.html";
            // 初始化请求参数
            request.open(method, url,true);
            // 发送请求
            request.send(null);
            request.onreadystatechange = function(){
                // 如果响应请求
                if(request.readyState==4){
                    // 如果请求成功
                    if(request.status==200 || request.status==304){
                        
                        var a = request.responseText;
                        var d = document.getElementsByTagName("div")[0];
                        d.innerHTML = a;
                    }
                }
            };
            
        }
        
        
        function addText(){
            //创建XMLHttpRequest 请求的对象
            var request = new XMLHttpRequest();
            // 请求的方式
            var method = "GET";
            // 请求的连接地址
            var url = "AServlet";
            // 初始化请求参数
            request.open(method, url,true);
            // 发送请求
            request.send(null);
            request.onreadystatechange = function(){
                // 如果响应请求
                if(request.readyState==4){
                    // 如果请求成功
                    if(request.status==200 || request.status==304){
                        
                        var text = request.responseText;
                        var d = document.getElementsByTagName("div")[1];
                        d.innerHTML = text;
                    }
                }
            };
            
        }

    </script>
    
  </head>
  
  <body>
      <h1>添加html标签</h1>
      <div></div>
      <div></div>
    <button onclick="addTag()">添加a标签</button>
    <a href="#" onclick="addText()">添加文本</a>
  </body>
</html>