Jquery_ajax
Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
jQuery中常用的AJAX方法
1.load()从服务器加载数据,并把返回的数据放置到指定的元素中
格式:$(selector).load(url,data,function(response,status,xhr))
url-您需要加载的 URL
data-请求参数
function(response,status,xhr)--完成时运行的回调函数
response - 包含服务器返回的结果数据
status - 包含请求的状态【"success"、"notmodified"、"error"、"timeout"、"parsererror"】
xhr - 包含 XMLHttpRequest 对象
2.$.ajax()--执行异步 AJAX 请求
格式:$.ajax({name:value, name:value, ... })
url----您需要加载的 URL 例如:$.ajax({ url:”login”})
type--规定请求的类型(GET 或 POST) 例如:$.ajax({url:”login”,type:”GET”})
data--规定要发送到服务器的数据.
dataType--服务器响应的数据类型
success(result,status,xhr)---当请求成功时运行的函数
result--响应结果
status--响应状态
xhr-- 包含 XMLHttpRequest 对象
async---布尔值,表示请求是否异步处理。默认是 true。
error(xhr,status,error)--如果请求失败要运行的函数
3.$.get()--使用 AJAX 的 HTTP GET 请求从服务器加载数据
格式:$.get(URL,data,function(data,status,xhr),dataType)
url----您需要加载的 URL
data--规定要发送到服务器的数据.
function(data,status,xhr)---当请求成功时运行的函数
dataType--服务器响应的数据类型 “text” “json” “xml”
4.$.post()--使用 AJAX 的 HTTP POST 请求从服务器加载数据
格式:$(selector).post(URL,data,function(data,status,xhr),dataType)
url----您需要加载的 URL
data--规定要发送到服务器的数据.
function(data,status,xhr)---当请求成功时运行的函数
dataType--服务器响应的数据类型 “text” “json” “xml”
例如:
1.创建html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试jQuery的Ajax</title>
<script src="../js/jquery-3.5.1.js"></script>
<script>
$(function(){
//测试get方法发送无参数的ajax请求
$("#but1").click(function(){
$.get("http://127.0.0.1:8080/TestAjax/test",
function(data){
alert(data);
$("#h1").text(data);
},"text");
});
//测试post方法发送无参数的ajax请求
$("#but2").click(function(){
$.post("http://127.0.0.1:8080/TestAjax/test",
function(msg){
$("#h1").text(msg);
},"text");
});
//get发送有参数的请求
/*
$("#but3").click(function(){
var username = $("#text1").val();
var password = $("#text2").val();
$.get("http://127.0.0.1:8080/TestAjax/test2?username="+username+"&password="+password,
function(msg){
$("#h1").text(msg);
},"text");
});
*/
$("#but3").click(function(){
var username = $("#text1").val();
var password = $("#text2").val();
var data = "username="+username+"&password="+password;
$.get("http://127.0.0.1:8080/TestAjax/test2",
data,
function(data){
$("#h1").text(data);
},"text");
});
//post发送有参数的请求
/*
$("#but4").click(function(){
var username = $("#text1").val();
var password = $("#text2").val();
$.post("http://127.0.0.1:8080/TestAjax/test2?username="+username+"&password="+password,
function(data){
$("#h1").text(data);
},"text");
});
*/
/*
$("#but4").click(function(){
var username = $("#text1").val();
var password = $("#text2").val();
var data = "username="+username+"&password="+password;
$.post("http://127.0.0.1:8080/TestAjax/test2",
data,
function(data){
$("#h1").text(data);
},"text");
});
*/
$("#but4").click(function(){
var username = $("#text1").val();
var password = $("#text2").val();
var data = {"username":username,"password":password};
$.post("http://127.0.0.1:8080/TestAjax/test2",
data,
function(data){
$("#h1").text(data);
},"text");
});
//get方式返回json字符串
$("#but5").click(function(){
$.get("http://127.0.0.1:8080/TestAjax/test3",
function(data){
//dataType==="text"---json字符串==>json对象
//var jsonObj = JSON.parse(data);
//var stuinfo = jsonObj.stuid+","+jsonObj.stuname+","+jsonObj.stuage+","+jsonObj.stupass;
//$("#h1").text(stuinfo);
//dataType=="json"-->json对象
$("#h1").text(data);
},"json");
});
//post方式,返回json
$("#but6").click(function(){
$.post("http://127.0.0.1:8080/TestAjax/test3",
function(data){
//datatype=="json"-->json对象
$("#h1").text(data.stuname);
},"json");
});
});
</script>
</head>
<body>
<input id="but1" type="button" value="测试get方法发送无参数的ajax请求" />
<input id="but2" type="button" value="测试post方法发送无参数的ajax请求" />
<br>
<input id="but3" type="button" value="测试get方法发送有参数的ajax请求" />
<input id="but4" type="button" value="测试post方法发送有参数的ajax请求" />
<br>
<input id="but5" type="button" value="测试get方法发送ajax请求,返回json" />
<input id="but6" type="button" value="测试post方法发送ajax请求,返回json" />
<br>
<input id="text1" type="text" /><br>
<input id="text2" type="text" /><br>
<h1 id="h1"></h1>
</body>
</html>
2.创建处理请求的Servlet
1.添加过滤器对跨域请求做出处理
package com.wangxing.filter;
import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class CORSFilter implements Filter{
@Override
public void destroy() {
}
@Override
public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain)
throws IOException, ServletException {
HttpServletRequest request = (HttpServletRequest) req;
HttpServletResponse response = (HttpServletResponse) resp;
//跨域请求,*代表允许全部类型
response.setHeader("Access-Control-Allow-Origin", "*");
//允许请求方式
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
//用来指定本次预检请求的有效期,单位为秒,在此期间不用发出另一条预检请求
response.setHeader("Access-Control-Max-Age", "3600");
//请求包含的字段内容,如有多个可用哪个逗号分隔如下
response.setHeader("Access-Control-Allow-Headers", "content-type,x-reques