Web前端Javascript笔记（8）Ajax前后端交互

认识Ajax

    全名Asynchronous Javascript and XML（异步JavaScript和XML），节省用户操作时间，提高用户体验，减少数据请求，传输获取数据。Ajax相当于前后台数据交互的搬运工

xml数据传输格式：

优点:

1. 种类丰富

2. 传输量大

缺点：

1. 解析麻烦

2. 不太适合轻量级数据

json数据传输格式：（移动端）

优点：
1. 轻量级数据

2. 解析比较轻松

缺点：

1. 数据种类少

2. 传输数据量少

同步：阻塞，当前程序的运行，必须等前一个程序运行完以后，才能运行。

异步：当前程序的运行不用等待前一个程序

<script>
        window.onload = function () {
            let tag_btn = document.getElementById("btn1");
            tag_btn.onclick = function () {
                let ajax = null;
                if(window.XMLHttpRequest)   // 做浏览器兼容 IE8以下不兼容
                {
                    ajax = new XMLHttpRequest();  // 创建一个Ajax对象
                }
                else
                {
                    ajax = new ActiveXObject("Microsoft.XMLHTTP");
                }
                // 调用open(method, url, bool)方法
                // 参数： method: 请求方式  post, get
                // 参数： url: 请求的文件地址
                // 参数： bool: true 异步  false: 同步
                ajax.open("get", "../data/test.txt", true);
                // 调用send()方法，发送请求
                ajax.send();
                // 等待数据响应
                ajax.onreadystatechange = function () {
                    if (ajax.readyState === 4)
                    {
                        alert(ajax.responseText);
                    }
                }
            }
        }
</script>

新的ajax兼容方法：

try...catch{}

<script>
        window.onload = function () {
            let tag_btn = document.getElementById("btn1");
            tag_btn.onclick = function () {
                let ajax = null;
                try   // 做浏览器兼容 IE8以下不兼容
                {
                    ajax = new XMLHttpRequest();  // 创建一个Ajax对象
                    // throw new Error("异常信息");  // 同时可以抛出异常
                }
                catch (e) {
                    ajax = new ActiveXObject("Microsoft.XMLHTTP");
                }
                // 调用open(method, url, bool)方法
                // 参数： method: 请求方式  post, get
                // 参数： url: 请求的文件地址
                // 参数： bool: true 异步  false: 同步
                ajax.open("get", "../data/test.txt", true);
                // 调用send()方法，发送请求
                ajax.send();
                // 等待数据响应
                ajax.onreadystatechange = function () {
                    if (ajax.readyState === 4)
                    {
                        alert(ajax.responseText);
                    }
                }
            }
        }
</script>

Ajax的onreadyStateExchange

在ajax中，onreadyStateExchange是一个事件，当readyState发生变化的时候，会触发这一事件，readyState一共有5个值，0~4

0：(初始化)还没有调用open()方法 

1：（载入）已调用send()方法，正在发送请求

2： (载入完成)send()方法完成，已收全部响应内容

3：（解析）正在解析响应内容

4： （完成）响应内容解析完成，可以在客户端调用了

responseText: 以文本的格式返回数据

responseXML：以XML数据格式返回数据

status状态码：

200：下载成功

404：不存在

ajax中get与post请求：

get请求： 将数据拼接到url后面进行提交，参数通过查询字符串的方式传递，这样不安全，且地址栏的数据大小是有限的(最大2k),所以无法完成上传资源。

post请求：不把数据拼接到url后面，通过浏览器内进行提交，更加安全。理论上没有大小限制，适合完成上传任务。

ajax函数的封装

为了使得ajax能够适应各种请求，所以对ajax进行封装

// ajax请求进行封装
function $ajax({method, url, data}) {
    let ajax = null;
    try   // 做浏览器兼容 IE8以下不兼容
    {
        ajax = new XMLHttpRequest();  // 创建一个Ajax对象
    }
    catch (e) {
        ajax = new ActiveXObject("Microsoft.XMLHTTP");
    }
    if (method === "get" && data)
    {
        url += "?" + data;   // get方法需要将请求参数拼接到url上面
    }
    ajax.open(method, url, true);
 
    if (method === "get")
    {
        ajax.send();
    }
    else
    {
        // post方法的话需要设置请求头
        ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded");
        ajax.send(data);
    }
    ajax.onreadystatechange = function () {
        if (ajax.readyState === 4)
        {
            if (ajax.status === 200)
            {
                alert(ajax.responseText);
            }
            else
            {
                alert("Error: " + ajax.status);
            }
        }
    };
}

回调函数：

不同的下载需求，对于数据的处理是不同的，所以需要写一段专门处理数据的代码，这段代码可以称为回调函数，回调函数的作用就是将一段代码作为参数，传递到函数里面，在合适的地方进行调用。

// ajax请求进行封装
function $ajax({method, url, data, success, error}) {
    let ajax = null;
    try   // 做浏览器兼容 IE8以下不兼容
    {
        ajax = new XMLHttpRequest();  // 创建一个Ajax对象
    }
    catch (e) {
        ajax = new ActiveXObject("Microsoft.XMLHTTP");
    }
    if (method === "get" && data)
    {
        url += "?" + data;   // get方法需要将请求参数拼接到url上面
    }
    ajax.open(method, url, true);
 
    if (method === "get")
    {
        ajax.send();
    }
    else
    {
        // post方法的话需要设置请求头
        ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded");
        ajax.send(data);
    }
    ajax.onreadystatechange = function () {
        if (ajax.readyState === 4)
        {
            if (ajax.status === 200)
            {
                if (success)    // 判断如果传入了回调函数，则调用回调函数
                {
                    success(ajax.responseText);    // 执行下载成功的回调函数
                }
            }
            else
            {
                if (error)   // 判断是否传入了下载失败的回调函数
                {
                    error(ajax.status);    // 调用回调函数
                }
            }
        }
    };
}

JSON对象

数据在前端后端之间进行传输，需要将前端，后端中的数据结构，打包成一种传输效率更高的形式，即字符串。

系统提供了JSON对象，用于抓换JSON格式的数据

1. stringify()：用于将JSON格式的数据转化为JSON格式的字符串

2. parse()：用于将JSON格式的字符串转化为对应的格式

<script>
        let arr = [1,2,3,"hello"];
        let new_data = JSON.stringify(arr);
        alert(typeof new_data);
 
        let str = '[1,2,3,"hhh"]';
        let new_arr = JSON.parse(str);
        alert(new_arr);
 
        let obj = {
            name: "li",
            age: 22,
            sex: "female"
        };
        let new_arr1 = JSON.stringify(obj);
        alert(new_arr1);
</script>