【ajax】笔记1

一、概念

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML），最大特点，可以在网页不刷新的情况下发送http请求。ajax是一种将现有标准组合在一起使用的新方式。

XML是可标记扩展语言。XML和HTML类似，不同的是HTML中都是预定标签，而XML中没有预定标签，全都是自定义标签。

HTTP协议：超文本传输协议，规定了浏览器和万维网服务器之间互相通讯的规则。报文格式

跨域问题：浏览器之所以产生跨域问题，是因为浏览器同源策略的限制。url的协议、域名、端口均相同是称为同源，有一个不同者称为跨域。浏览器的同源策略是浏览器的一个安全策略，它限制一个源的javascript脚本与另一个源的资源进行交互。更多详细内容请点击这里

ajax优点：

• 可以在网页无刷新的情况下发送http请求。
• 允许根据用户事件来请求数据更新页面部分内容。

ajax缺点：

• 没有浏览历史，不能退回。
• 存在跨域问题。
• SEO不友好 （你在网页源文件无法搜索到请求的内容）

二、原生ajax

    function get(url) {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url);
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                console.log("状态码：", xhr.status);
                console.log("状态码字符串：", xhr.statusText);
                console.log("所有请求头：", xhr.getAllResponseHeaders());
                console.log("相应体：", xhr.response);
            }
        }
    }

    const url = 'https://autumnfish.cn/search?keywords=海阔天空';
    //当点击按钮时，发送get请求
    document.querySelector('button').addEventListener('click', function () {
        get(url);
    });

    function post(url, data) {
        const xhr = new XMLHttpRequest();
        xhr.open('POST', url);
        xhr.send(data);
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                console.log("状态码：", xhr.status);
                console.log("状态码字符串：", xhr.statusText);
                console.log("所有请求头：", xhr.getAllResponseHeaders());
                console.log("响应体", xhr.response);
            }
        }
    }
    const url = 'https://autumnfish.cn/search?keywords=海阔天空';
    document.querySelector('button').addEventListener('click', function () {
        post(url, "想要发给服务器的数据");
    });

三、axios

引入axios

<script src="https://unpkg.com/axios@1.1.2/dist/axios.min.js"></script>

或者，通过npm install axios下载

---

常见方法：

1、axios#get(url[, config])

        axios.post('http://127.0.0.1:8000/all', {
            username: 'admin',
            password: 'admin'
        }, {
            params: {
                id: 100,
                vip: 7
            }
        }).then(function (response) {
            console.log("请求成功返回的结果：", response);
        }).catch(function (error) {
            console.log("请求失败返回的结果：", error);
        })

2、axios#post(url[, data[, config]]) 

        axios.get('http://127.0.0.1:8000/axio',
            {
                params: {
                    id: 100,
                    vip: 7
                }
            }).then(function (response) {
                console.log(response);
            }).catch(function (error) {
                console.log(error);
            })
    })

 3、axios(url[, config])

method默认是get 

        axios({
            method: 'post',
            url: 'http://127.0.0.1:8000/all',
            params: {
                vip: 10,
                level: 30
            },
            headers: {
                a: 100,
                b: 200
            },
            data: {
                username: 'admin',
                password: 'admin'
            }
        })

4、axios返回的是一个Promise对象，除了使用then、catch，还可以使用async/await

async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}