原生异步请求方法ajax（如何采用ES6封装ajax）

玩腻顽劣 • 2022-06-08 17:54:27 • 软件

知识已经过时了，可以直接跳到文章末尾看ES6封装ajax。

怀念曾经的jQuery

一. ajax方法

jQuery：JavaScript代码包装成拿过来就能实现特定功能的代码库，基本淘汰了；

json：简单说就是javascript中的对象和数组；

Ajax：异步的JavaScript和XML，在不重载整个网页的情况下，ajax 通过后台加载数据，并在网页上进行显示；

1. $(selector). load(url,[data],[callback]) 获取网页

url：服务器的地址；

data：参数为请求时发送的数据；

callback：参数为数据请求成功后，执行的回调函数；

2. jQuery.getJSON(url,[data],[callback]) 或者 $.getJSON(url,[data],[callback]) 获取数据

使用getJSON()方法可以通过Ajax异步请求的方式，获取服务器中的数据，并对获取的数据进行解析；

3. jQuery.getScript(url,[callback]) 或 $.getScript(url,[callback]) 异步加载并执行js文件，获取JS文件内容；

4. $.get(url,[callback]) 向服务器请求数据

采用GET方式向服务器请求数据，并通过方法中回调函数的参数返回请求的数据；

5. $.post(url,[data],[callback]) 向服务器发送数据

用于以POST方式向服务器发送数据，服务器接收到数据之后，进行处理，并将处理结果返回页面；

6. $(selector).serialize() 将元素进行序列化

将表单中有name属性的元素值进行序列化，生成标准URL编码文本字符串，直接可用于ajax请求；

7. jQuery.ajax([settings]) 或$.ajax([settings]) 获取服务器数据，同时向服务器发送请求

使用$.ajax()方法是最底层、功能最强大的请求服务器数据的方法，它不仅可以获取服务器返回的数据，还能向服务器发送请求并传递数值

settings为一个对象：该对象包括：

url 表示服务器请求的路径，

data为请求时传递的数据，

dataType为服务器返回的数据类型，

success为请求成功的执行的回调函数，

type为发送数据请求的方式，默认为get，

8. jQuery.ajaxSetup([options]) 或$.ajaxSetup([options])

设置Ajax的全局性选项值

设置Ajax请求的一些全局性选项值，设置完成后，后面的Ajax请求将不需要再添加这些选项值，options为一个对象

9. $(selector).ajaxStart(function()) ajax请求执行前执行

$(selector).ajaxStop(function()) ajax请求执行后执行

当发送Ajax请求前，执行ajaxStart()方法绑定的函数；请求成功后，执行ajaxStop ()方法绑定的函数

采用ES6封装ajax：

原生异步请求方法ajax（如何采用ES6封装ajax）