Ajax学习分享

Ajax学习笔记

依旧是广泛的学习和记录。继上一个文章webpack学习笔记后继续巩固自己学到的知识，并希望在未来能够回首再让这篇粗略的文章更有深度。

Ajax简介

Ajax全称是Asynchronous Javascript And XML（异步Javascript和XML），Ajax能更好的实现网页和服务器之间的数据交互。

通俗理解：若在网络上用到了XMLHttpRequest对象和服务器进行数据交互，就是Ajax。

应用场景：

• 用户名检测：注册用户时，通过Ajax的形式，动态检测用户名是否被占用。
• 搜索提示：输入搜索关键字时，通过Ajax的形式，动态加载搜索提示列表。
• 数据分页显示：点击页码值的时候，通过Ajax的形式，根据页码值动态刷新表格数据。
• 数据的增删改查：数据的添加、删除、修改、查询操作，都需要通过Ajax的形式，来实现数据的交互。

jQuery&Ajax

浏览器中提供的XMLHttpRequest用法比较复杂，jQuery对XMLHttpRequest进行了封装并提供了一些列Ajax的相关函数，极大的降低了Ajax的使用难度。

jQuery发起Ajax请求常用方法：

• $.get() 进行拿数据。
  get请求将服务器上的资源请求到客户端进行使用。

$.get(url, [data], [callback])

参数名	类型	说明
url	string	请求的资源地址
data	object	请求时带的参数
callback	function	成功的回调函数

• $.post() 进行发数据。

post请求一般用来向服务器提交数据。

$.post(url, [data], [callback])

参数名	类型	说明
url	string	提交数据的地址
data	object	提交的数据
callback	function	提交成功后的回调函数

• $.ajax() 功能综合。

$.ajax({
    type: '', //请求方式 GET 或者 POST
    url: '', //请求URL地址
    data: '', //请求携带的数据
    success: function (res) {} //成功之后的回调函数
});

接口

​ 在使用Ajax请求数据时，被请求的url地址就叫做数据接口（简称接口），每一个接口都必须有请求方式（GET or POST）。

接口请求过程：

​ GET方式：

​ POST方式：

接口测试工具：

​ 好处：让我们在不写任何代码的情况下，对接口进行调用和测试。

​ 常用工具：PostMan

接口文档：

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

​ 接口文档的组成部分：

​ 合格的接口应该包含以下六项内容，为借口调用提供依据：

1. 接口名称：用来表示各个接口，并带有说明。
2. 接口URL：调用地址。
3. 方式：如GET或POST。
4. 参数格式：传递的参数需要由参数的名称、类型，是否必选以及参数说明。
5. 响应格式：要有返回值的详细说明描述，一般有数据名称、数据类型、说明。
6. 示例：通过对象方式举例方便理解。

xhr(XMLHttpRequest)基本使用

使用xhr发起GET请求步骤：

1. 创建xhr对象。
2. 调用xhr.open()函数。
3. 调用xhr.send ()函数。
4. 调用xhr.onreadystatechange事件。

//1.create XHR object
let xhr = new XMLHttpRequest();
//2.invoking open function
xhr.open('GET','url') //appoint method and url
//if your request contain a parameter you can use like "?k-v" to achieve like this 'xhr.open('GET', 'url?name="zs")'
//3.invoking send function
xhr.send() //initiate Ajax request
//4.listen onreadystatechange event
xhr.onreadystatechange = function () {
    //4.1 listen xhr object's readystate and server's status
    if (xhr.readyState === 4 && xhr.status === 200) {
        //print server's response data
        console.log(xhr.responseText);
    }
}

XMLHttpRequest对象的 readyState属性

readyState属性表示当前Ajax请求所处的状态，共五个值

值	状态	表示含义
0	UNSENT	XMLHttpReuest对象已创建，还未调用open()。
1	OPENED	open()已被调用。
2	HEADERS_RECEIVED	send()已被调用，响应头被接收。
3	LOADING	数据正在接收，response属性中已有部分数据。
4	DONE	Ajax请求完成，代表结束的一个标志，有成功和失败两个结果。

查询字符串（作为对上文备注的补充）：

$.get('url', {name: 'zs', age: 18}, function () {})

​ 等价于

$.get('url?name=zs&age=18',function () {})

URL编码与解码

在URL地址中只允许出现英文相关的字母，标点符号以及数字

$.get('url?name=zs&age=18',function () {})

​ 例如上文请求末尾传参时，如果参数含有非英文的字符，便需要进行URL编码把非英文字符用英文表示。

​ 浏览器提供的URL编码和解码的API是

• encodeURL() 编码函数
• decodeURL() 解码函数

使用xhr发起POST请求

1. 创建xhr对象。
2. 调用xhr.open()函数。
3. 设置Content-Type属性。
4. 调用xhr.send()函数，同时指定发送数据。
5. 监听xhr.onreadystatechange事件。

//1.create xhr object
let xhr = new XMLHttpRequest();
//2.invoking open function
xhr.open('POST', 'url');
//3.set Content-Type property (it's fixed format)
xhr.setRequestHeader('Content-Type', 'application-x-www-form-urlencoded');
//4.invoking send function
xhr.send('parameters');
//5.listen event
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
}

xhr设置请求时限

let xhr = new XMLHttpRequest();
//set timeout
xhr.timeout = 1000;//1000ms
//set timeout function
xhr.ontimeout = function () {}

xhr与FormData

利用FormData来对表单进行管理

//1.create FormData object
let fd = new FormData();
//2.append item to FormData
fd.append('k', 'v');//key&value
//3.create XHR object
let xhr = new XMLHttpRequest();
//4.appoint request type and URL
xhr.open('POST', 'url');
//5.commit FormData object
xhr.send(fd);

总结

我认为Ajax总的来说是一种数据交互的工具，同时对于web应用来说也是一个很好的辅助并能提高效率，其基础就是对于XMLHttpRequest对象的运用。jQuery则是为了更加的方便人们使用而出现的，都是在从各个方面提高效率。