Ajax基础整理

1、客户端与服务器

1.1、上网的目的

• 网上购物
• 浏览新闻
• 网上交流
• 看电影听音乐

1.2、服务器

• 上网过程中负责存放和对外提供资源的电脑，叫做服务器
• 服务器的本质就是一台电脑，只是它的性能要比个人电脑高很多

1.3、客户端

• 上网过程中负责获取和消费资源的电脑，叫做客户端
• 个人电脑可以通过安装浏览器来访问服务器对外提供的各种资源

2、URL 地址

2.1、URL 地址的概念

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

2.2、URL 地址的组成部分

• 客户端与服务器之间的通信协议
• 存放该资源的服务器名称
• 资源在服务器上具体的存放位置

3、客户端与服务器的通信过程

3.1、客户端（用户电脑）

• 打开浏览器
• 输入要访问的网站地址
• 回车，向服务器发起资源请求

3.2、web 服务器

• 服务器接收到客户端发来的资源请求
• 服务器在内部处理这次请求，找到相关资源
• 服务器把找到的资源，响应给客户端

3.3、通信过程

• 客户端与服务器之间的通信过程，分为请求-处理-相应三个步骤
• 网页中的每一个资源，都是通过请求-处理-相应的方式从服务器获取回来的

3.4、服务器对外提供的资源

• 文字内容
• Image 图片
• Audio 音频
• Video 视频
• 网页中的数据（数据是网页的灵魂）

3.5、请求数据资源

• 数据也是服务器对外提供的一种资源，也是通过请求-处理-相应的方式进行获取。
• 在网页中请求服务器的数据资源需要用到 XMLHttpRequest 对象
• XMLHttpRequest（简称 xhr）是浏览器提供的 js 成员，通过它可以请求服务器上的数据资源
• 最简单的用法 var xhr = new XMLHttpRequest()

3.6、资源请求方式

• 客户端请求服务器，请求的方式有很多种，最常见的请求方式分别为 get 和 post 请求
• get 请求用于获取服务器资源（向服务器要资源）
• post 请求用于向服务器提交数据（）向服务器发送资源

4、了解 Ajax

4.1、什么是 Ajax

• Ajax 的全称是 Asynchronous JavaScript And XML（异步 JavaScript 和 XML）
• 在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式，就是 Ajax

4.1、jQuery 中的 Ajax

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

4.2、$.get()函数语法

• jQuery 中$.get()函数的功能单一，专门用来发起 get 请求，从而将服务器上的资源请求到客户端来进行使用

语法：

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

参数名	参数类型	是否必选	说明
url	string	是	请求的资源地址
data	object	否	请求期间携带的参数
callback	function	否	请求成功时的回调函数

4.3、$.get()函数语法

• jQuery 中$.post()函数的功能单一，专门用来发起 post 请求，从而向服务器提交数据

语法：

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

参数名	参数类型	是否必选	说明
url	string	是	提交数据的地址
data	object	否	要提交的数据
callback	function	否	数据提交成功时的回调函数

4.4、$.ajax()函数的语法

• 相比于$.get()和$.post()函数，jQuery 中提供的$.ajax()函数，是一个功能比较综合的函数，它允许我们对 Ajax 请求进行更加详细的配置

语法：

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

4.5、接口文档

• 接口文档，顾名思义就是接口的说明文档，他是我们调用接口的依据。

• 接口文档包含了对接口 URL，参数以及输出内容的说明

5、form 表单的基本使用

5.1、什么是表单

• 表单在网页中主要负责数据采集功能。HTML 中的 form 标签，就是用于采集用户输入的信息，并通过 form 标签的提交操作，把采集到的信息提交到服务器端进行处理。

5.2、表单的组成部分

• 表单标签
• 表单域
• 表单按钮

5.3、form 标签属性

• form 标签用来采集数据，form 标签的属性则是用来规定如何把采集到的数据发送到服务器

属性	值	描述
action	URL 地址	规定当提交表单时，向何处发送表单数据
method	get 或 post	规定以何种方式把表单数据提交到 action URL
enctype	application/x-www-form-urlencoded、multipart/form-data、text/plain	规定在发送表单数据之前如何对其进行编码
target	_blank、_self、_parent、_top	规定在何处打开 action URL

5.3.1 action 属性

• action 属性用来规定当表单提交时，向何处发送表单数据
• action 属性值是后端提供的一个 URL 地址，这个 URL 地址专门负责接收表单提交过来的数据
• 当 form 表单在未指定 action 属性值的时候，action 的默认值为当前页面的 URL 地址
• 表单提交后，页面会立即跳转到 action 属性指定的 URL 地址

5.3.2 target 属性

• target 属性用来规定在何处打开 action URL
• 它的可选值有 5 个默认情况下，target 的值是_self，表示在相同的框架中打开 action URL

值	描述
_blank	在新窗口中打开
_self	默认，在相同的框架中打开
_parent	在父框架中打开
_top	在整个窗口中打开
framename	在指定的框架中打开

5.3.3 method 属性

• method 属性用来规定以何种方式把表单数据提交到 action URL
• 默认情况下，method 的值为 get，表示通过 URL 地址的形式，把表单数据提交到 action URL
• GET 方式适合用来提交少量的、简单的数据
• POST 方式适合用来提交大量的、复杂的或包含文件上传的数据

5.3.4 enctype 属性

• enctype 属性用来规定在发送表单数据之前如何对数据进行编码
• 它的可选值有三个，默认情况下，enctype 的值为 application/x-www-form-urlencoded，表示在发送前编码所有的字符

值	描述
application/x-www-form-urlencoded	在发送前编码所有字符（默认）
multipart/form-data	不对字符编码。在使用包含文件上传控件的表单时，必须使用该值
text/plain	空格转换为+，但不对特殊字符编码

5.4 表单同步提交

5.4.1 什么是表单的同步提交

• 通过点击 submit 按钮，触发表单提交的操作，从而使页面跳转到 action URL 的行为，叫做表单的同步提交

5.4.2 表单同步提交的缺点

• form 表单同步提交后，整个页面会发生跳转，跳转到 action URL 所指向的地址，用户体验很差
• form 表单同步提交后，页面之前的状态和数据会丢失

• 解决方案：表单只负责采集数据，Ajax 负责将数据提交到服务器
• 阻止默认提交行为：e.preventDefault()

6、XMLHttpRequest 的基本使用

6.1、什么是 XMLHttpRequest

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

6.2、使用 xhr 发起 GET 请求

    // 1. 创建XHR对象

    var xhr = new XMLHttpRequest()

    // 2. 调用 open 函数，指定请求方式与URL地址

    xhr.open('GET', 'http://www.baidu.com')

    // 调用 send 函数，发起 Ajax 请求

    xhr.send()

    // 4. 监听 onreadystatechange 事件

    xhr.onreadystatechange = function () {
        // 监听 xhr 对象的请求状态 readyState 和服务器响应状态 status
        if (xhr.readyState === 4 && xhr.status === 200) {
            // 打印服务器相应回来的数据
            console.log(xhr.responseText)
        }
    }

XMLHttpRequest对象的 readyState 属性：

值	状态	描述
0	UNSENT	XMLHttpRequest对象已被创建，但尚未调用 open 方法
1	OPENED	open() 方法已被调用
2	HEADERS_RECEIVED	send() 方法已被调用，相应头也已经被接收
3	LOADING	数据接收中，此时 response 属性中已经包含部分数据
4	DONE	Ajax请求完成，这意味着数据传输已经彻底完成或失败

6.3、查询字符串

6.3.1 什么是查询字符串

• 查询字符串（URL 参数）是指在 URL 的末尾加上用于向服务器发送信息的字符串
• 将英文的?放在 URL 的末尾，然后再加上 参数=值，相加上多个参数的话，使用&符号进行分隔。

6.3.2 GET 请求携带参数的本质

• 无论使用 $.ajax()，还是使用 $.get()，又或者直接使用 xhr 对象发起 GET 请求，当需要携带参数的时候，本质上都是直接将参数以查询字符串的形式，追加到 URL 地址的后面，发送到服务器的。

6.4、URL编码与解码

6.4.1 什么是URL编码

• URL地址中，只允许出现英文相关的字母、标点符号、数字。因此，在URL地址中不允许出现中文字符
• 如果 URL 中需要包含中文这样的字符，则必须对中文字符进行编码
• URL编码的原则：使用安全的字符去表示哪些不安全的字符
• URL编码原则的通俗理解：使用英文字符去表示非英文字符

6.4.2 如何对URL进行编码与解码

• 浏览器提供了 URL 编码与解码的 API

• encodeURI() 编码的函数

• decodeURI() 解码的函数

    encodeURI('你好！')
    // 输出字符串 %E4%BD%A0%E5%A5%BD%EF%BC%81
  
    decodeURI('%E4%BD%A0%E5%A5%BD%EF%BC%81')
    // 输出字符串 你好！
  

6.4.3 URL编码的注意事项

• 由于浏览器会自动对 URL 地址进行编码操作，因此，大多情况下，程序员不需要关心 URL 地址的编码与解码操作。

6.5、使用 xhr 发起 POST 请求

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

    // 2. 调用 open()
    xhr.open('POST', 'http://www.baidu.com');

    // 3. 设置 Content-Type 属性
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

    // 4. 调用 send() 将数据以查询字符串的形式，提交给服务器
    xhr.send('')

    // 5. 监听 onreadystatechange 事件
    xhr.onreadystatechange = function () {
        if(xhr.readyState === 4 && xhr.status === 200) {
            console.log(xhr.responseText)
        }
    }

7、数据交换格式

7.1、什么数据交换格式

• 数据交换格式，就是服务器与客户端之间进行数据传输与交换的格式
• 数据交换格式分别是 XML 和 JSON

7.2、什么是XML

• XML的英文全称是 EXtensible Markup Language，即可扩展标记语言。
• XML 与 HTML 类似，也是一种标记语言
• XML 和 HTML 虽然都是标记语言，但是它们两者之间没有任何的关系
• HTML 被设计用来描述网页上的内容，是网页内容的载体
• XML 被用来传输和存储数据，是数据的载体
• XML 格式臃肿，和数据无关的代码多，体积大，传输效率低
• 在 JavaScript 中解析 XML 比较麻烦

7.3、什么是JSON

• JSON 的英文全称是 JavaScript Object Notation，即 JavaScript 对象表示法。
• JSON就是 JavaScript 对象和数组的字符串表示法，它使用文本表示一个 JS 对象或数组的信息
• JSON 的本质就是字符串
• JSON 是一种轻量级的文本数据交换格式，在作用上类似于 XML，专门用于存储和传输数据，但是 JSON 是比 XML 更小、更快、更易解析。
• JSON 现在已经成为主流的数据交换格式

7.4、JSON的两种结构

对象结构：对象结构在 JSON 中表示为 {} 括起来的内容。数据结构为键值对结构。其中，key必须是使用英文的双引号包裹的字符串，value的数据类型可以是数字、字符串、布尔值、null、数组、对象。

数组结构；数组结构在JSON中表示为 [] 括起来的内容。数组中数据的类型可以是数字、字符串、布尔值、null、数组、对象

7.5、JSON语法注意事项

• 属性名必须使用双引号包裹
• 字符串类型的值必须使用双引号包裹
• JSON 中不允许使用单引号表示字符串
• JSON 中不能写注释
• JSON 的最外层必须是对象或数组格式
• 不能使用 underfined 或 函数作为 JSON 的值

7.6、JSON和JS对象的关系

    // 这是一个对象
    const obj = {name: 'lili', age: 18, sex: '女'};

    // 这是一个 JSON 字符串
    const json = '{"name": "lili", "age": 18, "sex": "女"}';

7.7、JSON和JS对象的相互转换

• 把数据对象转换为字符串的过程，叫做序列化。调用JSON.stringify()函数进行序列化

• 把字符串转换为数据对象的过程，叫做反序列化。调用JSON.parse()函数进行反序列化

    // 对象转为JSON
    const json = JSON.stringify({name: 'lili', age: 18, sex: '女'});
    // 结果：'{"name": "lili", "age": 18, "sex": "女"}'
  
    // JSON转对象
    const obj = JSON.parse('{"name": "lili", "age": 18, "sex": "女"}');
    // 结果：{name: 'lili', age: 18, sex: '女'}
  

8、了解同源策略和跨域

8.1、什么是同源

• 如果两个页面的协议，域名和端口都相同，则两个页面具有相同的源

8.2、什么是同源策略

• 同源策略英文全称 Same Origin Policy 是浏览器提供的一个安全功能
• 同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制
• 无法读取非同源的Cookie、LocalStorage和IndexDB
• 无法接触非同源网页的DOM
• 无法向非同源地址发送Ajax请求

8.3、什么是跨域

• 同源指的是两个 URL 的协议、域名】端口一致，反之则是跨域
• 出现跨域的原因是浏览器的同源策略不允许非同源的URL之间进行资源的交互

8.4、解决跨域

• JSONP：出现的早，兼容性好（兼容低版本IE）。是前端程序员为了解决跨域问题，被迫想出来的一种临时解决方案。缺点是只支持GET请求，不支持POST请求
• CORS：出现的较晚，它是W3C标准，属于跨域Ajax请求的根本解决方案。支持GET和POST请求。缺点是不兼容某些低版本的浏览器

8.6、什么是JSONP

• JSONP（JSON with Padding）是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问问题。
• 由于浏览器同源策略的限制，网页中无法通过 Ajax请求非同源的接口数据。但是<script>标签不受浏览器同源策略的影响，可以通过src属性，请求非同源的 js 脚本
• 因此，JSONP的实现原理就是通过<script>标签的src属性，请求跨域的数据接口，并通过函数调用的形式接收跨域接口响应回来的数据
• JSONP 和 Ajax之间没有任何关系，不能把JSONP请求数据的方式叫做 Ajax，因此 JSONP 没有用到 XMLHttpRequest这个对象

9、防抖和节流

9.1、什么是防抖

• 防抖策略（debounce）是当事件被触发后，延迟 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时
• 用户在输入框中连续输入一串字符时，可以通过防抖策略，只在输入完后，才执行查询的请求，这样可以有效减少请求次数，节约请求资源

代码演示：

    function debounce(fn, delay = 200) {
        let timer = 0;
        return function() {
            // 如果这个函数已经被出发了
            if(timer) {
                clearTimeout(timer);
            }
            timer = setTimeout(() => {
                fn.apply(this, arguments);
                timer = 0;
            }, delay);
        }
    }

9.2、什么是节流

• 节流策略（debounce）可以减少一段时间内事件的触发频率
• 鼠标连续不断地触发某个事件，只在单位时间内触发一次
• 懒加载时要监听计算滚动条地位置，但不必每次滑动都触发，可以降低计算地频率，而不必去浪费 CPU 资源

代码演示：

    function throttle(fn, delay = 200) {
        let timer = 0;
        return function() {
            // 如果这个函数已经被出发了
            if(timer) {
                return;
            }
            timer = setTimeout(() => {
                fn.apply(this, arguments);
                timer = 0;
            }, delay);
        }
    }

10、http协议

10.1、什么是通信

• 通信就是信息地传递和交换
• 通信三要素分别为主体、内容、方式

10.2、什么是通信协议

• 通信协议（Communication Protocol）是指通信地双方完成通信所必须遵守地规则和约定
• 通信双方采用约定好的格式来发送和接收消息，这种事先约定好地通信格式，就叫做通信协议
• 客户端与服务器之间要实现网页内容的传输，则通信的双方必须遵守网页内容的传输协议
• 网页内容又叫做超文本，因此网页内容的传输协议又叫做超文本传输协议（HyperText Transfer Protocol）简称HTTP协议

10.3、什么是HTTP协议

• HTTP协议即超文本传输协议（HyperText Transfer Protocol），它规定了客户端与服务器之间进行网页内容传输时所必须遵守的传输格式
• 客户端要以HTTP协议要求的格式把数据提交到服务器
• 服务器要以HTTP协议要求的格式把内容相应给客户端

10.4、什么是HTTP请求消息

• 由于HTTP协议属于客户端浏览器和服务器之间的通信协议。因此客户端发起的请求叫做HTTP请求，客户端发送到服务器的消息，叫做HTTP请求消息
• HTTP请求消息又叫做HTTP请求报文
• HTTP请求消息由请求行（request line）、请求头部（header）、空行和请求体4个部分组成

请求行：由请求方式、URL、和HTTP协议版本3个部分组成，他们之间使用空格隔开

请求头部：用来描述客户端的基本信息，从而把客户端相关的信息告知服务器。

头部字段	描述
Host	请求的服务器域名
Connection	客户端与服务器的连接方式（close或keepalive）
Content-Length	用来描述请求体的大小
User-Agent	用来说明当前是什么类型的浏览器
Content-Type	用来描述发送到服务器的数据格式
Accept	用来描述客户端能够接收什么类型的返回内容
Accept-Encoding	客户端可接收的内容压缩编码形式
Accept-Language	用来描述客户端期望接收哪种类型语言的文本内容

空行：最后一个请求头字段的后面是一个空行，通知服务器请求头部至此结束
请求体：请求体中存放的，是要通过POST方式提交到服务器的数据。只有POST请求才有请求体，GET请求没有请求体

10.5、HTTP响应消息

• 响应消息就是服务器响应给客户端的消息内容，也叫作响应报文
• HTTP响应消息由状态行、响应头部、空行和响应体4个部分组成

状态行：状态行由HTTP协议版本、状态码和状态码的描述文本3个部分组成。它们之间使用空格隔开
响应头部：响应头部用来描述服务器的基本信息。响应头部由多行 键值对 组成，每行的键和值之间用英文的冒号分隔
空行：在最后一个响应头部字段结束之后，会紧跟一个空行，用来通知客户端响应头部至此结束
响应体：响应体中存放的，是服务器相应给客户端的资源内容

10.6、HTTP请求方法

• HTTP请求方法，属于HTTP协议中的一部分，请求方法的作用是用来表明要对服务器上的资源执行的操作
• 最常用的请求方法是GET和POST

方法	描述
GET	(查询)发送请求来获取服务器上的资源，请求体中不会包含请求数据，请求数据放在协议头中
POST	(新增)向服务器提交资源（表单提交或上传文件）。数据被包含在请求体中提交给服务器
PUT	(修改)向服务器提交资源，并使用提交的新资源，替换掉服务器对应的旧资源
DELETE	(删除)请求服务器删除指定的资源
HEAD	HEAD方法请求一个与GET请求的数据响应相同的响应，但没有响应体
OPTIONS	获取http服务器支持的http请求方法，允许客户端查看服务器的性能，比如ajax跨域时的预检
CONNECT	建立一个由目标资源标识的服务器的隧道
TRACE	沿着到目标资源的路径执行一个消息环回测试，主要用于测试或诊断
PATCH	是对PUT方法的补充，用来对已知资源进行局部更新

10.6、HTTP响应状态码

• HTTP响应状态码（HTTP Status Code），也属于HTTP协议的一部分，用来标识响应的状态
• 响应状态码会随着响应消息一起被发送至客户端浏览器，浏览器根据服务器返回的响应状态码，就能知道这次HTTP请求的结果是成功还是失败了
• HTTP状态码由三个十进制数字组成，第一个十进制数字定义了状态码的类型，后两个数字用来对状态码进行细分

分类	描述
1**	信息，服务器收到请求，需要请求者继续执行操作（实际开发中很少遇到）
2**	成功，操作被成功接收并处理
3**	重定向，需要进一步的操作以完成请求
4**	客户端错误，请求包含语法错误或无法完成请求
5**	服务器错误，服务器在处理请求的过程中发生了错误

10.6.1 2**成功相关的响应状态码

状态码	英文名称	中文描述
200	OK	请求成功。一般用于GET与POST请求
201	Created	已创建。成功请求并创建了新的资源，通常用于POST或PUT请求

10.6.2 3** 重定向相关的响应状态码

• 3**范围的状态码，表示服务器要求客户端重定向，需要客户端进一步的操作以完成资源的请求

状态码	英文名称	中文描述
301	Moved Permanently	永久移动。请求的资源已被永久的移动到新的URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替
302	Found	临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI
304	Not Modified	未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源

10.6.3 4** 客户端错误相关的响应状态码

• 4**返回的状态码，表示客户端的请求有非法内容，从而导致这次请求失败。

状态码	英文名称	中文描述
400	Bad Request	1、语义有误，当前请求无法被服务器理解。除非进行修改，否则客户端不应该重复提交这个请求。2、请求参数有误
401	Unauthorized	当前请求需要用户验证
403	Forbidden	服务器已经理解请求，但是拒绝执行它
404	Not Found	服务器无法根据客户端的请求找到资源（网页）
408	Request Timeout	请求超时，服务器等待客户端发送的请求时间过长，超时

10.6.4 5** 服务端错误相关的响应状态码

• 5**范围的状态码，表示服务器未能正常处理客户端的请求而出现意外错误

状态码	英文名称	中文描述
500	Internal Server Error	服务器内部错误，无法完成请求
501	Not Implemented	服务器不支持该请求方法，无法完成请求。只有GET和HEAD请求方法是要求每个服务器必须支持的，其它请求方法在不支持的服务器上会返回501
503	Service Unavailable	由于超载或系统维护，服务器暂时的无法处理客户端的请求