继续上文的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[i].title}
${result[i].category}
${result[i].startTime}
${result[i].endTime}
${result[i].state==1?'有效':'无效'}
上述代码中就用到了 ${}来获取变量的值,应用在``符号的内部,用来代替传统的""字符串拼接,可以减少字符串拼接所占用的内存.