Ajax01

---

小概

本章开始ajax的学习，今日份学习内容：jQ中ajax的两种请求方式（get，post），带参数请求，json数据格式了解，xml格式了解（已弃用）。

---

1.利用jQ发起get请求

1.1 无参请求

语法：
$.get({

url:’ 请求接口地址’,
success:function(res/backData){
//当请求成功之后，会执行的回调函数，`回调函数的形参：是后台返回的 数据，一般永res或backData表示 （result结果，backData返回数据）
}
})

//你会得到一个笑话
            $.get(
                {
                    url:'https://autumnfish.cn/api/joke',
                    success: function(backData) {
                        console.log(backData);
                    }
                }
            )

请求带不带参数，取决于后台的接口文档

1.2 带参数请求

      $.get(
            {
                url:'https://autumnfish.cn/api/joke/list',
                data: {
                    num: 10
                },
                success: function (backData) {
                    console.log(backData);
                }
            }
        )

data参数出了可以用对象键值对的方法，还可以是字符串的形式，data：‘key=value’ 多个参数：data：‘key1=value1&key2=value2&…’ 。

2. 利用jQ发起post请求

是发去get请求还是post请求，带不带参数，都是后台接口文档决定的。
简单的post请求写法和get格式差不多，但是两者是存在区别的，get安全性比post差，get传参大小没有post大 等等一系列差别，后面我会具体归纳比较一下

这是一个简单的post请求案例

    $(function(){
        // 发起post请求,添加图书信息
        $.post(
            {
                url:'http://www.liulongbin.top:3006/api/addbook',
                data: {
                    bookname:'间客',
                    author:'猫腻',
                    publisher:'起点中文网'
                },
                success: function (backData) {
                    console.log(backData);
                }
            }
        )
     })

3. json数据格式

json: 是一种数据格式,后台能够理解的一种数据格式
json的数据格式与传统的js对象格式非常像,左侧的key添加上引号

• js对象转换json对象（JSON.stringify(obj)方法）

    1. 声明一个js对象
    let obj = {
        name:'笨笨',
        age: 38,
        gender:'可爱的男孩子'
    }

    // 2. 将js对象转换json对象
    let jsonObj = JSON.stringify(obj);

    console.log(obj);
    console.log(jsonObj); 

我们向后台请求数据,请问后台返回的数据是什么类型???
：请求回来的原始数据其实也是json格式的，只不过jQ内部封装的时候将json对象转成js对象（JSON.parse(json数据)）

• 原生jsget请求

    // 拓展: 原生的get请求,先了解,后面再详细解析
    let xhr = new XMLHttpRequest();
    xhr.open('get','http://www.liulongbin.top:3006/api/getbooks');
    xhr.onload = function () {
        // 打印后台返回的数据(原生请求返回的数据)
        console.log(xhr.response);
        // 服务器返回的数据,最原始的格式就是json
        // 将json对象转成js对象
        console.log(JSON.parse(xhr.response));
    }
    xhr.send();

注意：json.stringify() 和json.parse()可以用来做深拷贝，let newobj = JSON.stringify(oldobj),let newobj = JSON.parse(newobj)。先js对象转json对象，在用parse方法转成js对象，一来一去就可以实现深拷贝。

4.xml格式处理

xml数据格式,在json还没有普及之前最常用的数据格式
体积太大,包含的数据有些时候比格式还要少
类似html标签

    // 发起ajax请求获得xml数据
    $.get(
        {
            url:'https://autumnfish.cn/api/food.xml',
            success: function (xmlData) {
                // 此时返回的是xml格式数据
                console.log(xmlData);

                // 返回的数据并不是对象格式,所以无法直接使用点语法
                // 获得第一道菜的信息
                console.log(xmlData.getElementsByTagName('food'));
                console.log(xmlData.getElementsByTagName('food')[0]);
                
                // 获得第一道菜的名字
                console.log(xmlData.getElementsByTagName('food')[0].getElementsByTagName('name')[0]);
                console.log(xmlData.getElementsByTagName('food')[0].getElementsByTagName('name')[0].innerHTML);
            }
        }
    )

• 了解即可

总结

ajax还是非常重要的一个知识点，前端而言，大部分时间都在拿数据 处理数据 渲染数据，vue的axios其实原来也类似ajax，还是得吃透的。
还有就是get请求和post请求区别和应用场景。