前后端交互Ajax

Ajax

1 服务器的基本概念

1.1 服务器

上网过程中，负责存放和对外提供资源的电脑，叫做服务器。

上网的过程中，负责获取和消费资源的电脑，叫做客户端。

1.2 URL 地址

URL（全称是UniformResourceLocator）中文叫做统一资源定位符，用于表示互联网上每个资源的唯一存放位置。浏览器只有通过URL地址，才能正确定位资源存放位置，从而成功访问到对应的资源。

URL地址一般由三部分组成：

① 客户端与服务器之间的通信协议（http/https）

② 存有资源的服务器名称

③ 资源在服务器上具体的存放位置

1.3 资源的请求方法

客户端请求服务器时，请求的方式由很多种，最常见的两种请求方式分别为get和post请求。

• get请求通常用于获取服务器资源（向服务器要资源）
• post请求通常用于向服务器提交数据（往服务器发送资源）

2 了解Ajax

Ajax的全称是 Asynchronous JavaScript And XML (异步JavaScript和XML)

通俗的理解就是：在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式，就是Ajax

3 接口及接口文档

使用Ajax 请求数据时， 被请求的URL地址， 就叫做数据接口（简称接口）。同时，每个接口必须有请求方式。

接口文档，顾名思义就是对 接口的说明文档，它是我们调用接口的依据。接口文档包含了对接口URL，参数以及输出内容的说明，我们参照接口文档就能方便的知道接口的作用，以及接口如何进行调用。

4 XMLHttpRequest的基本使用

XMLHttpRequest（简称 xhr） 是浏览器提供的JavaScript 对象，通过它，可以请求服务器上的数据资源。

请求方法：

GET	POST	备注
GET请求偏向于查询（获取数据…）	POST请求偏向于提交数据(注册，修改，删除…)	从语义去区分GET和POST
GET显示的携带参数,参数是直接拼接在请求地址之后，安全性较差，隐私性差	POST隐式的携带参数，不会在请求地址上进行显示，安全性好。	POST请求都是以JSON格式进行传参
GET 的请求数据长度有大小限制，根据浏览器的不同，限制在2k~8K	POST请求没有限制
GET请求可以被缓存	POST请求不会被缓存

xhr 对象的readyState 属性：

0	请求未初始化
1	服务器连接已建立
2	请求已接收
3	请求处理中
4	请求已完成，且响应已就绪

4.1 使用xhr发起get请求

步骤：

• 创建 xhr 对象
• 调用 xhr.open() 函数
• 调用 xhr.send() 函数
• 监听 xhr.onreadystatechange 事件

// 不带参数的GET请求
        // 1. 创建一个XMLHttpRequest对象
        var xhr = new XMLHttpRequest();
        // 2. 调用open函数
        // 不带参数的GET请求
        // xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks");
        // 带参数的GET请求
        xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks?id=1");
        // 3. 调用send函数
        xhr.send();
        // 4. 监听onreadystatechange 事件
        xhr.onreadystatechange = function() {
            // readyState 表示当前ajax请求所处的状态
            if (xhr.readyState === 4 && xhr.status === 200) {
                console.log(xhr.responseText);
            }
        }

4.2 使用 xhr 发起 POST请求

步骤：

• 创建 xhr 对象
• 调用 xhr.open() 函数
• 设置 Content-Type 属性（固定写法）
• 调用 xhr.send() 函数，同时指定要发送的数据
• 监听 xhr.onreadystateChange 事件

		// 1. 创建 xhr 对象
        var xhr = new XMLHttpRequest();
        // 2. 调用 open 函数
        xhr.open("POST", "http://www.liulongbin.top:3006/api/addbook");
        // 3. 设置 Content-Type 属性
        xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
        // 4. 调用 send 函数
        xhr.send("bookname=水浒传转&author=施耐庵呀&publisher=上海图书出版社么");
        // 5. 监听事件
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                console.log(xhr.responseText);
            }
        }

4.3 查询字符串

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

格式：将英文的 ? 放在URL的末尾，在加上参数 = 值，多个参数的话，使用 & 符号进行分割

5 使用 Axios 发起请求

Axios 是专注于网络数据请求的库。

引入：

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

5.1 使用Axios发起GET请求

axios 发起 get 请求的语法：

axios.get("url", {params: { /* 参数 */ }}.then(callback))

注意： Axios会返回promise对象 ，因此需要then来处理

axios.get('http://81.70.153.180:8081/api/getStudentList', {params:{sid:'s0001',sname:'王'}}).then(res => {
    console.log('res',res);
});

axios.get('http://81.70.153.180:8081/api/getStudentList?sid=s0001&sname=王').then(res => {
	console.log('res',res);
});

axios({
    url: 'http://81.70.153.180:8081/api/getStudentList',
    method: 'GET',
    params: { // GET方式，传递参数使用params
        sid: 's0001',
        sname: '王',
    }
}).then(res => {
    console.log('res', res); // res.data
});

5.2 使用Axios发起POST请求

axios 发起 POST 请求的语法：

axios.post("url", { /* 参数 */ }.then(callback))

axios.post('http://81.70.153.180:8081/api/login', {
                sid: 's0001',
                password: "123456"
             }).then(res => {
             console.log(res);
         });

axios({
	url: 'http://81.70.153.180:8081/api/login', // 请求的地址
    method: 'POST',
    headers: { 'Content-Type': 'application/json;charset=utf-8' }, // 设置请求头
    data: {  
    	sid: 's0001',
		password: "123456"
    }
}).then(res => {
    console.log(res); // res.data
});

6 使用fetch发起请求

fetch也是前端用于发起网络请求的比较好的主流方式，ajax请求主要包括两种XML和fetch，XML可能接触的比较多。但是fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。

6.1 使用 fetch 发起get请求

fetch('http://81.70.153.180:8081/api/getStudentList?sid=s0001&sname=王').then(res => {
 	if (res.ok) {
		return res.json();
    }
}).then(data => {
	console.log(data);
});

备注：get请求使用rest方式传参， 参数做为地址栏中的一部分

6.2 使用 fetch 发起post请求

fetch('http://81.70.153.180:8081/api/login', {
	method: 'post',
    body: JSON.stringify({  // 进行传参,需要转换为json字符串
		sid: 's0001',
		password: "123456"
	}),
	headers: {
		'Content-Type': 'application/json'
    }
}).then(res => {
	if (res.ok) {
		return res.json();
	}
}).then(data => {
		console.log(data);
	});