Ajax教程—响应text文本之案例篇（二）

最新推荐文章于 2022-01-17 19:16:11 发布

Andy Chen 陈郑游

最新推荐文章于 2022-01-17 19:16:11 发布

阅读量960

点赞数 1

分类专栏： ————[ 前端技术 ] 文章标签： ajax jsp请求乱码中文乱码 Ajax教程响应text文本 ajax Ajax案例

本文链接：https://blog.csdn.net/javawebrookie/article/details/51524435

版权

————[ 前端技术 ] 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、Ajax 案例

Ajax教程—响应text文本之案例篇（二）

2.1准备jsp文档

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>响应text文本</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">

    <script type="text/javascript" src="Ajax/createXMLHttpRequest/createXMLHttpRequest.js"></script>
    <script type="text/javascript">


        //文档加载完毕后执行
        window.onload = function () {

            var btn = document.getElementById("btn");
            //给按钮的点击事件注册监听
            btn.onclick = function () {
                /*
                 * ajax四步操作，得到服务器的响应
                 * 把响应结果显示到h1元素中
                 */

                //1. 得到异步对象
                var xmlHttp = createXMLHttpRequest();
                /*
                 2. 打开与服务器的连接
                 * 指定请求方式
                 * 指定请求的URL
                 * 指定是否为异步请求
                 */
                xmlHttp.open("GET", "<c:url value='/Servlet'/>", true);
                /*
                 * 3. 发送请求
                 * GET请求没有请求体，但也要给出null，不然FireFox可能会不能发送！
                 */
                xmlHttp.send(null);
                /*
                 * 4. 给异步对象的onreadystatechange事件注册监听器
                 *
                 */
                //当xmlHttp的状态发生变化时执行
                xmlHttp.onreadystatechange = function () {
                    // 双重判断：xmlHttp的状态为4（服务器响应结束），以及服务器响应的状态码为200（响应成功）
                    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                        // 获取服务器的响应结束
                        var text = xmlHttp.responseText;
                        // 获取h1元素
                        var h1 = document.getElementById("h1");
                        h1.innerHTML = text;
                    }
                };
            };
        };
    </script>
</head>
<body>

<h2>
    1. ajax是什么?  <br>
    * asynchronous javascript and xml：异步的js和xml<br>
    * 它能使用js访问服务器，而且是异步访问！<br>
    * 服务器给客户端的响应一般是整个页面，一个html完整页面！但在ajax中因为是局部刷新，那么服务器就不用再响应整个页面！而只是数据！<br>

    > text：纯文本 <br>
    > xml：大家都熟悉！！！ <br>
    > json：它是js提供的数据交互格式，它在ajax中最受欢迎！ <br>
</h2>
<hr>


<button id="btn">点击这里、响应text文本</button>
<h1 id="h1"></h1>

</body>
</html>

2.2servlet

package data;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * Servlet implementation class Servlet
 * index.jsp
 *
 * 1. ajax是什么?
 * asynchronous javascript and xml：异步的js和xml
 * 它能使用js访问服务器，而且是异步访问！
 * 服务器给客户端的响应一般是整个页面，一个html完整页面！
 * 但在ajax中因为是局部刷新，那么服务器就不用再响应整个页面！而只是数据！
 *     > text：纯文本
 *     > xml：大家都熟悉！！！
 *     > json：它是js提供的数据交互格式，它在ajax中最受欢迎！
 */
@WebServlet("/Servlet")
public class Servlet extends HttpServlet {
	
	private static final long serialVersionUID = 1L;

	/*get request*/
	protected void doGet(HttpServletRequest request, HttpServletResponse response) 
			throws ServletException, IOException {
		/*响应编码*/
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		
		System.out.println("get request and HELLO AjAX!响应文本");
		response.getWriter().print("get request and  hello ajax!!!响应文本");
	}


	/*post request*/
	protected void doPost(HttpServletRequest request, HttpServletResponse response) 
			throws ServletException, IOException {
		/*响应编码*/
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=UTF-8");
		
		String name = request.getParameter("username");

		String strNmae = new String(name.getBytes("ISO-8859-1"),"UTF-8");
//		byte[] n = name.getBytes("ISO-8859-1");
//		String strNmae = new String(n,"UTF-8");
		
		System.out.println("doPost request and HELLO AjAX!"+strNmae);
		response.getWriter().print("doPost request and hello ajax!!!"+strNmae);
	}

}

2.3createXMLHttpRequest.js工具文件

/**
 * 创建XMLHttpRequest
 * return XMLHttpRequest
 * 适用常用浏览器
 * 
 */
function createXMLHttpRequest() {
	
	try {
		//大多数浏览器
		return new XMLHttpRequest();
	} catch (e) {
		try {
			//IE6.0
			return ActvieXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try {
				//IE5.5及更早版本	
				return ActvieXObject("Microsoft.XMLHTTP");
			} catch (e) {
				alert("该浏览器不支持XMLHttpRequest!");
				throw e;
			}
		}
	}
}

2.4、效果图