目录
Ajax
异步刷新:如果网页中某一个地方需要修改,异步刷新可以使:只刷新该需要修改的地方,而页面中其他地方保持不变。
例如:百度搜索框,视频的点赞
1.实现
js:XMLHttpRequest对象
XMLHttpRequest对象的方法:
- open(方法名(提交方式get|post),服务器地址,true):与服务端建立连接
- send():
- get:send(null)
- post:send(参数值)
- setRequestHeader(header,value):
- get:不需要设置此方法
- post:需要设置:
- a:如果请求元素中包含了文件上传:
setRequestHeader("Content-Type","multipart/form-data") - b:不包含文件上传
setRequestHeader("Content-Type","application/x-www-form-urlencoded")
- a:如果请求元素中包含了文件上传:
XMLHttpRequest对象的属性:
- readyState:请求状态
readyState表示 XMLHttpreRequest对象发送的HTP请求状态,共有五种状态,只有状态为4代表请求完毕
HTTP请求状态 状态值 简介 0 表示XMLHttpRequest对象没有初始化 1 表示XMLHttpRequest对象开始发送请求:已经执行了open()方法并完成了相关资源的准备 2 表示XMLHttpRequest对象已将请求发送完毕:已经执行了send()方法来发送请求,但是还没有收到响应 3 表示XMLHttpRequest对象开始读取相应信息:已经接收到HTTP响应的头部信息,但是还没有将相应体接收完毕 4 表示XMLHttpRequest对象将响应信息全部读取完毕 - status:响应状态
status表示HTTP响应中的状态码,只有状态码为200时才表示响应成功;否则,说明HTTP响应不正常HTTP响应状态码 状态码 含义 200 服务器正常响应
400 无法找到请求的资源 403 没有访问权限 404 访问的资源不存在 500 服务器内部错误,很可能是服务器代码有错 - onreadystatechange:回调函数
-
responseText:相应格式为String
-
responseXML:相应格式为XML
- status:响应状态
2.例子-原生ajax
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function registerPost(){
var mobile = document.getElementById("mobile").value
//通过ajax异步方式请求服务端
xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.open("post","MobileServlet",true);
//设置xmlHttpRequest对象的回调函数
xmlHttpRequest.onreadystatechange = callBack;
//设置post方式的头信息
xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttpRequest.send("mobile="+mobile);//k=v
}
function registerGet(){
var mobile = document.getElementById("mobile").value
alert(mobile)
//通过ajax异步方式请求服务端
xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.open("get","MobileServlet?mobile="+mobile,true);
//设置xmlHttpRequest对象的回调函数
xmlHttpRequest.onreadystatechange = callBack;
//设置post方式的头信息,get不需要
//xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttpRequest.send(null);//k=v
}
//定义回调函数(接收服务端的返回值)
function callBack(){
if(xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){
//接收服务端返回的数据
var data = xmlHttpRequest.responseText;//服务端返回值为String格式
if(data=="true"){
alert("此号码已存在");
}else{
alert("注册成功!");
}
}else{
}
}
</script>
</head>
<body>
电话:<input type="text" name="mobile" id="mobile"><br>
<input type="button" onclick="registerGet()" value="注册">
</body>
</html>
MobileServlet.java
package com.stx.servlet;
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 MobileServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("text/html; charset=UTF-8");
String mobile = request.getParameter("mobile");
PrintWriter out = response.getWriter();
//假设此时数据库中只有一个号码:12345123456
System.out.println(request.getParameter("mobile"));
if("12345123456".equals(mobile)) {
out.write("true"); //servlet以输出流的方式将信息返回给客户端
}else {
out.write("false");
}
out.close();
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
3.例子-JQuery(推荐)
①ajax,get,post
$.ajax({
url:服务器地址,
请求方式:get|post,
data:请求数据,
success:function(result,testStatus){
},
error:function(xhr,errorMessage,e){
}
});
$ajax.get(
服务器地址,
请求数据,
function(result){
},
预期返回值类型(string/xml/text)
);
$.post(
服务器地址,
请求数据,
function(result){
},
预期返回值类型(string/xml/text)
);
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
function register(){
var $mobile = $('#mobile').val();
/*
$.ajax({
url:"MobileServlet",
data:"mobile="+$mobile,
success:function(result,testStatus){
if(result=="true"){
alert("此号码已存在");
}else{
alert("注册成功!");
}
},
error:function(xhr,errorMessage,e){
alert("系统异常!");
}
});
*/
/*
$.post(
"MobileServlet",
"mobile="+$mobile,
function(result){
if(result=="true"){
alert("此号码已存在");
}else{
alert("注册成功!");
}
},
"text"
);
*/
$.get(
"MobileServlet",
"mobile="+$mobile,
function(result){
if(result=="true"){
alert("此号码已存在");
}else{
alert("注册成功!");
}
}
);
}
</script>
</head>
<body>
电话:<input type="text" name="mobile" id="mobile"><br>
<input type="button" onclick="register()" value="注册">
</body>
</html>
②load
$(xxx).load(
服务器地址,
请求数据
);
将服务器的返回值直接加载到$(xxx)所选择的元素中
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
function register(){
$("#tip").load(
"MobileServlet",
"mobile="+$mobile
);
}
</script>
</head>
<body>
电话:<input type="text" name="mobile" id="mobile"><br>
<input type="button" onclick="register()" value="注册">
<span id="tip"></span>
</body>
</html>
修改MobileServlet:
if("12345123456".equals(mobile)) {
//out.write("true"); //servlet以输出流的方式将信息返回给客户端
out.write("注册失败,号码已存在");
}else {
//out.write("false");
out.write("注册成功");
}
③getJSON()
$.getJSON(
服务器地址,
JSON格式的请求数据,
function(result){
}
);
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
function register(){
var $mobile = $('#mobile').val();
$.getJSON(
"MobileServlet",
{"mobile":$mobile},
function(result){
if(result.msg=="true"){
alert("此号码已存在");
}else{
alert("注册成功!");
}
}
);
}
</script>
</head>
<body>
电话:<input type="text" name="mobile" id="mobile"><br>
<input type="button" onclick="register()" value="注册">
<span id="tip"></span>
</body>
</html>
修改MobileServlet:
if("12345123456".equals(mobile)) {
//out.write("true"); //servlet以输出流的方式将信息返回给客户端
//out.write("注册失败,号码已存在");
//如果客户端是getJSON(),则需要以json格式返回数据
out.write("{\"msg\":\"true\"}");//"msg":"true"
}else {
//out.write("false");
//out.write("注册成功");
out.write("{\"msg\":\"false\"}");//"msg":"false"
}