JavaScript Ajax

最新推荐文章于 2024-10-02 05:39:15 发布

橘颂_Wendy

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量479

点赞数

分类专栏：前端开发学习笔记文章标签： javascript ajax

本文链接：https://blog.csdn.net/weixin_46121269/article/details/126625687

版权

前端开发学习笔记专栏收录该内容

19 篇文章 1 订阅

订阅专栏

文章目录

1、异步请求
2、Ajax技术

1、异步请求

（1）什么是网络

网络Network，是多台互联的计算机组成的对象数据通信结构

物理层面将网络区分为几种网络结构：

局域网：工作在一个局部范围的多台计算机，一般计算机数量不会特别多；大部分情况下都是几十台计算机
城域网：广义上指代工作在一个城市的计算机网络体系
广域网：广义上指代的全球互联网络

为什么要使用网络？

使用网络，可以让工作在不同地域的计算机实现数据共享和数据通信，提高生产力

（2）网络数据共享

计算机和计算机之间，实现网络互联之后，可以通过网络完成数据通信，需要满足如下的条件：

实现互联
约定数据通信格式
- 网络协议：约定传输的是什么数据，什么数据格式
- ip地址：约定传输到那台计算机
- 网络端口：约定传输给那个程序
- 网络路径：访问对应的资源和数据
示例：如百度搜索一个电影- 隐入尘烟

https://www.baidu.com:443/s?wd=隐入尘烟
网络协议：https://
ip地址：www.baidu.com(域名)  和 ip地址绑定，访问域名~网络中的DNS服务器将域名-转换成ip地址
网络端口：:443端口，443端口是https://协议的默认端口，可以省略
网络路径：/s?wd=隐入尘烟
     包含两部分：请求路径-  /s
                请求数据-  ?wd=隐入尘烟

（3）网络传输协议

网络传输协议：network protocal，主要描述了工作在网络中的计算机，进行数据传输的约定/格式；主要包含了协议本身已经协议中要求的数据的格式！

① 常见的网络传输协议

协议	描述
`http://`	超文本传输协议，一般用在网站上使用 `HyperText Transfer Protocal`；专门用于在网络上传输`HTML`文件
`https://`	安全的超文本传输协议，一般用在需要有一定的保密性的网站上使用 `HyperText Transfer Protocal Secrity`；专门在网络上安全的传输`HTML`文件
`ftp://`	文件传输协议 `File Transfer Protocal`；专门在网络上传输二进制文件，如图片、音频、电影…
`smtp://`	邮件传输协议 `Simple Mail Tansfer Protoacl`；专门在网络上传输电子邮件
`pop3://`	邮局协议，专门接受邮件
`ssh://`	隧道协议，专门做远程链接数据通信
…
`tcp`	传输控制协议；工作在网络上的底层协议，是上面一些协议的基础 `Tansfer Control Protocal`
`udp`	广播协议；工作在网络上的底层协议，上面一些协议的基础，经常用于开发游戏
`ip`	数据包协议，工作在网络的底层协议，是`tcp/udp`协议的基础

思考：如果一个网页的访问地址是https://www.sina.com.cn，是否可以通过如下方式访问：

ftp://www.sina.com.cn
tcp://www.sina.com.cn

无法访问，数据访问时，约定的协议格式必须一致

② OSI/RM网络互联模型

网络协议，主要是由ECMA(欧洲计算机制造商协会联盟)旗下的ISO(国际标准化组织)制定并推行的！

1977年制定并推行了自己的网络互联开发模型：简称网络数据传输协议，OSI/RM(Open System Interconnection/References Model)模型；总共将计算机工作流程划分七层领域

拓展：在OSI/RM模型的基础上，网络软件开发中衍生出了TCP四层模型

（4）网络传输端口

一台计算机中可能安装多个软件，问题：如果这台计算机接受到一个数据，这个数据应该交给那个软件呢？

计算机中分配了多个通信端口0~65535，分别提供给应用程序完成数据通信使用，每个端口只能分配给唯一的一个软件；一个软件可以同时使用多个端口；（一个手机号码只能分配给一个人使用；一个人可以有多个手机号码）

注意：开发应用软件时6000(3000/8000)以下的端口尽量不要使用（大部分6000以下的的端口都是分配给操作系统或者预留给操作系统使用的）

拓展：查看自己电脑上的一些通信端口

打开cmd命令行窗口，执行命令查看通信端口
查看当前计算机的所有通信端口
netstat -ano

软件开发中，常用的一些端口：

端口	描述
80	浏览器软件，访问`http://`协议使用
443	浏览器软件，访问`https://`协议使用
20/21	`FTP`软件在访问`ftp://`协议使用
110	`smtp`邮件协议使用
3306	`mysql`数据库访问端口
22	`ssh`协议访问端口
…	其他常见协议，建议平时有时间的时候就多百度一下

（5）关于IP地址

IP地址：Internet Protocal Address，描述了网络协议地址；就是在网络上的给每个计算机分配唯一一个地址来标识当前计算机！

主流的IP地址，主要有两种格式：

IPv4：以四段、8位二进制数据标识的地址：
- 二进制：00000000.00000000.00000000.00000000~11111111.11111111.11111111.11111111
- 十进制：0.0.0.0 ~ 255.255.255.255
- 目前市场主流的IP地址
IPv6：以十六进制的方式描述计算机的地址
- 本地链接 IPv6 地址. . . . . . . . : fe80::b097:32a3:1921:95c4%14

IPv4不同的地址段，描述的主体不同：

A类地址：1.0.0.0~126.0.0.0，可以用来描述1亿多个主机地址
- 首位地址：1~126，都是A类网络地址
- 局域网：10.10.x.x，是A类网络的局域网地址
B类地址：128.0.0.0~191.255.255.255，可以用于容纳16382 * 6W左右主机
- 首位地址：128~191，都是B类地址
C类地址：192.0.0.0~223.255.255.255可以用于容纳209W * 254左右主机
- 首位地址：192~233
- 局域网：192.168.x.x，是C类网络的局域网地址
D/E类地址：保留地址，主要用于实验室做实验使用、特定机构使用

一个局域网可以容纳多少台电脑？

一个局域网可以容纳多少台电脑，除了和ip地址有关，还和子网掩码有关

子网掩码：255.255.0.0，同一个网络中，描述了前两端ip地址相同的计算机属于同一个网络
192.168.100.100
192.168.6.135
192.200.100.101不属于上面的局域网

子网掩码：255.255.255.0，同一个网络中，描述了前三段ip地址相同的计算机属于同一个网络
192.168.6.100
192.168.6.135
192.168.10.100不属于上面的局域网

查看自己的ip地址，打开cmd命令提示符窗口，执行命令ipconfig可以查看地址
C:\Users\MOUWB> ipconfig

Windows IP 配置


无线局域网适配器 本地连接* 1:

   媒体状态  . . . . . . . . . . . . : 媒体已断开连接
   连接特定的 DNS 后缀 . . . . . . . :

无线局域网适配器 本地连接* 2:

   媒体状态  . . . . . . . . . . . . : 媒体已断开连接
   连接特定的 DNS 后缀 . . . . . . . :

以太网适配器 以太网:

   连接特定的 DNS 后缀 . . . . . . . :
   本地链接 IPv6 地址. . . . . . . . : fe80::b097:32a3:1921:95c4%14
   IPv4 地址 . . . . . . . . . . . . : 192.168.6.135
   子网掩码  . . . . . . . . . . . . : 255.255.255.0
   默认网关. . . . . . . . . . . . . : 192.168.6.1

无线局域网适配器 WLAN:

   媒体状态  . . . . . . . . . . . . : 媒体已断开连接
   连接特定的 DNS 后缀 . . . . . . . :

以太网适配器 蓝牙网络连接:

   媒体状态  . . . . . . . . . . . . : 媒体已断开连接
   连接特定的 DNS 后缀 . . . . . . . :

（6）前后端分离开发

这是一种软件开发方式，流行于2016年之后…

前端：和用户可视界面相关的操作项目
后端：管理数据库数据、完成各种业务流程运算的项目

前后端分离开发：

前端开发人员：开发前端视图应用，完成接口数据的请求和渲染
后端开发人员：开发服务端应用，完成数据接口的开发
最终完成项目的时候，前后端人员对接口请求和数据返回进行联调（联合调试）保障数据正确性

前后端分离开发中，一些常见专业术语：

接口：后端提供的，一个可以获取数据的url地址
请求：前端应用中，发送的url地址，地址一旦发送就会从服务器请求数据；称为request
响应：后端接受到请求后，返回的数据包装成响应对象，称为response

关于前后端开发联调规范：

一般项目开发中，后端开发人员都需要给前端开发人员提供一个接口文档，描述了接口的访问地址和访问格式；这样前端开发人员就可以通过接口文档正确调用后端接口地址，完成数据请求

注意：大部分中小型公司，后端太懒没有文档，有些是口述的形式、有些是记事本随手记格式

接口文档的编写：参考附件-接口文档手册.docx

2、Ajax技术

（1）什么是Ajax

Ajax是一个前端用于异步请求的技术，是一系列技术的结合

Ajax：Asynchronous JavaScript And XML技术，描述了一种通过JavaScript技术完成异步XML格式数据交互的技术，主要通过JavaScript XMLHttpRueset异步对象完成XML格式文件的处理；早期的Ajax就是异步交互XML格式的数据的，后来通过JSON格式的数据替代了XML格式；但是Ajax名称依然沿用！

<!-- xml: 可扩展标记语言，主要用于数据传输和项目配置 -->
<班级>
	<名称>ABC</名称>  
  <班长>张三</班长>
  <学员数量>40</学员数量>
  <学员s>
  	<学员>
     	<编号>01</编号> 
      <姓名>李四</姓名>
    </学员>  
  </学员s>
</班级>

<!-- json 格式：替代xml传输数据 -->
{ 名称: "ABC", 班长: "张三", 学员数量：40, 学员s: [{编号：01, 姓名："李四"}]}

Ajax中的各项技术：
- XMLHttpRequest：JavaScript异步对象
- json数据：json字符串和json对象之间进行切换stringify() / parse()
- DOM渲染：接口返回的数据，我们需要在HTML网页中渲染展示

（2）基本语法

Ajax作为一个异步请求，包含了5个步骤：准备(创建对象)、连接服务器、发送请求、处理请求、处理响应

0准备：创建异步对象，前端操作
1连接服务器：打开和指定接口地址的连接、前端操作
2发送请求：通过异步对象发送请求和需要的参数数据，前端操作
3处理请求：后端操作
4处理响应：获取到接口返回的数据，DOM操作在页面中渲染数据，前端操作

// 1、准备
var http = new XMLHttpRequest()

// 2、连接服务器
http.open('GET', 'https://www.example.com')

// 3、发送请求、参数
http.send("city=郑州")

// 4、处理响应数据
http.onreadystatechange = function() {
  // 保障当前是最后一个阶段，并且接口正确返回了数据
  // readState : 0 / 1 / 2 / 3 / 4(接口返回数据)
  // status: 服务状态码，2xx开头表示正确；3xx开头表示重定向；4xx开头表示请求错误；5xx开头表示服务器内部操作
  if(http.readyState===4 && http.status === 200) {
    // 获取服务器返回的数据
    var txt = http.responseText // 固定语法，获取返回的文本数据
    // DOM操作处理数据
    // ...
  }
}

代码操作：

<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="container">
    <input type="text" name="city" id="city">
    <button id="get-weather">获取天气信息</button>
    <ul>
      <li id="weather"></li>
    </ul>
  </div>

  <script>
    // 获取需要的标签
    var _city = document.querySelector("#city")
    var _btn = document.querySelector("#get-weather")
    var _li = document.querySelector("#weather")

    // 添加事件
    _btn.onclick = function () {

      // 获取城市名称，并判断城市名称不能为空
      var _cityName = _city.value
      if (_cityName.trim() === "") {
        alert("城市名称不能为空")
        return
      }
      console.log(_cityName)

      // Ajax操作
      // 1、创建对象
      var http = new XMLHttpRequest()

      // 2、连接服务器
      http.open('GET', 'https://v0.yiketianqi.com/api?unescape=1&version=v91&appid=43656176&appsecret=I42og6Lm&city=' + _cityName)

      // 3、发送请求
      http.send()

      // 4、处理响应数据
      http.onreadystatechange = function () {
        if (http.readyState === 4 && http.status === 200) {
          // 获取天气数据
          var txt = http.responseText

          // 转换成JSON对象
          var obj = JSON.parse(txt)
          console.log(obj, "获取到的天气信息")

          // DOM操作
          _li.innerText = obj.data[0].narrative
        }
      }
    }
  </script>
</body>

</html>

（3）常见请求方式

HTTP1.1规范中，将浏览器客户端跟服务器之间的请求，区分8种请求方式：

GET：发送请求，一般向服务器请求获取数据，参数拼接在url地址中出现【熟练】
POST：发送请求，一般向服务器请求新增数据，参数一般包含在请求体中【熟练】
PUT：发送请求，一般向服务器请求更新数据，参数一般包含在请求体中【熟悉】
DELETE：发送请求，一般向服务器请求删除数据，参数拼接在url地址中出现【熟悉】
HEAD：发送请求，一般向服务器请求响应头数据，经常用来测试响应数据格式【了解】
TRACE：发送请求，一般给服务器发送心跳请求，测试服务器是否存活【了解】
OPTIONS：发送请求，一般获取请求和响应配置数据【了解】
CONNECT：发送请求，一般用于保持长连接进行数据交互【了解】

补充1：关于一个请求的格式

浏览器客户端发送的请求，就是发送了一个url地址；浏览器底层其实将用户发送的url地址以及浏览器本身的一些信息包装成了一个请求对象进行发送，主要包含：

请求地址：url地址，https://www.example.com
请求方式：操作数据的方式，GET/POST..
请求头：请求的格式数据
请求体：包装请求的对象

补充2：GET/POST请求的区别

面试题：简述GET请求和POST请求区别？

总- GET请求和POST请求都是HTTP规范中定义的请求方式，描述了客户端向服务器发送请求完成后续操作的过程

分- GET请求在规范中主要用于向服务器请求获取数据，也可以附带字符串参数，参数会拼接在url地址的后面，参数的长度收到服务器限制；请求效率非常高，浏览器地址栏、超链接、Ajax都可以发送GET请求

分- POST请求在规范中主要用于向服务器新增数据，但是项目开发中我们一般对于给服务器提交比较敏感的数据时，会使用POST请求将参数包装在请求中进行传递，既可以传送字符串数据，也可以传送二进制数据，如实现文件上传等操作；传递参数的大小受到服务器的限制；请求效率相对GET没有那么优秀，但是数据安全性得到了一定的保障；一般网页中我们通过表单、Ajax发送POST请求

总- 网页中实现页面跳转、请求一些不敏感的数据如搜索，这些都可以通过效率较高的GET完成数据的请求操作；网页中一些包含敏感数据的操作如登录、注册、转账等建议使用POST请求完成数据操作

（4） GET/POST请求

JavaScript Ajax可以操作HTTP规范中的各种请求方式，常用的GET/POST请求

① get请求

// 1、创建对象
var _http = new XMLHttpRequest()

// 2、打开服务器连接
// 附带参数：参数拼接格式一定要正确,?name=tom&age=20&gender=1
_http.open('GET', 'http://www.example.com?name=tom&age=20&gender=1')

// 3、发送请求
_http.send()

// 4、处理返回数据
_http.onreadystatechange = function() {
  // 判断数据正确返回
  if(_http.readyState === 4 && _http.status === 200) {
    // 获取服务器接口数据
    var _txt = _http.responseText
    // DOM操作数据
    // ...
  }
}

② post请求

// 1、创建对象
var _http = new XMLHttpRequest()

// 2、打开服务器连接
_http.open('POST', 'https://www.example.com')

// 3、设置请求头
_http.setRequestHeader('content-type', 'application/x-www-form-urlencoded')

// 4、发送请求
// 附带参数，以字符串的方式添加参数
_http.send('username=admin&userpass=123')

// 5、处理响应
_http.onreadystatechange = function() {
  // 判断数据是否正确返回
  if(_http.readyState === 4 && _http.status === 200) {
    // 获取返回的数据
    var _txt = _http.responseText
    // DOM操作
    // ...
  }
}

（5）案例：快递单号查询

接口说明手册：

属性	描述
接口地址	https://www.showapi.com/ 注册登录，搜索快递查询接口找到需要的接口
请求方式	`GET`
请求参数	- `mailNo`:快递单号
返回数据

该快递查询接口开发完成后，用户可以在页面中输入一个快递单号，点击查询后展示快递物流信息