ajax技术

ajax

第一天

服务器

\1. 服务器的本质就是一台电脑。

\2. 服务器的作用就是提供文字，图片，音频，视频等服务。

\3. 获取服务器的方式包括：购买和租赁。

l服务器上的网页(html文件)、图片、音乐、视频、字体文件、CSS文件、JS文件等等都称之为资源。所以资源代指服务器上存储的内容。

数据 l数据也是资源。而且是一个网站的灵魂。服务器多数情况都使用数据表的方式来存储数据
lHTML是骨架lCSS是颜值lJS是行为l数据是灵魂
客户端，客户上网使用的设备，如自己的电脑、手机
l客户端是相对服务器而言的。
- 提供服务的电脑叫服务器，
- 消费资源的电脑被称为客户端。
浏览器和服务器交互
- 1.浏览器输入一个网址，按下回车。
  
  2.向服务器发送请求，请求该网址对应的资源。
  
  3.服务器处理这次请求。
  
  4.服务器做出响应（返回资源）。
  
  5.浏览器接收结果，并显示到页面中。

Ajax是一种技术，通过浏览器内置对象和服务器进行数据交互的技术。
AJAX是异步的JavaScript和XML（Asynchronous JavaScript And XML）。简单点说，就是使用浏览器内置对象 XMLHttpRequest 与服务器通信。
它可以使用JSON，XML，HTML和text文本等格式发送和接收数据。
AJAX最吸引人的就是它的“异步”特性，也就是说它可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。
你可以使用AJAX最主要的两个特性做下列事：

在不重新加载页面的情况下发送请求给服务器。
接受并使用从服务器发来的数据。

Ajax的应用场景

搜索建议提示（比如百度、京东、淘宝等等）
地图（百度地图）
验证用户名是否存在
网页聊天室
无刷新的分页
.....
总之，在不刷新页面的情况下，还要完成页面和服务器的数据交互，都可以使用Ajax
☞ 也许你会想到，使用浏览器输入网址，回车，已经可以请求到页面了，为什么还需要Ajax呢？
- 当在浏览器中输入网址，回车，确实是向服务器发送了请求，这是浏览器自主发送的请求。
- ☞ 无论是浏览器自主发起的请求，还是Ajax请求，都分为各种请求方式。
- 如果希望页面中局部的数据，比如某个列表中，某个表格中的数据更新，那就用到了Ajax了，

GET和POST请求方式

当使用浏览器和服务器进行数据交互时，多数都是由浏览器端发起请求，然后才能获取响应结果。

浏览器能够发起的请求，又分为多种请求方式，但常用的请求方式只有下面两种：

GET ，获取；如果向服务器发送请求，获取服务器的资源，使用GET方式
- 比如获取页面中需要的数据
- 比如获取一个用户的信息（用户名、昵称、头像等）
POST，邮寄（提交）。如果提交数据给服务器，那么使用POST方式。
- 比如，登录、注册（提交账号和密码给服务器）
- 比如，添加评论，发布评论（贴吧中有）

jQuery中封装的Ajax方法

// 专门用于发送GET方式请求
$.get(url, [data], [callback], [dataType])

// 专门用于发送POST请求
$.post(url, [data], [callback], [dataType]);
// 一个综合的发送Ajax请求的方法，使用频率最高
$.ajax({
    // 这里填ajax选项
    url: Ajax请求的url地址, // 必填
    type: 'GET', // 默认GET，可选POST
    data: {}, // 请求参数，可选
    success: function (res) {} // ajax请求成功时的回调，可选
    ....其他选项
});

获取服务器上的数据资源

语法

因为是获取服务器上的数据资源，所以要发送GET方式的请求，支持的方法有 $.get()和$.ajax()。

（服务器是前端老师租赁的，我们直接使用即可，通过向下面的url地址发送请求可以获取到服务器上的书籍数据）

var url = 'http://www.liulongbin.top:3006/api/getbooks';

/******************* $.get() ******************/

// 仅仅发送一个GET方式的请求
$.get(url);

// 发送GET请求，并使用回调函数接收服务器响应的结果
$.get(url, function (res) {
    console.log(res); // res表示服务器响应的结果
});

// 发送GET请求，并传递一个请求参数（这里传递了id，表示只获取id为1的数据）
$.get(url, {id: 1}, function (res) {
    console.log(res)
});

/******************* $.ajax() ******************/
$.ajax({
    url: url, //这项必填
    type: 'GET', // 这里可以省略该项，因为type默认的值就是GET
    data: {id: 1}, // 传递id为1的参数表示只获取id为1的数据，可选
    success: function (res) { // success表示ajax请求成功后的回调
        console.log(res); // res表示服务器返回的结果
    }
});

接口及接口文档

概念及说明

前面我们使用的 url，叫做数据接口，或者简称为接口。

接口是服务器提供的一个url地址，通过这个url地址，我们可以操作服务器上的资源。通过Ajax技术向一个接口发送请求，也叫做调用接口。

接口是谁设计的呢
- 后端同学设计的（学java的、学php的同学、.....）
- 后端同学设计完接口之后，会提供一个接口文档给我们
一个好的接口文档，至少需要包含下面几项内容
- 接口说明（通过接口说明，大致了解到接口是干什么用的）
- 接口的url（发送ajax请求，必要的条件）
- 接口请求方式（发送ajax请求，必要的条件）
- 请求参数（参数名称、数据类型、是否必填、参数说明等）
- 响应格式
- 响应示例

network工具

network工具使用
- All -- 查看所有请求
- XHR -- 查看Ajax请求
- JS -- 查看请求了哪些JS文件
- CSS -- 查看请求了哪些CSS文件
- Img -- 查看请求了哪些图片
- Media -- 查看请求了哪些音频、视频等
- Font -- 查看请求了哪些字体文件
- Doc -- document，查看请求了哪些html文件

第二天

常用请求方式的区别

GET
- GET方法请求一个指定资源的表示形式. 使用GET的请求应该只被用于获取数据。
- 通俗的讲，获取数据应该使用GET方式的请求。
POST
- POST方法用于将实体提交到指定的资源，通常导致在服务器上的状态变化或副作用。
- 添加、修改都可以使用POST请求，因为此类操作都会改变服务器上的资源
PUT
- PUT方法用请求有效载荷替换目标资源的所有当前表示。
- 修改操作可以选择使用PUT方式
DELETE
- DELETE方法删除指定的资源。
- 删除操作可以使用DELETE方式

具体使用什么请求方式，必须参照接口文档。

深入理解jQuery方法的请求参数

无论使用 $.get() 还是 $.post() 还是 $.ajax() 方法，都可以设置请求参数，即 data。示例如下

$.get('url', data, function (res) { ... })
$.post('url', data, function (res) { ... })
$.ajax({ data: { id: 1 } })

data传递的参数

只有在jQuery下会默认把数组、对象转换成字符串格式，又称为查询字符串格式，

结果放的位置不同：请求行路径里 get请求的参数是查询字符串，post请求的参数称为请求体，form Data

jQuery中ajax请求processData:false 不加密

实际上，在使用jQuery的上述三个方法的前提下，我们不但可以使用对象形式的参数，也能使用数组或者查询字符串，示例如下：

// 这里使用 $.ajax() 举例，另外两个方法同理
$.ajax({
    url: 'http://www.liulongbin.top:3006/api/getbooks',
    
    // 对象形式的写法
    data: { id: 1, bookname: '西游记' }
    
    // 数组形式的写法，注意，只能是这种写法
    data: [{name:'id',value:1}, {name:'bookname',value:'西游记'}]
       
    // 字符串写法，注意，这种类型的字符串，叫做查询字符串  &分隔=链接  
    data: 'id=1&bookname=西游记'
})

无论我们填写的何种形式的参数，都会被jQuery转换成查询字符串形式传递到服务器，因为底层支持查询字符串形式的参数，而不支持字面量对象和数组形式。

这一特点，可以通过network工具查看。

扩展：GET请求传递的叫做请求参数；POST请求提交的一般都叫做请求体。

serialize和serializeArray方法jqeury提供的方法收集数据

☞ 思考一个问题，添加书籍的时候，是如何获取输入框的值的？

答：一个一个获取的。

☞ 思考，如果输入框特别多，而且还有下拉框，单选按钮组、复选按钮组，又该如何获取这些值呢？

答：不知道（心里想肯定有办法，猜测和标题有关系。。。要不然不能讲）

确实，可以使用jQuery提供的 serialize() 或者 serializeArray() 方法获取表单各项的值。

语法：

$('form').serialize();
$('form').serializeArray();

也就是说，使用 serialize() 或者 serializeArray() 方法是通过表单(form) 调用的，所以必须在HTML页面中加入 <form>...</form> 标签。如下所示：

<form>
    <!-- 把所有的框框、按钮都放这里面 -->
    
    <input type="text" name="username" /><br />
    
    <input type="password" name="password" /><br />
    
    <input type="radio" name="gender" value="0" checked />男 
    <input type="radio" name="gender" value="1" />女<br />
    
    <select name="address">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
    </select><br />
    
    <button>提交</button>
</form>

接下来，就可以使用 serialize() 或者 serializeArray() 方法获取全部的值了，代码如下：

// 监听表单的 submit 事件 （表单提交时触发）
$('form').on('submit', function (e) {
    // 一定阻止表单提交，否则页面会跳转；默认跳转到当前页面，感觉和刷新一样
    e.preventDefault(); 
    // 保证页面不会跳转，接下来使用 serialize 获取表单数据
    var str = $(this).serialize();
    var arr = $(this).serializeArray();
});

小结：

在必须具有 ...
标签的前提下，才能使用 serialize() 或者 serializeArray() 方法
各项表单元素（input、select、textarea）必须具备 name 属性。
通过serialize() 得到的是查询字符串类型；通过 serializeArray()得到的是数类型。结果都可以直接当做Ajax请求的参数。
jQuery中ajax请求**processData:false ** 不加密 serializeArray数组不加密
两个方法均不能获取 禁用状态（disabled）的输入框的值。
两个方法均不能获取文件域（<input type="file" />）的值。
两个方法都能获取隐藏域（<input type="hidden" />）readonly的值。
button按钮type属性默认是submit

关于HTML表单的补充

一个表单可以分为三个部分组成：

表单标签（form）
表单域（input、textarea、select）
按钮

form标签

form标签的action属性表示提交地址，默认为空，表示提交到当前页面。

还有 method、enctype、target 三个属性，了解即可。

表单域

常用表单域列举

单行文本域 <input type="text" />
密码框 <input type="password" />
单选按钮 <input type="radio" />
复选按钮 <input type="checkbox" />
隐藏域 <input type="hidden" />
文件域 <input type="file" />
下拉选择框 <select><option>xxx</option></select>
多行文本框 <textarea></textarea>

按钮

普通按钮（点击之后，默认不会发生任何事）
- <button type="button">普通按钮1</button>
- <input type="button" value="普通按钮2" />
重置按钮（点击之后，默认会重置表单）
- <button type="reset">重置按钮1</button>
- <input type="reset" value="重置按钮2" />
提交按钮（点击之后，默认会提交表单）
- <button>提交按钮1</button>
- <button type="submit">提交按钮2</button>
- <input type="submit" value="提交按钮3" />

☞ 问题1：如果JS代码中，注册了表单的提交事件（$('form').on('submit', fun....)），应该使用什么类型的按钮？

答：使用提交按钮。

☞ 问题2：使用serialize方法收集表单值的时候，能不能找到提交按钮，然后注册单击事件呢？

答：也可以。可以找到form，注册submit事件；也可以找到提交按钮，注册click事件。建议找到form，使用submit事件。

$.ajaxPrefilter() 拦截、响应

在发送ajax请求前，jquery之后，统一配置或修改ajax选项。

$.ajaxPrefilter( [dataTypes] , handler(options, originalOptions, jqXHR) )

能拦截所有ajax请求和响应，参数是以回调函数，option参数进行赋值option.url+=''+option.url

XMLHttpRequest对象简介

纲要

XMLHttpRequest 是一个内建的浏览器对象，Ajax技术的核心就是XMLHttpRequest 对象。

jQuery中的 $.ajax() 、$.get()、$.post() 的底层实现，就是 XMLHttpRequest 。

历史

XMLHttpRequest对象最初是 WHATWG(超文本应用程序技术工作组) 的一部分。
2006年移至W3C。
2008年2月，对XMLHttpRequest进行了扩展（如进度事件和跨域请求），也就是所谓的XMLHttpRequest Level 2，直至2011年底。
2012年底，它移回了 WHATWG。

小结

XMLHttpRequest 简称 XHR 对象，是一个浏览器内置对象，目前，所有的浏览器均支持这个对象。
它的作用是可以实现Ajax请求，Ajax技术的核心就是XMLHttpRequest 对象。

实现Ajax的GET请求

步骤

创建xhr对象。
注册 xhr.onreadystatechange 事件，当Ajax请求成功后，会触发onload函数。在 readystatechange 函数中，接收响应结果。
调用open方法，初始化一个请求，此方法用于配置请求方式和url。
调用send方法，发送请求。

基础代码

// 1. 创建xhr对象
var xhr = new XMLHttpRequest();

// 2. 注册 xhr.onreadystatechange 事件，当Ajax请求**成功**后，会触发onload函数。在 readystatechange 函数中，接收响应结果。
xhr.onreadystatechange = function () {
    // 使用 xhr.response 接收响应结果
    var res = xhr.responseText;
}

// 3. 调用open方法，设置请求方式及请求的url地址
// xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks');
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游记');

// 4. 最后，调用send方法，发送这次ajax请求
xhr.send();

请求参数

重要：如果传递请求参数，请求参数要以查询字符串形式拼接到url后面。

形如：url?id=1&bookname=西游记 优先查找第一个请求参数

其他说明

API	兼容性
XMLHttpRequest	IE7+ 支持
open	所有浏览器均支持
send	所有浏览器均支持
onreadystatechange	Level 2 新增，IE9+ 支持
response	Level 2 新增，IE10+ 支持

了解 XMLHttpRequest 对象所有API的兼容性，点击这里。

稍后，我们再讨论兼容所有浏览器的写法。

实现Ajax的POST请求

步骤

（比GET请求多了一行代码）

创建xhr对象。
注册 xhr.onreadystatechange 事件，当Ajax请求成功后，会触发onload函数。在 readystatechange 函数中，接收响应结果。
调用open方法，初始化一个请求，此方法用于配置请求方式和url。
调用setRequestHeader方法，设置请求头。
调用send方法，发送请求。

基础代码

// 1. 创建xhr对象
var xhr = new XMLHttpRequest();

// 2. 注册 xhr.onreadystatechange 事件，当Ajax请求**成功**后，会触发onload函数。在 readystatechange 函数中，接收响应结果。
xhr.onreadystatechange = function () {
    // 使用 xhr.response 接收响应结果
    var res = xhr.responseText;
}

// 3. 调用open方法，设置请求方式及请求的url地址
xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook');

// 4. 调用setRequestHeader，设置请求头，目的是告知服务器以何种方式解析请求体
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

// 5. 最后，调用send方法，发送这次ajax请求 加参数=连接&分隔   get加?post不加，post有很多格式需要设置请求头
xhr.send('bookname=西游记&author=唐僧&publisher=大唐出版社');

请求体

重申一下，POST请求的参数，称之为请求体。

和GET请求一样，请求体也要写成查询字符串格式，不同之处是，请求体做为send方法的参数发送。

其他说明

API	兼容性
setRequestHeader	所有浏览器均支持

setRequestHeader 方法用于设置请求头，格式如下：

xhr.setRequestHeader('名称', '值');

设置的请求头可以在 network 面板 > Headers > Request Headers 中查看。
大部分请求头由浏览器管理，不允许我们修改。所以我们无需关心。
一旦设置了请求头，就无法撤销了。

Content-Type

这里设置的 Content-Type ，作用是告知服务器，浏览器提交的数据是何种类型的。
- 值为：application/x-www-form-urlencoded（需要自己指定），表示客户端提交的是查询字符串。
- 值为：application/json（需要自己指定），表示客户端提交的是 JSON 字符串。
- 值为：multipart/form-data（xhr对象会自动设置），表示客户端提交的是 FormData 对象。

对请求参数进行编码

什么是URL编码？

数据在网络通讯中正负电以字符串的形式传递，汉字和特殊字符进行编译后才能发送多数情况下浏览器会自动编码和解码 encodeuricomponent(str) decodeuricomponent(str) 三组编码为一个字符%xx%xx%xx,如%E5%AD%99 孙悟空的孙

把中文和部分特殊符号转成 URL的标准格式 ，这就是url编码
如，把“中文” 进行url编码后得到 “%E4%B8%AD%E6%96%87”

为什么要对请求参数进行编码

RFC文档规定，只有字母和数字[0-9a-zA-Z]、一些特殊符号“$-_.+!*’(),”[不包括双引号]、以及某些保留字，才可以不经过编码直接用于URL。
对于Unicode字符，RFC文档建议使用utf-8对其进行编码得到相应的字节，然后对每个字节执行百分号编码，也就是所谓的 URL编码。

编码能够解决的问题

乱码问题（浏览器使用utf-8、服务器使用其他编码，传输数据的时候，就会乱码）
提交的内容有特殊符号问题，比如添加一本书，书名是 “红&黑”

如何进行URL编码

JS提供了内置编码解码函数浏览器默认转换中文编码和转化查询字符串的格式不同

编码：encodeURIComponent('西游记')
解码：decodeURIComponent("%E8%A5%BF%E6%B8%B8%E8%AE%B0");

具体查看手册：https://www.w3school.com.cn/jsref/jsref_obj_global.asp

小结

无论是GET请求还是POST请求，向服务器传递参数的时候，必须要对参数进行编码。这里的参数包括参数名和值。

比如，参数为 shu ming=红&黑

参数名中有空格，需要编码；
值有中文，且有歧义，需要编码；

readyState属性

Ajax从创建xhr对象开始，一直到完全接收服务器返回的结果为止；我们可以把整个请求响应过程划分为5个阶段。并且可以使用 xhr.readyState 属性检测当前请求执行到哪个阶段了。

readyState属性值为一个数字，不同的数字表示Ajax的不同状态。

如果状态值为0（xhr.readyState === 0），初始状态，表示xhr对象一定创建了。new
如果状态值为1（xhr.readyState === 1），表示open一定调用了 open 配置
如果状态值为2（xhr.readyState === 2），表示send一定调用了，并且已经接收到响应头
如果状态值为3（xhr.readyState === 3），表示正在接收服务器返回的数据（可能已接收完毕，也可能正在接收中，取决于数据量的大小）
如果状态值为4（xhr.readyState === 4），表示Ajax请求~响应过程完成也在此时编码或解码 在onreadystatechange事件中状态值为0--4对应请求到响应五个阶段
注册 xhr.onreadystatechange 事件，当Ajax请求成功后，会触发onload函数。在 readystatechange 函数中，接收响应结果。
xhr.readyState表示状态阶段五个阶段，xhr.status表示浏览器和服务器的请求响应状态码，2,3成功，45，失败，xhr.response[text/type]程序员自定义状态模拟请求状态

值为0、1、2、3的时候，基本上不用关心。主要关心值为4的时候，因为这个时候表示Ajax请求~响应过程完成了，如果成功的结束了，则可以完全接收服务器响应的结果。

下面在创建xhr对象后和onreadystatechange事件内部分别输出 xhr.readyState 可以分别得到 0 、1、2、3 4。

// 1. 创建xhr对象
var xhr = new XMLHttpRequest();

console.log(xhr.readyState); // ===> 0

// 2. 注册 xhr.onreadystatechange 事件，当Ajax请求**成功**后，会触发onload函数。在 readystatechange 函数中，接收响应结果。
xhr.onreadystatechange = function () {
    console.log(xhr.readyState); // ===> 4
    // 使用 xhr.response 接收响应结果
    var res = xhr.responseText;
}

// 3. 调用open方法，设置请求方式及请求的url地址
// xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks');
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游记');

// 4. 最后，调用send方法，发送这次ajax请求
xhr.send();

onreadystatechange事件

介绍

onreadystatechange 翻译过来是 当Ajax的请求状态改变的时候。

所以，它是配合上述的 readyState 使用的事件。

事件具体的触发时机如下：

readyState属性值改变的时候
- 0 --> 1
- 1 --> 2
- 2 --> 3
- 3 --> 4
接收到的数据量改变的时候，此时 readyState 的值保持为3，但也会触发 onreadystatechange 事件（发生在分块接收大量数据的时候）

所以，绑定的onreadystatechange事件，可能会触发多次。

完整代码

前文提到，onload有浏览器兼容问题，如果你的项目需要支持低版本的浏览器，那么可以使用 onreadystatechange事件代替onload事件。

由于onreadystatechange事件可能会触发多次，所以需要在事件中加入判断，已保证准确的接收到响应结果。

// 1. 创建xhr对象
var xhr = new XMLHttpRequest();
// IE6 创建对象 var xhr = new ActiveXObject('Microsoft.XMLHTTP');

// 2. 使用onreadystatechange代替onload
xhr.onreadystatechange = function () {
    // 判断Ajax请求是否完成
    if(xhr.readyState === 4) {
        // 还要根据响应状态码判断，请求是否成功
        if (xhr.status === 200) {
            console.log(xhr.responseText);
        } else {
            console.log('请求失败')
        }
    }
}

// 3. 调用open方法，设置请求方式及请求的url地址
// xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks');
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游记');

// 4. 最后，调用send方法，发送这次ajax请求
xhr.send();

封装Ajax

思路：

想好了，最终封装成什么样的 --- 封装成和 $.ajax 一样的（简略版）

我们希望和调用jQuery的$.ajax方法一样，来调用自己封装的函数，形式如下：

// 假设我们封装了一个 ajax 函数，调用方式如下
ajax({
    method: 'GET',
    url: 'xxxx',
    data: {},
    success: function (res) {
        // res 表示服务器响应的结果
    }
});

封装函数 ajax，参数只有一个，是对象形式，参照上面的代码
函数体
- 基本的Ajax代码（基本的步骤写出来）
- 判断GET和POST请求，分别写 open 和 send 方法
- 处理请求参数，把对象形式的参数处理成查询字符串格式
- 当ajax请求成功之后，调用success函数，把服务器响应的结果当做实参传给success。
- 细节处理（默认GET方式、不区分大小写等等、响应结果是否转换成JS对象...）

封装，不可能封装的和jQuery那样强大；通过自己封装，我们能够体会到jQuery中的$.ajax()方法是怎么封装的。

参考代码如下：

/**
* 把字面量对象转换成查询字符串
* @param {object} obj 一个字面量对象
* @returns {string} 查询字符串
*/
function ObjectToQueryString(obj) {
    var arr = [];
    for (var key in obj) {
        arr.push(`${key}=${obj[key]}`);
    }
    return arr.join('&');
}
/**
* 实现Ajax请求
* @param {object} option 对象形式的参数
* 	@param {string} option.type 请求方式
* 	@param {string} option.url 接口地址
* 	@param {object} option.data 请求参数
* 	@param {callback} option.success 成功后的回调
*/
function ajax(option) {
    // 1. 把请求方式统一转大写，为后面的判断做准备
    var type = option.type.toUpperCase();
    // 2. 调用上面的函数，把请求参数处理成查询字符串
    var params = ObjectToQueryString(option.data);
    // 3. 写Ajax的基本步骤
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
      if (this.readyState === 4 && this.status === 200) {
        // 当响应成功后，把JSON格式的结果转换为JS对象
        var res = JSON.parse(this.responseText);
        // 把结果，传递给 success 回调函数
        option.success(res);
      }
    }
    // 判断是GET还是POST请求方式
    if (type === 'GET') {
        xhr.open('GET', option.url + '?' + params);
        xhr.send();
    } else if (type === 'POST') {
        xhr.open('POST', option.url);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send(params);
    }
}

第三天

设置HTTP请求时限新特性书写在设置请求方式和资源路径之前

timeout -- Level 2 新增，IE8+支持，用于设置请求的超时时间，单位是毫秒
ontimeout -- Level 2 新增，IE10+支持，如果请求超时了，会触发 ontimeout 事件

var xhr = new XMLHttpRequest()
xhr.onload = function () {
    console.log(JSON.parse(this.response));
}
xhr.timeout = 30; // 单位是毫秒
// 当请求超时之后，会触发下面的函数
xhr.ontimeout = function () {
    alert('请求超时，请刷新重试');
}
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks');
xhr.send();

新增事件

onload 事件，在请求成功完成时触发。即 readyState为4时触发。
可以使用onload事件，代替之前的 onreadystatechange 事件。
使用onload代替onreadystatechange，里面不用加判断，因为onload本身就是在请求成功完成时触发onloadstart 事件，开始上传数据时被调用
onloadend 事件，当内容加载完成，不管失败与否，都会调用该方法。

onerror
onerror 事件，在发送请求失败时触发，网络的错误如果是地址错误报404

xhr.upload.onprogress 事件，在请求完成之前周期性调用的函数。readyState为3时触发。注意，上传进度使用xhr.upload.onprogress事件；下载进度使用xhr.onprogress事件；

可以使用xhr.upload.onprogress事件，获取数据的接收（上传）进度。
使用onprogress可以实现下载进度条
xhr.upload.onprogress = function (event) {
event.loaded; // 已传输的数据量
event.total; //总共的数据量
};

FormData对象

介绍

Form是表单，Data是数据。猜测，它和表单数据有关系。

FormData是h5出现之后，新增的一个对象。用于管理表单数据。IE10+支持。

可以这样理解，FormData的作用和 jQuery中的 serialize() 作用一样，用于快速收集表单数据，并且可以将结果直接提交给接口。

创建的FormData对象，可直接通过 xhr.send(FormData对象) 提交给服务器的接口。

基本语法

var fd = new FormData([form]); // 参数是表单的DOM对象，可选

FormData的API：（除了append方法IE10支持外，其他方法IE均不支持）

append('key', 'value'); -- 向对象中追加数据，一个属性可追加多个
set('key', 'value'); -- 修改对象中的数据，添加或设置，覆盖
delete('key'); -- 从对象中删除数据
get('key') -- 获取对象中key的第一项数据
getAll('key') -- 获取指定key的全部数据
forEach() -- 遍历对象中的数据 foreach方法参数予以为value，key 没有...简单好用
....

使用FormData的注意事项（必看）

使用FormData，要求表单各项必须有name属性，因为FormData也是根据表单各项的name属性获取值的
实例化 FormData对象，传入表单的DOM对象（表单的dom对象），可以快速收集到表单各项值。let fd =new FormData(dom对象) 返回的是一个伪数组，二维数组，但是看不出来用扩展运算符...查看
可以收集文件信息，这是和 serialize 不一样的。可以完成文件上传。send(fd)
如果要检查FormData中有哪些值，需要使用forEach遍历。
如果需要动态添加或修改FormData中的值，可以调用 FormData的append或set方法。
只能通过POST方式提交FormData对象，不能设置Content-Type请求头，因为当提交FormData的时候，XHR对象会自动设置这个请求头。

FormData配合jQuery使用

data:formdata对象//必填项 processData: false, // 必填项contentType: false, // 必填项

processData：

前文讲，jQuery默认会把data转换成查询字符串格式，这里 processData: false ，表示不要把FormData对象转换成查询字符串。因为原生（底层）实现是 xhr.send(fd)，也是直接提交FormData对象的。

contentType:

前文讲，提交FormData，不能自己设置Content-Type这个请求头，这里 contentType: false，表示不要设置这个请求头。

FormData和serialize的区别

FormData属于原生的代码；serialiaze和serializeArray是jQuery封装的方法
共同点：都需要设置表单各项的name属性都能获取隐藏域都不能获取禁用状态的值。
jQuery中提交FormData，必须指定 2个false。processData: false 和 contentType: false原生js不需要。
FormData可以收集文件域的值，而serialize不能。也就是说，如果有文件上传，必须使用FormData。
得到的结果的数据类型不一样（知道即可）
- FormData收集到的数据是JS对象格式；
- serialize得到的是查询字符串格式；
- serializeArray得到的是数组格式；

同步请求和异步请求

原理

JS代码分为同步代码和异步代码。目前，我们学习过的异步代码有：

事件
定时器
Ajax请求

除此之外，其他所有代码都是同步代码。

优先执行同步代码
前一行同步代码没有执行完，后面的代码只能等待，这就是“阻塞”效果。
遇到异步代码，去排队等待
所有的同步代码执行完，才去检查是否有异步代码
如果有异步代码，按顺序执行，但不会有“阻塞”效果。
1. 异步任务执行前，一般都会提前绑定一个回调函数
2. 当前的异步任务执行完毕，就会调用提前帮的回调函数

JSON

JSON在Ajax中的作用

JSON在Ajax请求的过程中，作用就是作为数据的载体。
服务端使用的编程语言可能是java、php等，前端使用的编程语言是JavaScript，双方的数据格式可能不一样，所以在交互数据的时候，得转换成双方都能识别的格式，比如JSON格式。
JSON是字符串类型

编写JSON的具体要求：

不允许出现 undefined
不允许写注释
不能有函数
无论是属性名还是字符串类型的值，都必须加双引号。（单引号都不行）
JSON中可以包括的数据类型
- 数字
- 字符串（必须加双引号）
- 布尔
- null
- 数组
- 对象
一个完整的JSON字符串，前后的括号必须对应，且不能有其他内容。

JSON ----> JS

var JS数据 = JSON.parse(JSON字符串);
这个过程叫做反序列化

JS ----> JSON

var JSON字符串 = JSON.stringify(JS数据);
这个过程叫做序列化

axios

axios 是一个基于 promise 的 ajax 库，只封装了 XMLHttpRequest 对象，未来在脱离jQuery后，会使用axios。

简单来说，axios和jQuery一样，对原生的xhr进行了封装，提供了非常简便的ajax方法

相比jQuery，axios更加专一，axios库只提供ajax方法，而没有DOM操作、事件、动画等其他jQuery方法
相比jQuery，axios体积更小，压缩版只有17kb。
相比jQuery，axios支持 promise API ( node.js中详细讲解 )。
返回六个属性

使用axios实现GET请求

GET请求，方法：

// 前面的请求也可以这样做
axios.get(url,params).then(fucntion(){})


axios.get('/user', {
    // 通过params传递GET参数
    params: {     
        ID: 12345
    }
}).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});

使用axios实现POST请求

POST请求，方法：

// 请求 /user 接口，并传递ID参数
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
}).then(function (response) {
    console.log(response);
}).catch(function (error) {  
    console.log(error);
});

使用axios简单写法

axios简单写法，方法1：

// 请求 /user 接口，并传递ID参数
axios.({
    method: "GET",
    url: "资源路径",
    params: "GET参数"// 对象类型
}).then(function (response) {  
    console.log(response);
}).catch(function (error) {   
    console.log(error);
});

axios简单写法，方法2：

// 请求 /user 接口，并传递ID参数
axios.({
    method: "POST",
    url: "资源路径",
    data: "POST参数",// 对象类型
}).then(function (response) { 
    console.log(response);
}).catch(function (error) { 
    console.log(error);
});

posted @ 2022-04-28 18:57 jialiangzai 阅读(57) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期（2025年3.1-3.9）
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异

公告

昵称： jialiangzai
园龄： 3年11个月
粉丝： 10
关注： 3

+加关注

2025年3月

日

一

二

三

四

五

六

光明神已陨落，现在由光明引领我

ajax

第一天

Ajax的应用场景

GET和POST请求方式

jQuery中封装的Ajax方法

获取服务器上的数据资源

语法

接口及接口文档

概念及说明

network工具

第二天

常用请求方式的区别

深入理解jQuery方法的请求参数

serialize和serializeArray方法jqeury提供的方法收集数据

关于HTML表单的补充

form标签

表单域

按钮

$.ajaxPrefilter() 拦截、响应

$.ajaxPrefilter( [dataTypes] , handler(options, originalOptions, jqXHR) )

XMLHttpRequest对象简介

纲要

历史

小结

实现Ajax的GET请求

步骤

基础代码

请求参数

其他说明

实现Ajax的POST请求

步骤

基础代码

请求体

其他说明

Content-Type

对请求参数进行编码

什么是URL编码？

为什么要对请求参数进行编码

编码能够解决的问题

如何进行URL编码

小结

readyState属性

onreadystatechange事件

介绍

完整代码

封装Ajax

第三天

设置HTTP请求时限 新特性书写在设置请求方式和资源路径之前

新增事件

FormData对象

介绍

基本语法

使用FormData的注意事项（必看）

FormData配合jQuery使用

FormData和serialize的区别

同步请求和异步请求

原理

JSON

JSON在Ajax中的作用

axios

使用axios实现GET请求

GET请求，方法：

使用axios实现POST请求

POST请求，方法：

使用axios简单写法

axios简单写法，方法1：

axios简单写法，方法2：

公告

最新随笔

合集

随笔档案

相册

喜欢请打赏

设置HTTP请求时限新特性书写在设置请求方式和资源路径之前