AJax(XHR+Get和Post+AJax的封装)

@[TOC]

目标:

㈠ XMLHttpRequest

㈡GET 与 POST

㈢封装 Ajax

一、 XMLHttpRequest

Ajax 技术核心是 XMLHttpRequest 对象(简称 XHR), Ajax指向服务器请求额外的数据而无须卸载页面(即刷新)
创建 XHR 对象可以直接实例化 XMLHttpRequest 即可。
var xhr = new XMLHttpRequest();
在使用 XHR 对象时，先必须调用 open()方法，它接受三个参数：要发送的请求类型(get、 post)、 请求的 URL 和表示是否异步。 open()方法并不会真正 发送请求，而只是启动一个请求以备发送。
通过 send()方法进行发送请求， send()方法接受一个参数，作为请求主体 发送的数据。如果不需要则，必须填 null。执行 send()方法之后，请求就会发 送到服务器上。
当请求发送到服务器端，收到响应后，响应的数据会自动填充 XHR 对象的属性。那么一共有四个属性：

接受响应之后，第一步检查 status 属性，以确定响应已经成功返回。一般 情况 HTTP 状态代码为 200 作为成功的标志。除了成功的状态代码，还有一些别 的：

同步调用固然简单，但使用异步调用才是我们真正常用的手段。使用异步调 用的时候，检测 readyState 属性,每当 readyState 属性改变时，触发
readystatechange 事件。这个属性有五个值：

二、 GET 与 POST

在提供服务器请求的过程中，有两种方式，分别是： GET 和 POST。在 Ajax 使用 的过程中， GET 的使用频率要比 POST 高。

GET 请求

可以将查询字符串参数追加到 URL 的末尾，以便提交给服务器。

xhr.open('get','diner/login?'+'name=Lee&age=100',true);

通过 URL 后的问号给服务器传递键值对数据，服务器接收到返回响应数据。

POST 请求

三、封装 Ajax

因为 Ajax 使用起来比较麻烦，主要就是参数问题，比如到底使用 GET 还是
POST；我们需要封装一个 Ajax 函数，来方便我们调用。

四:课程代码附件

1)ajax同步请求

实现流程：
                同步：
                    1、得到核心对象XMLHttpRequest对象
                        var xhr = new XMLHttpRequest();
                    2、准备/打开请求
                        open(请求类型GET/POST,请求的路径,是否异步true/false);
                    3、发送请求
                        send(参数/null);
                        注：如果是get请求，参数直接跟在请求路径后面，send()方法中设置null;
                            如果是post请求，有参数则设置参数，无参数设置为null;
                    4、解析响应数据
                        1、判断响应是否成功 status=200 （404=未找到资源;500=服务器异常;200=成功）
                        2、得到后台响应数据  responseText
<script type="text/javascript">
        // 1、得到核心对象XMLHttpRequest对象
        var xhr = new XMLHttpRequest();
        console.log(xhr);
        // 2、准备/打开请求  open(请求类型GET/POST,请求的路径,是否异步true/false);
        xhr.open("GET","js/data.json?uname=zhangsan&uage=10",false); // 同步请求
        // 3、发送请求  send(参数/null);
        xhr.send(null);
        // 4、解析响应数据
        if (xhr.status == 200) { // 1、判断响应是否成功 status=200
            // 2、得到后台响应数据  responseText
            console.log(xhr.responseText);
            var user = JSON.parse(xhr.responseText);
            console.log(user);
            console.log(user.uname);
        } else {
            alert("失败状态码：" + xhr.status + "，失败原因：" + xhr.statusText);
        }                                
    </script>

2)ajax异步请求

<script type="text/javascript">
        // 1、得到核心对象XMLHttpRequest对象
        var xhr = new XMLHttpRequest();
        
        console.log(xhr);
        // 2、准备/打开请求  open(请求类型GET/POST,请求的路径,是否异步true/false);
        xhr.open("GET","js/data.json?uname=zhangsan&uage=10",true); // 异步请求
        // 3、发送请求  send(参数/null);
        xhr.send(null);
        
        // 监听readystate事件 （0=尚未调用open方法；1=已调用open方法未调用send方法，2=调用send方法，未接收到响应；3=接收到部分响应；4=响应完全接收）
        xhr.onreadystatechange = function() {
            // 如果是异步请求，需要等待数据完全响应后再做处理
            if (xhr.readyState == 4) {
                // 4、解析响应数据
                if (xhr.status == 200) { // 1、判断响应是否成功 status=200
                    // 2、得到后台响应数据  responseText
                    console.log(xhr.responseText);
                    var user = JSON.parse(xhr.responseText);
                    console.log(user);
                    console.log(user.uname);
                } else {
                    console.log("失败状态码：" + xhr.status + "，失败原因：" + xhr.statusText);
                }
            }
        }        
    </script>

3)post请求

                         注意:Post和Get没太大差别,就换了个名字
<script type="text/javascript">
        // 1、得到核心对象XMLHttpRequest对象
        var xhr = new XMLHttpRequest();
        
        console.log(xhr);
        // 2、准备/打开请求  open(请求类型GET/POST,请求的路径,是否异步true/false);
        xhr.open("POST","js/data.json",true); // 异步请求
        // 由于Post请求的机制问题，需要模拟表单提交
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        // 3、发送请求  send(参数/null);
        xhr.send("uname=zhangsan&uage=10"); // post请求如果有参数，需要将参数设置在send方法中
        
        // 监听readystate事件 （0=尚未调用open方法；1=已调用open方法未调用send方法，2=调用send方法，未接收到响应；3=接收到部分响应；4=响应完全接收）
        xhr.onreadystatechange = function() {
            // 如果是异步请求，需要等待数据完全响应后再做处理
            if (xhr.readyState == 4) {
                // 4、解析响应数据
                if (xhr.status == 200) { // 1、判断响应是否成功 status=200
                    // 2、得到后台响应数据  responseText
                    console.log(xhr.responseText);
                    var user = JSON.parse(xhr.responseText);
                    console.log(user);
                    console.log(user.uname);
                } else {
                    console.log("失败状态码：" + xhr.status + "，失败原因：" + xhr.statusText);
                }
            }
        }        
    </script>

4)ajax封装

<script type="text/javascript">
    var obj = {
        method:"GET",
        url:"js/data.json?aa=11",
        async:true,
        data:{
            uname:"zhangsan",
            uage:18
        },
        success:function(data){
            // 做想处理的事情
            console.log(data);
        }
    };        

    function ajax(obj) {
        // 1、得到核心对象XMLHttpRequest对象
        var xhr = new XMLHttpRequest();
        
        var params = formatParam(obj.data);
        
        // 判断是否是get请求，如果是则将参数拼接在url后面
        if ("GET" == (obj.method).toUpperCase()) {
            //  js/data.json?uname=zhangsan&uage=18
            obj.url += (obj.url).indexOf("?") > 0 ? "&" +params : "?" + params;
        }
        
        // 2、准备/打开请求  open(请求类型GET/POST,请求的路径,是否异步true/false);
        xhr.open(obj.method,obj.url,obj.async);
        
        // 判断如果是POST请求
        if ("POST" == (obj.method).toUpperCase()) {
            // 由于Post请求的机制问题，需要模拟表单提交
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            // 3、发送请求  send(参数/null);
            xhr.send(params); // post请求如果有参数，需要将参数设置在send方法中
        } else {
            xhr.send(null); // get请求设置为null
        }        
        
        // 判断是同步请求还是异步请求
        if (obj.async)  { // 异步请求
            // 监听readystate事件 （0=尚未调用open方法；1=已调用open方法未调用send方法，2=调用send方法，未接收到响应；3=接收到部分响应；4=响应完全接收）
            xhr.onreadystatechange = function() {
                // 如果是异步请求，需要等待数据完全响应后再做处理
                if (xhr.readyState == 4) {
                    // 处理响应结果
                    callback();
                }
            }
        } else { // 同步请求
            // 处理响应结果
            callback();
        }
        
        // 处理响应结果
        function callback() {
            // 4、解析响应数据
            if (xhr.status == 200) { // 1、判断响应是否成功 status=200
                // 2、得到后台响应数据  responseText
                /* console.log(xhr.responseText);
                var user = JSON.parse(xhr.responseText);
                console.log(user); */
                obj.success(xhr.responseText);
                
            } else {
                console.log("失败状态码：" + xhr.status + "，失败原因：" + xhr.statusText);
            }
        }                
    }        
    
    // formatParam({ uname:"zhangsan", uage:18 });        
    /*将对象格式的参数转换成等号拼接的字符串*/
    function formatParam(data) {
        // 判断参数是否存在
        if (data == null) {
            return "";
        }
        // 定义数组，接收每个参数字符串
        var params = [];
        for(var key in data) {
            /* console.log(key);
            console.log(data[key]);
            console.log(key+"="+data[key]) */
            // js中通过push()方法向数组的最后追加
            params.push(key+"="+data[key]);
        }
        console.log(params.join("&"));
        var param = params.join("&");// uname=zhangsan&uage=18
            
        return param;
    }
</script>

五、ajax get/post/put/delete

GET/DELETE一样

$("#myFormSubmit").click(function () {
    var params = {};
    $.ajax({
        type:"GET",
        url:"/getTeacherList",
        async: true,
        dataType: "json",
        data: params,
        contentType: "application/json; charset=UTF-8",
        success : function (response) {
            if (response.code === 200) {
                
            }
        }
    });
}    

POST/PUT一样

$("#myFormSubmit").click(function () {
    var params = {
       "name":$("#name").val(),
        "classes":$("#classes").val(),
        "college":$("#college").val(),
        "alias":$("#alias").val(),
        "sex":$("#sex :radio").val()
    };
    
    $.ajax({
        type:"POST",
        url:"/addTeacher",
        async: true,
        dataType: "json",
        //注意：ajax提交post请求时，必须使用JSON.stringify(data) 序列化请求参数，否则报400
        data: JSON.stringify(params),
        contentType: "application/json; charset=UTF-8",
        success : function (response) {
            if (response.code === 200) {
                
            }
        }
    });
}

本人相关其他文章链接

1.JQuery选择器+DOM操作+事件+DOM与JQuery对象间的转化

2.个人练习前端技术使用Bootstrap、JQuery、thymeleaf

3.JavaScript入门及基础知识介绍

4.AJax(XHR+Get和Post+AJax的封装)

5.SpringBoot项目的html页面使用axios进行get post请求