Ajax初步学习02

迈克丝

继续上文的ajax学习,说一说一些点.

调试

上次说了编写ajax对基本的四步,那么会写就要会调试.

调试方法有三种:
1)debugger
再JS函数第一行写上debugger,然后打开浏览器F12开发者模式sources就可以进行调试了.
image
主要会用到以上四个按键,分别是:开始暂停(当前断点结束进入下一断电),单步调试,进入方法,出方法
状态值会在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" */);
})();

上述代码中就用到了 ${}来获取变量的值,应用在``符号的内部,用来代替传统的""字符串拼接,可以减少字符串拼接所占用的内存.

阅读 750

一步一步学技术,踏踏实实涨经验,兴趣广泛,广交好友,希望大家多多指正/批评.

71 声望
5 粉丝
0 条评论

一步一步学技术,踏踏实实涨经验,兴趣广泛,广交好友,希望大家多多指正/批评.

71 声望
5 粉丝
文章目录
宣传栏