前后端交互 - Ajax 和 HTTP（1）- 必掌握知识点 - #博学谷IT学习技术支持#

本文链接：https://blog.csdn.net/weixin_44946585/article/details/125831458

文章目录

Ajax
- 1. 客户端与服务器
form 表单与模板引擎
Ajax 加强
跨域与JSONP
HTTP 协议加强
git
Github
- 1. 了解开源相关的概念
- 2. 远程仓库的使用
Git 分支

Ajax

1. 客户端与服务器

1. 服务器

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

2. URL地址

定义：统一资源定位符，用于标识互联网上每个资源的唯一存放位置。浏览器只有通过URL地址，才能正确定位资源的存放位置，从而成功访问到对应的资源。
URL地址一般由三部组成：
1. 客户端与服务器之间的通信协议
2. 存有该资源的服务器名称
3. 资源在服务器上具体的存放位置

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zjFaHJ2j-1658038662605)(C:\Users\WZX\AppData\Roaming\Typora\typora-user-images\image-20220709183650262.png)]

注意：

1. 客户端与服务器之间的通信过程，分为请求 – 处理 – 响应三个步骤.

2. 网页中的每一个资源，都是通过请求 – 处理 – 响应的方式从服务器获取回来的。

基于浏览器的开发者工具分析通信过程
1. 打开 Chrome 浏览器
2. ctrl+shift+i 打开 Chrome 的开发者工具
3. 切换到 Network 面板
4. 选中 Doc 页签
5. 刷新页面，分析客户端与服务器的通信过程

4. 服务器对外提供了哪些资源

网页中如何请求数据

数据，也是服务器对外提供的一种资源。只要是资源，必然要通过请求 – 处理 – 响应的方式进行获取。
- 如果要在网页中请求服务器上的数据资源，则需要用到 XMLHttpRequest 对象
  - XMLHttpRequest（简称 xhr）是浏览器提供的 js 成员，通过它，可以请求服务器上的数据资源。
  - 最简单的用法 var xhrObj = new XMLHttpRequest()
资源的请求方式
- 客户端请求服务器时，请求的方式有很多种，最常见的两种请求方式分别为 get 和 post 请求。 get 或 post 请求
  - get 请求通常用于获取服务端资源（向服务器要资源）
  - pose 请求通常用于向服务器提交数据（往服务器发送资源）

5. Ajax

定义：Ajax 的全称是 Asynchronous Javascript And XML（异步 Javascript 和 XML）
通俗的理解：在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式，就是 Ajax。
Ajax 能让我们轻松实现网页与服务器之间的数据交互

6. jQuery 中的 Ajax

jQuery 对 XMLHttpRequest 进行了封装，提供了一系列 Ajax 相关的函数，极大地降低了 Ajax 的使用难度。

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

$.get()
- 语法 $.get(url, [data], [callback])
  - url：要请求的资源地址（str 类型）
  - data：请求资源期间要携带的参数（object）
  - callback：请求成功时的回调函数
```
$.get('http://www.liulongbin.top:3006/api/getbooks', {
         id: 1}, function(res) {
         
          console.log(res);
        })
```
$.post()
- 语法$.post(url, [data], [callback])
- url：要提交的资源地址（str 类型）
- data：要提交的数据（object）
- callback：提交成功时的回调函数

$.ajax()

语法

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

7. 接口

使用 Ajax 请求数据时，被请求的 URL 地址，就叫做数据接口（简称接口）。同时，每个接口必须有请求方式。
接口测试工具（PostMan）
1. 优点：接口测试工具能让我们在不写任何代码的情况下，对接口进行调用和测试。
3. 注意：使用 get 时，参数在 Params 面板；使用 post 时，携带的数据在 body 填写
接口文档
1. 定义：接口的说明文档，它是我们调用接口的依据。
2. 组成部分
  1. 接口名称：用来标识各个接口的简单说明，如登录接口，获取图书列表接口等。
  2. 接口URL：接口的调用地址。
  3. 调用方式：接口的调用方式，如 GET 或 POST。
  4. 参数格式：接口需要传递的参数，每个参数必须包含参数名称、参数类型、是否必选、参数说明这4项内容。
  5. 响应格式：接口的返回值的详细描述，一般包含数据名称、数据类型、说明3项内容。
  6. 返回示例（可选）：通过对象的形式，例举服务器返回数据的结构。

form 表单与模板引擎

1. form 表单的基本使用

表单：html中负责数据采集功能

<form> 标签的属性

action
- 属性用来规定当提交表单时，向何处发送表单数据
- 属性的值应该是后端提供的一个 URL 地址，这个 URL 地址专门负责接收表单提交过来的数据（默认值是当前页面 URL）

target

用来规定在何处打开 action URL

它的可选值有 5 个，默认情况下，target 的值是 _self，表示在相同的

值	描述
`_blank`	在新窗口中打开
`_self`	默认。在相同的框架中打开。
`_parent`	在父框架集中打开。（很少用）
`_top`	在整个窗口中打开。（很少用）
`framename`	在指定的框架中打开。（很少用）

method
- 以何种方式把表单数据提交到 action URL
- 可选值：get 、post
- 默认情况下，method 的值为 get，表示通过 URL 地址的形式，把表单数据提交到 action URL
- 注意：
  - GET 方式适合用来提交少量的、简单的数据
  - POST 方式适合用来提交大量的、复杂的、或包含文件上传的数据
  - 实际开发中，表单的 post 提交方式用的最多，很少用 get

enctype

用来规定在发送表单数据之前如何对数据进行编码

其可选值有三个

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

注意：
- 设计到文件上传时，必须设置为 multipart/form-data
- 不涉及文件上传时，直接设置为application/x-www-form-urlencoded即可（不设置就可以了）

表单的同步提交及缺点
1. 表单同步提交：通过点击 submit 按钮，触发提交操作，页面跳转到 action URL 的行为
2. 表单同步提交的缺点：
  1. 整个页面会发生跳转，跳转到 action URL 所指向的地址，用户体验很差
  2. 页面之前的状态和数据会丢失
3. 解决方案：表单值负责采集数据，Ajax 负责将数据提交到服务器

2. 通过 Ajax 提交表单数据

监听表单提交事件

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

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

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

阻止表单的默认行为

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

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

快速获取表单中的数据

serialize()函数

语法 $(selector).serialize()
优点：可以一次性获取到表单中的所有的数据

示例：

<form id="form1">
    <input type="text" name="username" />
    <input type="password" name="password" />
    <button type="submit">提交</button>
</form>
<script>
    $('#form1').submit(function(e) {
           
   // 阻止表单的提交和页面的跳转
    e.preventDefault()
    var data = $(this).serialize()
    // 调用的结果：
    // username=用户名的值&password=密码的值
    console.log(data)
})
</script>

注意：在使用 serialize() 时，必须为每个表单元素添加 name 属性

3. 模板引擎的基本概念

定义：它可以根据程序员指定的模板结构和数据，自动生成一个完整的 HTML 页面
优点：
1. 减少了字符串的拼接操作
2. 代码结构更清晰
3. 使代码更易于阅读与维护

4. art-template 模板引擎

中文官网首页：http://aui.github.io/art-template/zh-cn/index.html

使用步骤

导入

<!-- 在 window 全局，多一个函数，叫做 template('模板的Id', 需要渲染的数据对象) -->
<script src="./lib/template-web.js"></script>

定义数据

var data = {
       name: 'zs', age:20}

定义模板

<script type="text/html" id="tpl-user"></script>

调用 template 函数

var htmlStr = template('tpl-user'), data

渲染 HTML 结构
```
$('#container').html(htmlStr)
```

art-template 标准语法
1. 定义：art-template 提供了 { {}} 这种语法格式，在 { {}} 内可以进行变量输出，或循环数组等操作，这种 { {}} 语法在 art-template 中称为标准语法
2. 输出
```
{
       {
       value}}
{
       {
       obj.key}}
{
       {
       obj['key']}}
{
       {
       a ? b : c}}
{
       {
       a || b}}
{
       {
       a + b}}
```
  在 { {}} 语法中，可以进行变量的输出、对象属性的输出、三元表达式输出、逻辑或输出、加减乘除等表达式输出
3. 原文输出
```
{
       {
       @ value}}
```
  如果要输出的 value 值中，包含了 HTML 标签结构，则需要使用原文输出语法，才能保证 HTML 标签被正常渲染。
4. 条件输出
  
  如果要实现条件输出，则可以在 { {}} 中使用 if…else if… /if 的方式，进行按需输出
```
{
       {
       if value}} 按需输出的内容 {
       {
       /if}}
{
       {
       if vl}} 按需输出的内容 {
       {
       else if v2}} 按需输出的内容 {
       {
       /if}}
```
5. 循环输出
  
  在 { {}} 内，可以通过 each 语法循环数组，当前循环的索引的使用 $index 进行访问，当前的循环项使用 $$value 进行访问
```
{
       {
       each arr}}
	{
       {
       $index}} {
       {
       $value}}
{
       
```