Ajax：
Ajax代码练习需要在网络服务器环境下，所以需要配置Tomcat服务器：
Tomcat服务器的配置详见：https://www.cnblogs.com/0099-ymsml/p/16033215.html
在进行服务器端的代码编时，创建Servlet后有一个方法：
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("Hello!Ajax!!");
response.getWriter().append("Hi!Ajax!!");
}
先对其中的HttpServletResponse response参数进行了解：
response可以看成是服务器端的实例对象，它调用getWriter()方法就相当于服务器端向客户端写入数据；
那么request就可以看作是客户端的实例对象。
/**
* public interface HttpServletResponse extends ServletResponse
* 在HttpServletResponse接口中没有getWriter()方法，所以去它的父接口找
* public interface ServletResponse
* 在ServletResponse接口中可以找到getWriter()方法
* public java.io.PrintWriter getWriter() throws java.io.IOException
* getWriter()返回的是一个java.io.PrintWriter对象
* public class PrintWriter extends Writer
* 在PrintWriter类中有一个append()方法：
* public PrintWriter append(CharSequence csq)
* 在append()方法中传入的是CharSequence接口对象
* 已知CharSequence接口专门用来操作字符串的，其下的实现类都是与字符串相关
* 所以append()方法就是向客户端添加字符串
*/
进行GET请求：
新建Servlet：
Servlet代码：
注意@WebServlet()这个注解，是服务器的路径：
比如下面这个在工程XMLPro下新建的Servlet名为XMLSer，
启动服务器后的路径就是注解中的路径
package AjaxDemo;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class AjaxDemo1
*/
@WebServlet("/AjaxSerlet")
public class AjaxDemo1 extends HttpServlet {
private static final long serialVersionUID = 1L;
public AjaxDemo1() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("Hello!Ajax!!");
response.getWriter().print("Hi!Ajax!!");
}
}
新建一个JSP文件：
JSP代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My JSP 'AjaxUser'</title>
<script type="text/javascript">
function createXMLHttpRequest() {
try{
return new XMLHttpRequest();
}catch(e){
try{
return new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
return new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
alter("请更换浏览器！")
throw e;
}
}
}
}
window.onload = function() {//文档加载完成后
var btn = document.getElementById("btn");
btn.onclick = function() {//给按钮的点击事件注册监听
/*
ajax四步操作
得到服务器的响应
把响应结果显示到h1中
*/
//1.得到异步对象
var xmlHttp = createXMLHttpRequest();
/*2.打开与服务器的连接:
*指定请求的方式
*指定请求的url
*指定是否为异步请求
*/
xmlHttp.open("GET", "/AjaxDemo/AjaxSerlet", true);
//3.发送请求
xmlHttp.send(null); //GET请求没有请求体，但也要给出null，否则浏览器可能不会发送
//4.给异步对象的 onreadystatechange事件注册监听器
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>
<button id="btn">点击即可</button>
<h1 id="h1">Hi!</h1>
</body>
</html>
最终是这样的：
运行Servlet服务器端配置的Tomcat服务器：
再启动客户端：
点击后：
进行POST请求：
做一个程序的过程分析：
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String username = request.getParameter("username");
System.out.println("username -------" + username);
response.getWriter().print("username ----- " + username);
}
<script>
//创建异步对象
function createXMLHttpRequest() {
try {
return new XMLHttpRequest();
} catch (e) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alter("请更换浏览器！")
throw e;
}
}
}
}
window.onload = function() {
var user = document.getElementById("user");
user.onblur = function() {
var xmlHttp1 = createXMLHttpRequest();
xmlHttp1.open("POST", "/SerPro/ASer", true);
xmlHttp1.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
xmlHttp1.send("username=" + user.value);
xmlHttp1.onreadystatechange = function() {
if (xmlHttp1.readyState == 4 && xmlHttp1.status == 200) {
var text1 = xmlHttp1.responseText;
var h1 = document.getElementById("h1");
h1.innerHTML = text1;
}
}
};
};
</script>
首先看服务器端(Servlet)：
request.getParameter("username")，getParameter()方法：
获取客户端(JSP)send("username=zs")方法中的对应的参数"zs"
public java.lang.String getParameter(java.lang.String name)
返回的是字符串
response.getWriter().print("username ----- " + username);
然后是getWriter()方法：向客户端发送数据，发送的内容就是print(发送内容)
public java.io.PrintWriter getWriter() throws java.io.IOException
返回一个PrintWriter对象，该对象可以向客户端发送字符文本。
向客户端(JSP)发送前面getParameter()方法获取的参数，就是username中的"zs"
客户端(JSP)：
发送过去了肯定需要变量来接收：
var text1 = xmlHttp1.responseText;
这行代码就是定义一个变量text1来接收服务器端传来的值，responseText就是服务器端响应后返回的值。
var h1 = document.getElementById("h1");
h1.innerHTML = text1;
第一行定位id="h1" 的标签；
然后将服务器返回的值text1插入html的 id="h1" 的<h1>标签的位置中；
open("POST",url,true);
"POST"：请求方式；
url：服务器文件所在路径
true：表示异步请求
一般带有参数的请求都是使用的POST请求；
设置Content-Type请求头：格式都是固定的
xmlHttp.setRequestHeader("Content-Type","application/x-www-foem-urlencoded");
send: xmlHttp.send("username=zhangsan&password=123"); // 发送请求时的请求体
package ajaxSerlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/ASerlet")
public class ASerlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public ASerlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("Hello!Ajax!!");
response.getWriter().print("Hi!Ajax!!");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 响应的编码方式
response.setContentType("text/html;charset=utf-8");
// 请求的编码方式
request.setCharacterEncoding("UTF-8");
String username = request.getParameter("username"); // 获取请求参数
System.out.println("【Post：】Hello!Ajax!!" + username);
response.getWriter().print("【Post：】Hi!Ajax!!" + username);
}
}
JSP文档：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>POST</title>
<script type="text/javascript">
function createXMLHttpRequest() {
try{
return new XMLHttpRequest();
}catch(e){
try{
return new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
return new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
alter("请更换浏览器！")
throw e;
}
}
}
}
window.onload = function() {//文档加载完成后
var btn = document.getElementById("btn");
btn.onclick = function() {//给按钮的点击事件注册监听
/*
ajax四步操作
得到服务器的响应
把响应结果显示到h1中
*/
//1.得到异步对象
var xmlHttp = createXMLHttpRequest();
/*2.打开与服务器的连接:
*指定请求的方式
*指定请求的url
*指定是否为异步请求
*/
// 修改open方法，指定为post
xmlHttp.open("POST", "/AjaxDemo/ASerlet", true);
// 设置请求头 Content-Type
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//3.发送请求
// 发送时指定请求体
xmlHttp.send("username=张三&password=123"); //GET请求没有请求体，但也要给出null，否则浏览器可能不会发送
//4.给异步对象的 onreadystatechange事件注册监听器
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>
<button id="btn">点击即可</button>
<h1 id="h1">Hi!</h1>
</body>
</html>
启动服务器：
点击：
注册表之校验用户是否被注册：
- 编写页面：
> 给出注册表页面
> 给用户名文本框添加onblur时间的监听
> 获取文本框的内容，通过ajax四步骤发送给服务器，得到响应结果
* 如果是1：在文本框显示用户已被注册
* 如果是0：什么都不做
- 编写serlet：
> ValidateUsernameSerlet:
> 获取客户端传递的用户名参数
> 判断是否为 cduser
* 是：返回1
* 否：返回0
服务器端代码：
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/ASer")
public class ASer extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
/**
* 获取参数username 判断是否为cd 是：返回1 否：返回0
*/
String username = request.getParameter("username");
System.out.println("username -------" + username);
if("cd".equals(username)) {
response.getWriter().print("1");
}else {
response.getWriter().print("0");
}
}
}
前端(JSP)代码：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户注册</title>
<script>
//创建异步对象
function createXMLHttpRequest() {
try {
return new XMLHttpRequest();
} catch (e) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alter("请更换浏览器！")
throw e;
}
}
}
}
window.onload = function() {
var user = document.getElementById("user");
user.onblur = function() {
var xmlHttp1 = createXMLHttpRequest();
xmlHttp1.open("POST", "/SerPro/ASer", true);
xmlHttp1.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
xmlHttp1.send("username=" + user.value);
xmlHttp1.onreadystatechange = function() {
if (xmlHttp1.readyState == 4 && xmlHttp1.status == 200) {
var text1 = xmlHttp1.responseText;
if(text1 == "1"){
var sp = document.getElementById("sp");
sp.innerHTML = "已经被注册！";
}else if(text1 == 0){
var sp = document.getElementById("sp");
sp.innerHTML = "用户名可以注册！";
}
}
}
};
};
</script>
</head>
<body>
<form action="" method="post">
用户名：<input type="text" name="username" id="user" /><b> <span id="sp"></span></b>
<br /> 密码：<input type="password" name="password" /> <input
type="submit" value="注册" />
</form>
<br />
<button id="btn">HERE</button>
<h1 id="h1"></h1>
</body>
</html>
因为是POST请求，所以要从JSP文件启动：
启动后浏览器页面：
当输入框失去焦点后就会启动user.onblur = function{}函数进行识别
这样就能成功编写一个识别用户名的ajax页面。
