AJAX
1. 简介
Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。Ajax 是一种用于创建快速动态网页的技术,在无需重新加载整个网页的情况下,能够更新部分网页。
2. Ajax的基本使用
<input onblur="check()" />
<h1 id="msg"></h1>
// 创建异步请求对象
var xmlhttp = new XMLHttpRequest();
// 设置请求类型、请求地址以及参数、是否异步
xmlhttp.open("post","HelloServlet",true);
// 设置请求头部信息
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
// 发送请求
xmlhttp.send("userName="+$("input").val());
// 状态监听
xmlhttp.onreadystatechange = function(){
// 当状态为4 响应码为200的时则表示请求完成
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
// 获取返回请求结果
var result = xmlhttp.responseText;
// 根据请求结果进行处理
if(result == 1){
$("#msg").text("恭喜你,可以使用此用户名");
}else{
$("#msg").text("对不起,此用户名已被使用");
}
}
};
后台代码:
// 获取用户提交的请求参数
String name = request.getParameter("userName");
PrintWriter pw = response.getWriter();
// 当用户名是seven返回字符串0,否则返回字符串1
if("seven".equals(name)){
pw.write("0");
}else{
pw.write("1");
}
3. JQuery中的Ajax使用
// $.ajax 表示jquery中的ajax的调用方式
$.ajax({
"url":"HelloServlet", // 请求地址
"data":"userName="+$("input").val(), //参数
"type":"POST", // 请求类型
"success":function(data){ // 请求成功时的回调函数
if(data == 1){
$("#msg").text("恭喜你,可以使用此用户名");
}else{
$("#msg").text("对不起,此用户名已被使用");
}
},
"error":function(){ // 请求失败时的回调函数
}
});
后台代码同上。
如果与服务器交互的数据时json格式可使用如下方式:
/*
使用 HTTP GET 请求从服务器加载 JSON 编码的数据
第1个参数为请求地址,第2个参数为请求参数,请3个参数为成功时的回到函数
*/
$.getJSON("HelloServlet",{userName:$("input").val()},function(data){
// 如果返回的json字符串定义了result的键,可以直接通过键取出值进行判断操作
if(data.result){
$("#msg").text("恭喜你,可以使用此用户名");
}else{
$("#msg").text("对不起,此用户名已被使用");
}
});
后台代码:
// 获取用户提交的请求参数
String name = request.getParameter("userName");
PrintWriter pw = response.getWriter();
if("seven".equals(name)){
pw.write("{\"result\":false}");
}else{
pw.write("{\"result\":true}");
}
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<h1 id="msg"></h1>
<form>
<!-- 账号:<input id="userName" onblur="check()" ><br /><br /> -->
账号:<input id="userName"><br /> <br />
密码:<input type="password"><br /> <br />
<input type="submit">
</form>
<script type="text/javascript">
//第三种方法
/*
使用 HTTP GET 请求从服务器加载 JSON 编码的数据
第一个参数为请求地址,
第二个参数为请求参数,
第三个参数为成功时的回到函数
*/
$(function(){
$("#userName").on("blur",function(){
$.getJSON("${pageContext.request.contextPath}/HelloServlet",
{"m":"login1","userName":$("#userName").val()},
function(data){
// data {\"result\":false}
if(data.result){
$("#msg").text("恭喜你,可以使用此用户名-") ;
}else{
$("#msg").text("对不起,此用户名已经被使用-") ;
}
})
});
})
//第二种方式
/*$("#userName").on("blur",function(){
$.ajax({
"url":"${pageContext.request.contextPath}/HelloServlet",
"data":"m=login&userName="+ $("#userName").val() ,
"type":"post",
"success":function(data){
if(data==0){
$("#msg").text("对不起,此用户名已经被使用-");
}else{
$("#msg").text("恭喜你,可以使用此用户名-");
}
},
"error":function(){
$("#msg").text("error");
}
})
})*/
//第一种方式
/* function check() {
var input = document.getElementById("userName");
// 偷偷访问后台此用户名是否已经被注册过
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("post","${pageContext.request.contextPath}/HelloServlet",true);
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
// 发送请求
xmlhttp.send("m=login&userName="+input.value);
xmlhttp.onreadystatechange = function(){
// 当状态为4 响应码为200的时则表示请求完成
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
// 获取返回请求结果
var result = xmlhttp.responseText;
// 根据请求结果进行处理
var h = document.getElementById("msg") ;
if(result == 0){
h.innerText = "对不起,此用户名已经被使用";
}else{
h.innerText = "恭喜你,可以使用此用户名";
}
}
}
}; */
</script>
</body>
</html>
package com.blb.Demo;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/HelloServlet")
public class HelloServlet extends BaseServlet {
public void login(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String name = request.getParameter("userName");
PrintWriter pw = response.getWriter();
// 当用户名是seven返回字符串0,否则返回字符串1
if("seven".equals(name)){
pw.write("0");
}else{
pw.write("1");
}
}
public void login1(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//获取用户提交的请求参数
String name = request.getParameter("userName");
PrintWriter pw = response.getWriter();
if("seven".equals(name)){
pw.write("{\"result\":true}");
}else{
pw.write("{\"result\":false}");
}
}
}