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>
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、效果图