Ajax强化

一、目标

• 能够知道如何使用XMLHttpRequest发起Ajax请求
• 能够知道如何封装自己的Ajax函数
• 能够使用XMLhttpRequest Level2中提供的新属性
• 能够知道Jquery中如何实现文件上传与loading效果
• 能够知道如何使用axios发起Ajax请求

二、目录

1. XMLHttpRequest的基本使用
2. 数据交换格式
3. 封装自己的Ajax函数
4. XMLHttpRequest Level2的新特性
5. jQuery高级用法
6. axios

 1.XMLHttpRequest的基本使用

1.1什么XMLHttpRequest

XMLHttpRequest(简称xhr)是浏览器提供的javascript对象，通过它，可以请求服务器上的数据资源。之前所学的jquery中的Ajax函数，就是基于xhr对象封装起来的。

  

 1.2使用xhr发起GET请求

步骤：

①创建xhr对象

②调用xhr.open()函数

③调用xhr.send()函数

④监听xhr.onreadystatechange事件

    <script>
        //1.创建一个XHR对象
        var xhr = new XMLHttpRequest()
            //2.调用open函数
        xhr.open('GET', 'http//www.liulongbin.top:3006/api/getbooks')
            //3.调用send函数
        xhr.send()
            //4.监听onreadystatechange事件
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) { //200并不是返回数据中的status中的200
                //获取服务器响应的数据
                console.log(xhr.responseText)
            }
        }
    </script>

1.3了解xhr对象的readyState属性

XMLHttpRequest对象的readyState属性，用来表示当前Ajax请求所处的状态。每个Ajax请求必然会处于以下状态中的一个：

值	状态	描述
0	UNSENT	XMLHttpRequese对象已被创建，但尚未调用open()方法
1	OPENED	open（）方法已经被调用
2	HEADERS_RECEIVED	send()方法已经被调用，响应头也已经被接收
3	LOADING	数据接受中，此时request属性中已经包含部分数据
4	DONE	Ajax请求完成，这意味着数据传输已经彻底完成或失败

1.4使用xhr发起带参数的GET请求

使用xhr对象发起带参数的GET请求时，只需在调用xhr.open期间，为URL地址指定参数即可:

 这种在URL地址后面拼接的参数，叫做查询字符串。

  <script>
        var xhr = new XMLHttpRequest()
        xhr.open("GET", 'http//www.liulongbin.top:3006/api/getbooks?id=1')
        xhr.send()
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                console.log(xhr.responseText)
            }
        }
    </script>

1.5字符串查询

1.什么是查询字符串

定义：查询字符串（URL参数）是指在URL的末尾加上用于向服务器发送信息的字符串（变量）

格式：将英文的？放在URL的末尾，然后再加上参数=值，想加上多个参数的话，使用&符号进行分割。以这个形式可以将想要发送给服务器的数据添加到URL中。

2.GET请求携带参数的本质

无论使用$.ajax(),还是使用$.get()，又或者直接使用xhr对象发起GET请求，当需要携带参数的时候，本质上，都是直接将参数以查询字符串的形式，追加到URL地址的后面，发送到服务器的。

1.6URL编码与解码

1.什么是url编码

URL地址中，只允许出现英文相关的字母、标点符号、数字，因此，在URL地址中不允许出现中文字符。

如果URL中需要包含中文这样的字符，则必须对中文字符进行编码（转义） 

URL编码的原则：使用安全的字符（没有特殊用途或者特殊意义的可打印字符）去表示那些不安全的字符。

URL编码原则的通俗理解：使用英文字符去表示非英文字符。

2.如何对URL进行编码与解码

浏览器提供了URL编码与解码的API，分别是：

• encodeURI（） 编码的函数
• decodeURI（）编码的函数

 <script>
        var str = '我是帅哥'
        var str2 = encodeURI(str)
        console.log(str2)
        var str3 = decodeURI(str2)
        console.log(str3)
    </script>

3.URL编码的注意事项

由于浏览器会自动对URL地址进行编码操作，因此，大多数情况下，程序员不需要关心URL地址的编码与解码操作。

1.7使用xhr发起POST请求

步骤：

①创建xhr对象

②调用xhr.open（）函数

③设置Content-Type属性（固定写法）

④调用xhr.send（）函数，同时指定要发送的数据

⑤监听xhr.onreadystatechange事件

    <script>
        //1.创建xhr对象
        var str = new XMLHttpRequest()
            //2.调用open函数
        xhr.open('POST', '请求地址')
            //3.设置Content-Type属性
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
            //4.调用shend函数
        xhr.send('bookname=水浒传&author=施耐庵&publisher=上海图书出版社')
            //5.监听事件
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                console.log(xhr.responseText)
            }
        }
    </script>