持续上文的ajax学习,说一说一些点.
调试
上次说了编写ajax对根本的四步,那么会写就要会调试.
调试办法有三种:
1)debugger
再JS函数第一行写上debugger,而后关上浏览器F12开发者模式sources就能够进行调试了.
次要会用到以上四个按键,别离是:开始暂停(以后断点完结进入下一断电),单步调试,进入办法,出办法
状态值会在0-4发生变化.
2)console.log()
这就是打桩办法,等同于java中的system.out.println.
3)排除法
能够逐渐排除,没有问题的能够先删掉或剪切,之后再撤销即可.
POST提交
上次仅仅说了GET提交,这次说一下POST提交:
//1.创立XHR对象var xhr=new XMLHttpRequest();//2.设置状态监听xhr.onreadystatechange=function(){ if(xhr.readyState==4&&xhr.status==200){ document.getElementById("result").innerHTML=xhr.responseText; }};//3.关上链接var name=document.forms[0].name.value;xhr.open("POST","/doSave",true);//post申请要设置申请头(规定)xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//4.发送申请xhr.send("name="+name);//Post申请send办法传值 步骤都根本和GET提交雷同,次要说一下与GET提交的不同点:
1)POST须要写一个申请头:
//post申请要设置申请头(规定)xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");这是规定,再open()办法之后send()办法之前写,固定就是这个格局,必须要写,咱们只须要恪守不要忘写即可.
2)POST不是在url地址后通过"?"连贯数据进行传值,再open办法中第二个参数只写url地址即可.
3)POST在send办法中传值
说几个客户端界面罕用的办法,onclick点击事件,onfocus失去焦点事件,onblur失去焦点事件
onclick罕用不多说
onfocus失去焦点是指,鼠标从新点击了设置办法的中央
onblur失去焦点就是指,鼠标从设置办法的中央移开点击了别的中央
Ajax封装
大家都会发现,Ajax的几个步骤和JDBC一样都是几步固定且反复,每次都写很浪费时间,所以咱们能够将其封装起来.
封装次要是要将其共性封装/个性提取,以此晋升代码的可重用性.
/Ajax Post申请的封装function doAjaxPost(url,params,callback){ //1.创立XHR对象 var xhr=new XMLHttpRequest(); //2.设置状态监听 xhr.onreadystatechange=function(){ if(xhr.readyState==4&&xhr.status==200){ callback(xhr.responseText); } }; //3.关上链接 //var name=document.getElementById("nameId").value; var name=document.forms[0].name.value; xhr.open("POST",url,true); //post申请要设置申请头(规定) xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //4.发送申请 xhr.send(params);//Post申请send办法传值 }//定义一个函数这个函数次要用于发送Ajax GET申请,目标封装共性,提取个性,以实现代码的可重用性function doAjaxGet(url,params,callback){ //1.创立XHR对象 var xhr=new XMLHttpRequest(); //2.设置状态监听 xhr.onreadystatechange=function(){ if(xhr.readyState==4&&xhr.status==200){ callback(xhr.responseText);//解决服务端响应的后果数据 } }; //3.关上链接 xhr.open("GET",url+"?"+params,true); //4.发送申请 xhr.send(null);//Get申请send办法传值}以上代码是GET/POST提交的别离封装,将他们共性的步骤进行封装,把个性的url地址,传入参数params,回调函数callback作为参数进行提取.
而后咱们能够将共性封装到一个.js文件中,在html页面能够通过script标签的src属性引入该js文件,就能够在html中间接应用了.
jQuery中的ajax
次要说四个办法:
//向服务端发送Ajax Get 申请function doGet(){ //1.定义申请url var url="doAjaxGet"; //2.定义申请参数 var params="msg=hello jquery ajax get"; //3.发送申请Get异步 //这里的$符号为jquery中的一个对象 //get(url[,params][,callback])为jquery中的一个ajax函数 $.get(url,params,function(result){ //document.getElementById("result").innerHTML=result; $("#result").html(result); })} //向服务端发送Ajax Post 申请function doPost(){ //1.定义申请url var url="doAjaxPost"; //2.定义申请参数 var params="msg=hello jquery ajax post"; //3.发送申请Get异步 //这里的$符号为jquery中的一个对象 //post(url[,params][,callback])为jquery中的一个ajax函数 $.post(url,params,function(result){//post申请用于向服务端提交数据 //document.getElementById("result").innerHTML=result; $("#result").html(result); })} //向服务端发送Ajax Post 申请function doAjax(){ //1.定义申请url var url="doAjaxGet"; //2.定义申请参数 var params="msg=hello jquery ajax post"; //3.发送申请Get异步 //这里的$符号为jquery中的一个对象 $.ajax({ type:"Get",//示意get申请(默认为get) url:url,//":"右边的内容为语法定义,咱们不能批改;":"左边为咱们本人定义 data:params, acync:true,//true示意异步 success:function(result){//回调函数 $("#result").html(result); } });} function doLoad(){ //1.定义申请url var url="doAjaxGet"; //2.定义申请参数 var params="msg=hello jquery ajax post"; //3.发送申请Get异步 //在指定地位异步加载url对象的资源 //在以后利用中示意把url对象的资源出现到#result地位 $("#result").load(url,params,function(){ console.log("load complete"); });}对于jquery中的ajax无关的办法打击都能够在官网中进行查阅.
JSON
JSON是一种数据格式
var jsonObj={id:100,title:"ta"};//JSON格局的JS对象jsonObj.id//拜访json格局的js对象中的数据var jsonStr=JSON.Stringify(jsonObj);//将JSON格局的js对象转换为JSON格局的字符串jsonObj=JSON.parse(jsonStr);//将JSON格局的字符串转换为JSON格局的对象在我的项目中用Ajax
须要先援用ajax的共性步骤:
(function(){ var ajax=function(){}; ajax.prototype={ doAjaxGet:function(url,params,callback){ //1.创立XHR对象 var xhr=new XMLHttpRequest(); //2.设置状态监听 xhr.onreadystatechange=function(){ if(xhr.readyState==4&&xhr.status==200){ callback(xhr.responseText);//解决服务端响应的后果数据 } }; //3.关上链接 xhr.open("GET",url+"?"+params,true); //4.发送申请 xhr.send(null);//Get申请send办法传值 }, doAjaxPost:function(url,params,callback){ //1.创立XHR对象 var xhr=new XMLHttpRequest(); //2.设置状态监听 xhr.onreadystatechange=function(){ if(xhr.readyState==4&&xhr.status==200){ callback(xhr.responseText); } }; //3.关上链接 //var name=document.getElementById("nameId").value; var name=document.forms[0].name.value; xhr.open("POST",url,true); //post申请要设置申请头(规定) xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //4.发送申请 xhr.send(params);//Post申请send办法传值 } } //将咱们构建的对象通过一个全局变量来指向它 window.Ajax=new ajax();})();//函数自调用()基于此形式来避免js的净化事件.放在函数中从全局变量-->局部变量而后再html引入该js文件.
应用ajax时咱们会把页面和数据别离返回,当返回数据时,当后端办法返回值为一个或多个pojo对象(也可能是map),springmvc还会检测办法上是否有@ResponseBody注解,若有springmvc会将返回的对象转换成json格局的字符串.
如果有日期类型的值返回,能够在返回数据类型的pojo类中对应的属性上加上@JsonFormat(pattern = "yyyy/MM/dd HH:mm:ss")注解来指定日期工夫类型数据的格局.
JS中的${}表达式:
在ajax中要拿到多条返回的数据,是由数组模式传回来的,就须要遍历数组,再将其拼接成一条一条数据:
(function(){ var url="/activity/doFindActivitys"; //启动ajax技术,基于get申请形式获取服务端json数据 $.getJSON(url,function(result){//getJSON函数默认会将服务器返回的json串转换成js对象 var tbody=$("#tbodyId"); tbody.empty();//清空原有body内容 for(var i=0;i<result.length;i++){//循环一次,迭代一行 //构建以后行对象 var tr=`<tr> <td>${result[i].title}</td> <td>${result[i].category}</td> <td>${result[i].startTime}</td> <td>${result[i].endTime}</td> <td>${result[i].state==1?'无效':'有效'}</td> <td><button type='button' class='btn btn-danger btn-sm'>delete</button></td> </tr>` //将每一行的内容都加到tbody中 tbody.append(tr); } }/* ,"json" */);})();上述代码中就用到了 ${}来获取变量的值,利用在``符号的外部,用来代替传统的""字符串拼接,能够缩小字符串拼接所占用的内存.