query虽然属于比较老的技术,但是相较于原生的JS写起来还是反方便很多,现在流行使用VUE等开源的框架,但是这并非不妨碍咱们进行Jquery的学习,前端程序员成长的过程中Jquery是必须了解的类库之一,后端程序员喜欢简单粗暴,因而Jquery更受他们的欢迎.今天主要聊聊Jquery写Ajax进行异步刷新.上一篇JQ入门传送.
一、jQuery使用Ajax
想要了解jQuery如何使用Ajax,并且体会到它所带来的方便性,那么就得了解原始的Ajax是如何编写的,是怎样的繁琐,然后和Jquery的代码进行对比,才会有所悟。
1.1、什么是Ajax?(顺带提一下)
全名:Asynchronous Javascript And Xml[异步javascript和xml],
同步和异步原理图
同步就是浏览器发送一个请求到服务器端,网址会改变,页面会被重新加载到新的页面。如图
异步就是浏览器发送一个请求到服务器端,网址不会改变,并且页面只是局部刷新数据,能够接收服务器返回的数据,如果需要完成这样一个异步的过程,就需要使用Ajax技术,依靠Ajax引擎(XMLHttpRequest),原理如图
Ajax是什么现在就应该知道了,看上面讲解异步的原理就懂了,总结一句话,Ajax使用异步的方式从浏览器端发送请求,请求服务器端资源,并获得内容的一种技术。
1.2、原始Ajax的用法。
如果编写原始Ajax,那么就要总的分为4步,如下图
第一步:获取Ajax引擎
第二步:通过Ajax引擎执行回调函数,用来接收服务器端返回回来的数据。
第三步:Ajax引擎创建与服务器端的连接
第四步:发送请求到服务器,并且顺带将数据传输过去
总结:注意第三步和第四步中post请求和get请求的区别,如果是post请求,则需要加第三步中的65行代码,并且所传输到服务器端的请求参数必须放在第四步的73行代码中。如果是get请求的话,请求参数就直接放在第三步的62行代码中(参考第三步的56行解释),并且第三步中的65行代码就不需要了,还有第四步中的73行代码就不需要带请求参数过去,参考70.71的注释。
粘帖一份Ajax发送请求,并接收服务器端的数据的代码,供参考。谢谢
<script type="text/javascript"> function sendData(obj){ //alert("失去焦点"); //1 当失去焦点时,获得用户输入的内容 ,obj 等效 document.getElementById("xxx") var inputVal=obj.value; /* 2.1 创建核心类 */ var xmlhttp=null; if (window.XMLHttpRequest){// code for all new browsers xmlhttp=new XMLHttpRequest(); } else if (window.ActiveXObject) {// code for IE5 and IE6 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } // 2.2 设置回调 xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4 && xmlhttp.status==200){ // 3.1 接收服务器响应的数据 ,获得json数据,注意json也是文本 var data=xmlhttp.responseText; // 3.2 将字符串 转换 json 对象 // 如果字符串 转换 json 对象时不成功,使用格式:eval("('abc')"); var jsonData=eval("("+data+")"); // 3.3 判断 --控制按钮是否可用 var buttonObj=document.getElementById("buttonId"); var spanObj=document.getElementById("spanId"); if(jsonData.flag){ //可用 buttonObj.removeAttribute("disabled"); spanObj.style.color="#3D882D"; } else { //占用 buttonObj.setAttribute("disabled","disabled"); spanObj.style.color="#CC0000"; } // 3.4 到指定的位置显示 spanObj.innerHTML=jsonData.msg; } }; // 2.3 连接 xmlhttp.open("POST","/day21/Demo04Servlet"); // * 设置编码 xmlhttp.setRequestHeader("content-type", "application/x-www-form-urlencoded"); // 2.4 发送 xmlhttp.send("username=" + inputVal); } </script> </head> <body> <%-- <form action="" enctype="application/x-www-form-urlencoded"></form> --%> 用户名:<input type="text" name="username" onblur="sendData(this)" /> <span id="spanId"></span> <br/> 密码:<input type="password" name="password" /> <br/> <input id="buttonId" type="button" value="点我" />
1.3、jQuery使用Ajax
1.3.1、Ajax请求
第一层,最原始层,$.ajax ,一般不使用,完成更强大功能时需要使用。例如:如果出错了,给出提示
第二层,load、$.get 、$.post 开发中常使用用于处理ajax
第三层,$.getJSON $.getScript 优化辅助
一行代码搞定。但是jQuery使用Ajax有很多种用法,现在一一来介绍。
1、load的用法
必须在jQuery对象上触发函数,发送ajax请求
格式:load(url, [data], [callback])
url:请求路径
data:请求参数。参数格式为JSON
如果有参数,将是POST请求
如果没有参数,将是GET请求
callback:成功之后回调,具有三个参数
第一个参数:返回值(一般为json,看返回的是什么)
第二个参数:状态,其值可能是succuss,error,notmodify,timeout
第三个参数:ajax引擎XMLHttpRequest
实例:
OneServlet:服务器端响应
客户端发送ajax请求
$(function(){ $("input").click(function(){ var url="/jQuery_test/OneServlet";//请求服务器端地址 /* load(url, [data], [callback]) 有data,所以是post请求 callback中有一个参数,那么就是其返回值对象,返回值类型是什么, 取决于服务器返回的是什么,如果是json数据,那么需要通过21行 代码进行转换。 */ var data={"username":"jack"}; $(this).load(url,data,function(data){ //需要手动转成json对象 var jsonData=eval("("+data+")"); alert("成功" + jsonData.info); }); }); });
2、$.get方式
发送的就是get请求
格式:jQuery.get(url, [data], [callback], [type])
前三个参数和load方式一样
type:返回内容格式,xml, html, script, json, text, _default(默认为json格式)
实例:
服务器端
客户端
$( function(){ $("input").click(function(){ var url="/jQuery_test/OneServlet";//请求服务器端地址 /* jQuery.get(url, [data], [callback], [type]) */ var params={"username":"jack"}; //2 $.get 获得数据为json对象 // * 当发送数据位字符串时,通过第四个参数设置类型 // * 服务器端可以通过 MIME类型 确定发送JSON数据 $.get(url,params,function(data){ alert(data.success); },"json"); }); });
3、$.post方式
跟$.get完全类似。
发送post请求
格式:jQuery.post(url, [data], [callback], [type])
不做解释。一样的。
4、$.ajax方式
底层原始ajax请求方式,出错了,给出提示
常用格式:jQuery.ajax(settings); 使用json格式设置多项数据
看实例就懂了。
服务器端:雷同,不写了。
客户端
//4 $.ajax // * async 设置是否异步,true:表示异步(ajax) // * type 设置请求方式。例如:get、post // * url 设置请求路径 // * data 请求参数 // * dataType 设置数据转换类型,例如:xml, html, script, json // * success 成功回调 // * error 错误回调 $.ajax({ "async":true, "type":"POST", "url":url, "data":params, "success":function(data){ alert(data); }, "error" : function(){ alert("错误"); } });
1.3.2、表单序列化
serialize() 将表单中所有内容转成字符串
所有内容:有name,有值(非空)--文本有数据,单选多选选中,下拉列表选中等
字符串:key=value&key=value&....
应用场景:$.get,当get请求时,将所有表单元素的内容都发送到服务器端时,不用一个一个拼接,直接使用该函数就搞定了。
serializeArray()将表单中所有内容转成json数组
serialize()例子
核心代码。
表单代码如下
<h3>表单</h3> <form action=""> <table border="1" > <tr id="tr1"> <td class=""><label>姓名</label></td> <td><input type="text" name="username" class="textClass" value="jack" /></td> </tr> <tr> <td class=""><span>密码</span></td> <td><input type="password" name="password" value="1234" /></td> </tr> <tr> <td>性别</td> <td> <input type="radio" name="gender" value="男" />男 <input type="radio" name="gender" value="女" checked="checked" />女 </td> </tr> <tr id="tr4"> <td>爱好</td> <td> <input type="checkbox" name="hobby" value="1"/>抽烟 <input type="checkbox" name="hobby" value="2" checked="checked"/>喝酒 <input type="checkbox" name="hobby" value="3" checked="checked"/>烫头 </td> </tr> <tr> <td>我的照片</td> <td><input type="file" name="image" /></td> </tr> <tr> <td>学历</td> <td> <select name="edu"> <option value="1">小班</option> <option value="2" selected="selected">中班</option> <option value="3">大班</option> <option value="4">学前班</option> </select> </td> </tr> <tr> <td></td> <td> <button type="button" id="buttonId">普通按钮</button> <input type="submit" value="提交按钮" /> <input type="reset" value="重置按钮" /> <input type="image" value="图片按钮" src="" style="height: 30px;width: 50px" /> </td> </tr> </table> </form> <h3>公告信息</h3> <div> 未满18慎进 </div>
结果如图
看打印的结果,用&拼接而成,就是在get请求参数时放在url后面的格式,所以该应用场景是在$.get时。
serializeArray()实例。
结果
二、总结
复习了一下什么是Ajax,原始的Ajax的编写(4步),然后使用jQuery对象来编写ajax(一行代码搞定);使用jQuery的话,要注意服务器端返回json数据时,json数据格式要正确。拒绝错误的编写格式。比如"{'xx':'yy'}"或者"{'xx':xx}"这两种都是错误的格式,
但是在返回的是字符串时,可以使用"{'XX':XX"}",然后在页面使用eval进行转换即可。
下一节会讲解一下javascript的跨域数据传输问题(原始方法实现和使用jQuery实现)
本文转载于博客园续杯凉茶的博客
Web数据交互方式,Ajax:
Ajax,Asynchronous Javascript And XML(异步JavaScript和XML),2005年被Jesse James Garrett提出的新术语,用来描述一种使用现有技术集合的新方法,包括:HTML或XHTML,CSS,JavaScript,DOM,XML,XSLT,以及最重要的XMLHttpRequest。 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面,这使得程序能够更快地回应用户的操作。
jQuery
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(框架)于2006年1月由John Resig发布。封装了JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
Axios
一个基于promise的HTTP库,可以用在浏览器和node.js中。
跨域资源共享(CORS)
CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。
原生的Ajax同步&异步代码案例
//Ajax Get 同步请求
function AjaxSynGet(url) {
var xmlHttp;
if (window.XMLHttpRequest) {
xmlHttp=new XMLHttpRequest();
} else if (window.ActiveXObject) {
//IE
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
// xmlHttp.setRequestHeader("headName", "headName");
xmlHttp.open("GET", url + '&rnd=' + Math.random(), false);
xmlHttp.setRequestHeader("token","header-token-value");
xmlHttp.send(null);
var text=xmlHttp.responseText;
return text;
}
//Ajax Post 同步请求
function AjaxSynPost(url, param) {
var xmlHttp;
if (window.XMLHttpRequest) {
xmlHttp=new XMLHttpRequest();
} else if (window.ActiveXObject) {
//IE
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.open("POST", url + '&rnd=' + Math.random(), false);
xmlHttp.setRequestHeader("token","header-token-value");
xmlHttp.setRequestHeader("headName", 'headValue');
xmlHttp.send(param);
var text=xmlHttp.responseText;
return text;
}
//Ajax Get 异步请求
// rtnFun: 函数
function AjaxGet(url, rtnFun) {
var xmlHttp;
if (window.XMLHttpRequest) {
xmlHttp=new XMLHttpRequest();
} else if (window.ActiveXObject) {
//IE
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlHttp !=null) {
//get
xmlHttp.open("GET", url + '&rnd=' + Math.random(), true);
xmlHttp.setRequestHeader("token","header-token-value");
xmlHttp.send(null);
xmlHttp.onreadystatechange=function() {
//4="loaded"
if (xmlHttp.readyState==4) {
//200=OK
if (xmlHttp.status==200) {
var text=xmlHttp.responseText;
rtnFun(text);
}
}
}
}
}
//Ajax Post 异步请求
// rtnFun: 函数
function AjaxPost(url, param, rtnFun) {
var xmlHttp;
if (window.XMLHttpRequest) {
xmlHttp=new XMLHttpRequest();
//IE
} else if (window.ActiveXObject) {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlHttp !=null) {
xmlHttp.open("POST", url + '&rnd=' + Math.random(), true);
xmlHttp.setRequestHeader("token","header-token-value");
xmlHttp.setRequestHeader("headName", 'headValue');
xmlHttp.send(param);
xmlHttp.onreadystatechange=function() {
//4="loaded"
if (xmlHttp.readyState==4) {
//200=OK
if (xmlHttp.status==200) {
var text=xmlHttp.responseText;
rtnFun(text);
}
}
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生的Ajax同步&异步代码案例</title>
<!--r为参数防止浏览器缓存 -->
<script type="text/javascript" src="ajax.js?r=2"></script>
</head>
<body>
<div>
<span id="result1"></span>
<hr/>
<span id="result2"></span>
<hr/>
<span id="result3"></span>
<hr/>
<span id="result4"></span>
</div>
<script type="text/javascript">
// 1、Ajax Get同步请求
let result1=AjaxSynGet("http://192.168.1.116:8080/data/get?a=1");
console.log("result1",result1);
document.getElementById("result1").innerText=result1;
// 2、Ajax Post 同步请求
let result2=AjaxSynPost("http://192.168.1.116:8080/data/post?a=1","key=value");
console.log("result2",result2);
document.getElementById("result2").innerText=result2;
// 3、Ajax Get 异步请求
console.log("请求前:" + new Date().getTime());
AjaxGet("http://192.168.1.116:8080/data/get?a=1", function(data){
console.log("result3",data);
document.getElementById("result3").innerText=data;
});
console.log("请求后:" + new Date().getTime());
// 4、Ajax Ajax Post 异步请求
console.log("请求前:" + new Date().getTime());
AjaxPost("http://192.168.1.116:8080/data/post?a=1", "key=value", function(data){
console.log("result4",data);
document.getElementById("result4").innerText=data;
});
console.log("请求后:" + new Date().getTime());
</script>
</body>
</html>
jQuery的Ajax同步&异步代码案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery的Ajax同步&异步代码案例</title>
<script src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div>
<span id="result1"></span>
<hr/>
<span id="result2"></span>
<hr/>
<span id="result31"></span>
<hr/>
<span id="result32"></span>
<hr/>
<span id="result41"></span>
<hr/>
<span id="result42"></span>
</div>
<script type="text/javascript">
// 1、Ajax Get同步请求
let result1=$.ajax({
type: 'get',
url: 'http://192.168.1.116:8080/data/get',
async:false,
headers:{'token':'1333333333'},
});
console.log("result1",result1.responseText);
$("#result1").text(result1.responseText);
// 2、Ajax Post 同步请求
let result2=$.ajax({
type: 'post',
url: 'http://192.168.1.116:8080/data/post',
data: {},
async:false,
headers:{'token':'1333333333'},
});
console.log("result2",result2.responseText);
$("#result2").text(result2.responseText);
// 3、Ajax Get 异步请求
$.get("http://192.168.1.116:8080/data/get", function(data,status){
console.log("result31", JSON.stringify(data));
$("#result31").text(JSON.stringify(data));
});
$.ajax({
type: 'get',
url: 'http://192.168.1.116:8080/data/get',
async: true,
headers:{'token':'1333333333'},
success: function (res){
console.log("result32", JSON.stringify(res));
$("#result32").text(JSON.stringify(res));
},
error:function(err){
console.log("error32", err);
}
});
// 4、Ajax AjaxPost 异步请求
$.post("http://192.168.1.116:8080/data/post",{ id:''},function(data){
console.log("result41", JSON.stringify(data));
$("#result41").text(JSON.stringify(data));
});
$.ajax({
type: 'post',
url: 'http://192.168.1.116:8080/data/post',
data:{ id:'' },
contentType: 'application/x-www-form-urlencoded',
async: false,
headers:{'token':'1333333333'},
success: function (res){
console.log("result42", JSON.stringify(res));
$("#result42").text(JSON.stringify(res));
},
error:function(err){
console.log("error42", err);
}
});
</script>
</body>
</html>
Axios的Ajax同步&异步代码案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Axios的Ajax同步&异步代码案例</title>
<script src="https://lib.baomitu.com/axios/0.21.4/axios.min.js"></script>
</head>
<body>
<div>
<span id="result11"></span>
<hr/>
<span id="result12"></span>
<hr/>
<span id="result21"></span>
<hr/>
<span id="result22"></span>
<hr/>
<span id="result31"></span>
</div>
<script type="text/javascript">
// URL编码 URL解码
console.log("URL编码",encodeURIComponent("名字"));
console.log("URL解码",decodeURIComponent("%E5%90%8D%E5%AD%97"));
// 1、Ajax Get异步请求
axios.get('http://192.168.1.116:8080/data/get?id=11&name=名字',{
params: {desc:"描述"},
headers: {"token": "token123"}
}).then(res=> {
console.log("result11", JSON.stringify(res.data));
document.getElementById("result11").innerText=JSON.stringify(res.data);
});
// 另外一种写法
axios({
url: 'http://192.168.1.116:8080/data/get?id=12&name=名字',
method: 'GET',
params: {desc:"描述"},
headers: {"token": "token123"}
}).then(res=> {
console.log("result12", JSON.stringify(res.data));
document.getElementById("result12").innerText=JSON.stringify(res.data);
})
// 2、Ajax Post异步请求
axios.post('http://192.168.1.116:8080/data/post',"id=21&name=名字",{
headers: {"token": "token123"}
}).then(res=> {
console.log("result21", JSON.stringify(res.data));
document.getElementById("result21").innerText=JSON.stringify(res.data);
})
// 另外一种写法
axios({
url: 'http://192.168.1.116:8080/data/post',
method: 'post',
data: {id: 22,name:'名字'},
headers: {"token": "token123"}
}).then(res=> {
console.log("result22", JSON.stringify(res.data));
document.getElementById("result22").innerText=JSON.stringify(res.data);
});
// 3、Ajax Get同步请求
console.log("请求前:" + new Date().getTime());
async function getData() {
let data="";
await axios.get('http://192.168.1.116:8080/data/get?id=31&name=名字').then(res=> {
data=JSON.stringify(res.data);
console.log("执行1:" + new Date().getTime());
});
console.log("执行2:" + new Date().getTime());
return data;
}
const result=getData();
result.then(res=>{
console.log("执行3:" + new Date().getTime());
console.log("result31", res);
document.getElementById("result31").innerText=res;
})
console.log("请求后:" + new Date().getTime());
</script>
</body>
</html>
SpringBoot后台代码
跨域的Filter:
import javax.servlet.*;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
public class SimpleCORSFilter implements Filter {
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
HttpServletResponse response=(HttpServletResponse) res;
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, HEAD");
response.setHeader("Access-Control-Max-Age", "3600");
//response.setHeader("Access-Control-Allow-Headers", "access-control-allow-origin, authority, content-type, version-info, X-Requested-With");
response.setHeader("Access-Control-Allow-Headers", "*");
chain.doFilter(req, res);
}
public void init(FilterConfig filterConfig) {}
public void destroy() {}
}
配置(主要是跨域):
import org.springframework.boot.web.servlet.FilterRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
@Configuration
public class CommonConfig {
@Bean
public FilterRegistrationBean registerAuthFilter() {
FilterRegistrationBean registration=new FilterRegistrationBean();
registration.setFilter(new SimpleCORSFilter());
registration.addUrlPatterns("/*");
registration.setName("simpleCORSFilter");
registration.setOrder(1); // 值越小,Filter越靠前。
return registration;
}
private CorsConfiguration buildConfig() {
CorsConfiguration corsConfiguration=new CorsConfiguration();
corsConfiguration.addAllowedOrigin("*"); //允许任何域名
corsConfiguration.addAllowedHeader("*"); //允许任何头
corsConfiguration.addAllowedMethod("*"); //允许任何方法
return corsConfiguration;
}
// @Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source=new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", buildConfig()); //注册
return new CorsFilter(source);
}
}
Controller支持:
jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post, $.getJSON, $getScript。使用该方法进行异步数据通讯可以很灵活地设置请求的各个参数。常用参数和说明:
参数 | 描述 |
url | 发送请求的地址 |
data | 发送到服务器的数据。将自动转换为请求字符串格式。 |
type | 请求方式 ("POST" 或 "GET"), 默认为 "GET" |
dataType | 预期服务器返回的数据类型。可用值: xml,html,script,json,jsonp,text |
success | 请求成功后的回调函数。参数:由服务器返回,并根据dataType参数进行处理后的数据 |
error | 默认: 自动判断 (xml 或 html)) 请求失败时调用此函数。如果发生了错误,错误信息(第二个参数)除了得到null之外,还可能是"timeout", "error", "notmodified" 和 "parsererror" |
async | 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行 |
示例:
$.ajax({ type: "POST", url: "testServlet", data: {"name":"itcast","location":"guangzhou"}, success: function(msg){ alert( "Data Saved: " + msg ); } }); |
*请认真填写需求信息,我们会在24小时内与您取得联系。