AJAX学习日记——Day 1

一、AJAX的定义

1、就是使用XMLHttpRequest对象和服务器通信，可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面

2、如何使用AJAX

2.1、使用axios库，与服务器进行动态数据交互

2.2、再学习XMLHttpRequest的使用

二、axios使用

1、引入axios.js：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js

2、使用axios函数：

axios({ url:'目标资源地址' }).then((result)=>{ //对服务器返回的数据做后续处理 })

3、示例：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
//引入axios库

<script>
axios({
    url:"http://hmajax.itheima.net/api/province"
    //这个资源地址中包含全国的所有省份
    
}).then(result =>{
    console.log(result.data.list);
    console.log(result.data.list.join('<br>'));
    //join：以特定分隔符将数组转换成字符串
    document.querySelector('.my_p').innerHTML = result.data.list.join('<br>')
    //将字符串插入到网页中
})
</script>

三、URL参数

1、查询参数

1.1、使用

http://xxx.com/xxx/xxx?参数名1=值1&参数名2=值2

1.2、作用：通过提供一些额外信息，来获取对应数据

2、axios使用

axios({
    url:,
    params:{
        //这里面写的就是查询参数，axios运行时会把参数名和值拼接到 url?参数名=值
        参数名:值;    
    }
})

//示例
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<script>
axios({
    url:"http://hmajax.itheima.net/api/city",
    //这个url是查询城市
    params:{
        pname: '河北省'
    }
}).then(result =>{
    console.log(result.data);
    console.log(result.data.list.join('<br>'));

    document.querySelector('.my_p').innerHTML = result.data.list.join('<br>')
})
</script>

四、综合案例一：根据输入的省份和城市，查看地区

document.querySelector('button').addEventListener('click',() => {
    let pname = document.querySelector('.shengfen').value;
    let cname = document.querySelector('.chengshi').value;
    //首先，获取
    axios({
        url:"http://hmajax.itheima.net/api/area",
        //地区的url
        params:{
            pname,
            //省份名字
            cname,
            //城市名字
        }
    }).then(result => {
        console.log(result.data.list);
        let list = result.data.list;
        let Li = list.map(areaName => `<li>${areaName}</li>`).join('');
        //map：对数组进行映射
        console.log(Li);
        document.querySelector('ul').innerHTML = Li;
    })
})

五、常见请求方法

1、axios请求配置

axios({
    url:"目标资源地址",
    method:"请求方法(默认是get)",
    data:{
        参数名:值    
    }
}).then({
    
})

//示例：
axios({
    url:"http://hmajax.itheima.net/api/register",
    //这是一个注册账号的网站
    method:"post",
    //指定请求方法是提交数据
    data:{
        username:'itheima987',
        password:'7654321'
    }
}).then(result =>{
    console.log(result);
})

六、错误处理

1、作用：用更直观的方式，为用户展示错误信息

axios({
    //请求选项
}).then(result=>{
    //处理数据
}).catch(error=>{
    //处理错误
})

//示例：
axios({
    url:"http://hmajax.itheima.net/api/register",
    //这是一个注册账号的网站
    method:"post",
    //指定请求方法是提交数据
    data:{
        username:'itheima987',
        password:'7654321'
    }
}).then(result =>{
    console.log(result);
}).catch(error =>{
    console.log(error.response.data.message);
    alert(error.response.data.message);
    //以弹窗形式输出错误信息
})

七、HTTP请求报文

1、定义：浏览器按照HTTP协议要求的格式，发给服务器的内容

2、组成部分：

2.1、请求行：请求方法，URL，协议

2.2、请求头：以键值对的格式携带的附加信息，比如：Content-Type

2.3、空行：分隔请求头，空行之后就是发送给服务器的资源

2.4、请求体：发送的资源

3、查看：

3.1、进入开发者模式

3.2、打开网络

3.3、选择Fetch/XHR筛选

3.4、点击报文

3.5、选择Headers/标头，查看请求标头

八、HTTP响应报文

1、定义：服务器按照HTTP服务器要求的格式，返回浏览器的内容

2、组成部分：

2.1、响应行：协议、HTTP响应状态码、状态信息

2.2、相应头：以键值对的格式携带的附加信息，如：Content-Type

2.3、空行：分隔响应头，空行之后就是返回给浏览器的资源

2.4、响应体：返回的资源

3、状态码：

4、查看：

4.1、进入开发者模式

4.2、打开网络

4.3、选择Fetch/XHR筛选

4.4、点击报文

4.5、选择Headers/标头，查看响应标头

九、接口文档

1、定义：描述接口的文档，包含了使用AJAX和服务器通讯时，使用的URL、请求方法，以及参数，是由后端提供的描述接口的文章

十、form-serialize插件

1、可以用来快速获取表单的值

serialize(form, {hash: true,empty: true})
//以键值对的方式返回表单元素，key是表单元素的name属性
//hash：设置如何获取数据结构
        true：JS对象
        false：查询字符串
//empty：是否获取空值