关于前端:Ajax初步学习02

持续上文的 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" */);
})();

上述代码中就用到了 ${}来获取变量的值, 利用在 “ 符号的外部, 用来代替传统的 ”” 字符串拼接, 能够缩小字符串拼接所占用的内存.