Ajax详细内容 + 简单HTTP技术复习学习笔记，包含（原生 Ajax 、jQuery实现 Ajax、axios、HTTP相关知识）

---

前言

*本文包含 Ajax相关 的详细内容，参考于 黑马PPT 通过自己理解整理，所以这是一篇用于小白新手入门，或者复习使用的笔记，主要包含（原生 Ajax 、jQuery实现 Ajax、axios、HTTP相关知识）

如有做的不好的地方，敬请谅解，欢迎指出，持续更新改正*

---

一 服务器的基本概念与初识Ajax

1.1 客户端与服务器 和 URL相关概念

1.1.1 客户端和服务器的概念

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

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

---

1.1.2 URL地址的概念

URL（全称是UniformResourceLocator）中文叫统一资源定位符，用于标识互联网上每个资源的唯一存放位置。

浏览器只有通过URL地址，才能正确定位资源的存放位置，从而成功访问到对应的资源。

常见的URL举例：

• http://www.baidu.com
• http://www.taobao.com
• http://www.cnblogs.com/liulongbinblogs/p/11649393.html

---

1.1.3 URL地址的组成部分

URL地址一般由三部组成：

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

---

1.1.4 图解客户端与服务器的通信过程

注意 :

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

---

1.1.5 网页中如何请求数据

数据，也是服务器对外提供的一种资源。只要是资源，必然要通过 请求 – 处理 – 响应 的方式进行获取。

---

1.1.6 资源的请求方式

客户端请求服务器时，请求的方式有很多种，最常见的两种请求方式分别为 get 和 post 请求。

• get 请求通常用于获取服务端资源（向服务器要资源）
  例如：根据 URL 地址，从服务器获取 HTML 文件、css 文件、js文件、图片文件、数据资源等

• post 请求通常用于向服务器提交数据（往服务器发送资源）
  例如：登录时向服务器提交的登录信息、注册时向服务器提交的注册信息、添加用户时向服务器提交的用户信息等各种数据提交操作

---

1.2 了解Ajax 与 jQuery中的Ajax

1.2.1 Ajax 概念

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

Ajax能让我们轻松实现网页与服务器之间的数据交互。

Ajax的典型应用场景

• 用户名检测：注册用户时，通过 ajax 的形式，动态检测用户名是否被占用

• 搜索提示：当输入搜索关键字时，通过 ajax 的形式，动态加载搜索提示列表

• 数据分页显示：当点击页码值的时候，通过 ajax 的形式，根据页码值动态刷新表格的数据

• 数据的增删改查：数据的添加、删除、修改、查询操作，都需要通过 ajax 的形式，来实现数据的交互

---

1.2.2 了解jQuery中的Ajax

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

jQuery 中发起 Ajax 请求最常用的三个方法如下：

• $.get()
• $.post()
• $.ajax()

---

1.2.3 $.get()函数的语法

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

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

其中，三个参数各自代表的含义如下：

带参数请求示例

$.get('url', function(res) {
   
console.log(res) // 这里的 res 是服务器返回的数据
})

不带参数示例

$.get('url', {
    id: 1 }, function(res) {
   
console.log(res)
})

---

1.2.4 $.post()函数的语法

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

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

其中，三个参数各自代表的含义如下：

示例

$.post(
		'url',           // 请求的URL地址
		{
    bookname: '水浒传', author: '施耐庵', publisher: '上海图书出版社' }, // 提交的数据
		function(res) {
     // 回调函数
			console.log(res)
		}
)

---

1.2.5 $.ajax()函数的语法

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

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

用 $.ajax() 发起 GET 请求示例

$.ajax({
   
	type: 'GET', 										// 请求的方式
	url: 'url', // 请求的 URL 地址
	data: {
    id: 1 },									// 这次请求要携带的数据
	success: function(res) {
    							// 请求成功之后的回调函数
		console.log(res)
	}
})

用 $.ajax() 发起 POST 请求示例

$.ajax({
   
	type: 'POST', 							// 请求的方式
	url: 'url', 							// 请求的 URL 地址
	data:  {
   							    // 要提交给服务器的数据
         bookname: '水浒传',
         author: '施耐庵',
         publisher: '上海图书出版社'
    },									    // 这次请求要携带的数据
	success: function(res) {
    				// 请求成功之后的回调函数
		console.log(res)
	}
})

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

---

二 form表单与模板引擎

2.1 form表单的基本使用

2.1.1 表单 与 组成部分

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

---

组成部分

---

2.1.2 <form>标签的属性

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

action

• 向何处发送表单数据
• 未指定情况下, 默认是当前地址
• 表单提交后, 页面会立即跳转到指定的url地址

target

• 规定在何处打开URL地址
• _blank 新窗口打开
• _self 默认 相同框架中打开

method

• 规定以何种方式提交
• GET 提交数据通过URL地址 少量简单
• POST 通过 form data 提交 大量复杂 文件上传

enctype

• 发送数据之前如何对数据进行编码
• 默认值为 application/x-www-form-urlencoded , 表示在发送前编码所有字符
• multipart/form-data 不对字符编码 使用包含文件上传控件的表单时,必须使用
• text/plain 空格转换为 “+” 加号，但不对特殊字符编码。（很少用）

---

2.1.3 表单的同步提交及缺点解决

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

缺点

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

解决方案：表单只负责采集数据，Ajax 负责将数据提交到服务器

---

2.2 通过Ajax提交表单数据

2.2.1 监听表单提交事件

在 jQuery 中，可以使用如下两种方式，监听到表单的提交事件：

// 第一种
$('#form1').submit(function(e) {
   
	alert('监听到了表单的提交事件')
})

// 第二种
$('#form1').on('submit', function(e) {
   
	alert('监听到了表单的提交事件')
})

---

2.2.2 阻止表单默认提交行为

当监听到表单的提交事件以后，可以调用事件对象的 event.preventDefault() 函数，来阻止表单的提交和页面的跳转，示例代码如下：

$('#form1').submit(function(e) {
   
// 阻止表单的提交和页面的跳转
	e.preventDefault()
})

$('#form1').on('submit', function(e) {
   
// 阻止表单的提交和页面的跳转
	e.preventDefault()
})

---

2.2.3 快速获取表单中的数据

serialize()函数 , 可以一次性获取到表单中的所有的数据。

$(selector).serialize()

serialize()函数示例

<form id="form1">
	<input type="text" name="username" />
	<input type="password" name="password" />
	<button type="submit">提交</button>
</form>

$('#form1').serialize()       // 返回值 由多个数据通过 & 连接
// 调用的结果:  username=用户名的值&password=密码的值

注意：在使用 serialize() 函数快速获取表单数据时，必须为每个表单元素添加 name 属性！