作者： | 来源：互联网 | 2023-09-17 08:26
目录 Ajax1.实现2.例子-原生ajax3.例子-JQuery（推荐）①ajax,get,post ②load③getJSON()Ajax异步刷新：如果网页中某一个地方需要修改
目录
Ajax
1.实现
2.例子-原生ajax
3.例子-JQuery&＃xff08;推荐&＃xff09;
①ajax,get,post
②load
③getJSON()
Ajax
异步刷新&＃xff1a;如果网页中某一个地方需要修改&＃xff0c;异步刷新可以使&＃xff1a;只刷新该需要修改的地方&＃xff0c;而页面中其他地方保持不变。
例如&＃xff1a;百度搜索框&＃xff0c;视频的点赞
1.实现
js&＃xff1a;XMLHttpRequest对象
XMLHttpRequest对象的方法&＃xff1a;
- open(方法名&＃xff08;提交方式get|post&＃xff09;&＃xff0c;服务器地址&＃xff0c;true)&＃xff1a;与服务端建立连接
- send()&＃xff1a;
- get&＃xff1a;send(null)
- post&＃xff1a;send(参数值)
- setRequestHeader(header,value)&＃xff1a;
- get&＃xff1a;不需要设置此方法
- post&＃xff1a;需要设置&＃xff1a;
- a&＃xff1a;如果请求元素中包含了文件上传&＃xff1a;
setRequestHeader("Content-Type","multipart/form-data")
- b&＃xff1a;不包含文件上传
setRequestHeader("Content-Type","application/x-www-form-urlencoded")
XMLHttpRequest对象的属性&＃xff1a;
- readyState&＃xff1a;请求状态
readyState表示 XMLHttpreRequest对象发送的HTP请求状态&＃xff0c;共有五种状态&＃xff0c;只有状态为4代表请求完毕
HTTP请求状态
状态值 |
简介 |
|---|
0 |
表示XMLHttpRequest对象没有初始化 |
1 |
表示XMLHttpRequest对象开始发送请求&＃xff1a;已经执行了open()方法并完成了相关资源的准备 |
2 |
表示XMLHttpRequest对象已将请求发送完毕&＃xff1a;已经执行了send()方法来发送请求&＃xff0c;但是还没有收到响应 |
3 |
表示XMLHttpRequest对象开始读取相应信息&＃xff1a;已经接收到HTTP响应的头部信息&＃xff0c;但是还没有将相应体接收完毕 |
4 |
表示XMLHttpRequest对象将响应信息全部读取完毕 |
2.例子-原生ajax
index.jsp
<%&＃064; page language&＃061;"java" contentType&＃061;"text/html; charset&＃061;UTF-8"
pageEncoding&＃061;"UTF-8"%>
电话&＃xff1a;
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&＃061;UTF-8");
String mobile &＃061; request.getParameter("mobile");
PrintWriter out &＃061; response.getWriter();
//假设此时数据库中只有一个号码&＃xff1a;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&＃xff08;推荐&＃xff09;
①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)
);
<%&＃064; page language&＃061;"java" contentType&＃061;"text/html; charset&＃061;UTF-8"
pageEncoding&＃061;"UTF-8"%>
电话&＃xff1a;
②load
$(xxx).load(
服务器地址,
请求数据
);
将服务器的返回值直接加载到$(xxx)所选择的元素中
<%&＃064; page language&＃061;"java" contentType&＃061;"text/html; charset&＃061;UTF-8"
pageEncoding&＃061;"UTF-8"%>
电话&＃xff1a;
修改MobileServlet&＃xff1a;
if("12345123456".equals(mobile)) {
//out.write("true"); //servlet以输出流的方式将信息返回给客户端
out.write("注册失败&＃xff0c;号码已存在");
}else {
//out.write("false");
out.write("注册成功");
}
③getJSON()
$.getJSON(
服务器地址,
JSON格式的请求数据,
function(result){
}
);
<%&＃064; page language&＃061;"java" contentType&＃061;"text/html; charset&＃061;UTF-8"
pageEncoding&＃061;"UTF-8"%>
电话&＃xff1a;
修改MobileServlet&＃xff1a;
if("12345123456".equals(mobile)) {
//out.write("true"); //servlet以输出流的方式将信息返回给客户端
//out.write("注册失败&＃xff0c;号码已存在");
//如果客户端是getJSON(),则需要以json格式返回数据
out.write("{\"msg\":\"true\"}");//"msg":"true"
}else {
//out.write("false");
//out.write("注册成功");
out.write("{\"msg\":\"false\"}");//"msg":"false"
}
本文地址：https://blog.csdn.net/qiao39gs/article/details/109175872
京公网安备 11010802041100号