淘先锋技术网

首页 1 2 3 4 5 6 7

Ajax

1 服务器的基本概念

1.1 服务器

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

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

1.2 URL 地址

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

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

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

② 存有资源的服务器名称

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

1.3 资源的请求方法

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

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

2 了解Ajax

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

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

3 接口及接口文档

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

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

4 XMLHttpRequest的基本使用

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

请求方法:

GETPOST备注
GET请求偏向于查询(获取数据…)POST请求偏向于提交数据(注册,修改,删除…)从语义去区分GET和POST
GET显示的携带参数,参数是直接拼接在请求地址之后,安全性较差,隐私性差POST隐式的携带参数,不会在请求地址上进行显示,安全性好。POST请求都是以JSON格式进行传参
GET 的请求数据长度有大小限制,根据浏览器的不同,限制在2k~8KPOST请求没有限制
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 是专注于网络数据请求的库。

引入:

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);
	});