初识ajax

YanMalefeather
160 阅读6分钟

前言

Ajax 是 Asynchronous JavaScript XML 的缩写，被译为异步 JavaScript 和 XML。Ajax 本身并不是一个新技术，而是一个在 2005 年被 Jesse James Garrett 提出的新术语，用来描述一种使用现有技术集合的“新”方法。 当使用 Ajax 模型，HTML 页面能够快速地将数据逐步更新显示在用户界面上，不需要重载（刷新）整个页面。这使得 HTML 页面能成更快速地对用户的操作进行反馈。 尽管 Ajax 中的“X”代表 XML，但由于 JSON 的许多优势，目前 JSON 的使用比 XML 更加普遍。JSON 和 XML 都被用于在 Ajax 模型中封装数据。

01.浏览器&服务器

浏览器概念：

安装并运行在电脑上的一个软件，常见浏览器软件如下：

浏览器作用: 输入网址, 即可浏览相关内容

但浏览器自己并没有这些内容，浏览的这些网页是保存在服务器上面的

服务器概念

服务器概念: 一台24小时开机的电脑, 拥有更大的磁盘空间和访问速度, 一般只有主机和系统
服务器作用: 为访问者提供各种资源 。资源: html文件, css文件, js文件, 视频文件, 音频文件, 数据等

小结：

浏览器访问的资源在服务器上存储，浏览器负责浏览资源, 服务器负责提供资源

02.url网址

概念：url, 统一资源定位符, 标记资源在网络中的位置。也称网址
作用: 标记某个资源在网络中的唯一地址。只有通过URL地址，浏览器才能定位资源的存放位置，从而成功访问到对应的资源。

示例：这里每个url网址都能访问不同的页面和资源

淘宝首页: <https://www.taobao.com/>
京东首页: <https://www.jd.com/>
中国首都博物馆首页: <http://www.capitalmuseum.org.cn/zlxx/zlxx.html>
网易新闻数据: <http://c.m.163.com/nc/article/headline/T1348647853363/0-40.html>

url网址组成

image.png

协议: 协议就是浏览器和服务器之间传输数据的规则, 保证都能读懂对方发来的内容
主机名: 标识服务器在互联网中的唯一地址, 确保能够访问到他
端口号:

端口号有效范围默认在0-65535之间的整数
标识服务器里的不同服务
浏览器默认访问的都是80端口

路径: 确定在服务器上的具体位置

小结

url网址的作用是用来标记资源的位置，url网址的4个组成部分是协议, 主机名, 端口号, 资源路径

03.请求和响应

浏览器和服务器之间的通信过程, 分为两个步骤： 请求和响应

  1. 请求: 浏览器, 通过网络去服务器要资源的过程, 叫做 "请求"
  2. 响应: 服务器, 通过网络给浏览器返回资源的过程, 叫做"响应" image.png 在这个过程中，浏览器是主动的，服务器是被动的。

实操验证

  1. 打开浏览器, 访问www.baidu.com, 并右键检查, 选择Network选项卡 image.png
  2. 这里每一行, 都是浏览器发送的一次请求 image.png
  3. 点击后, 会先看到请求的具体url网址 image.png request： 请求； response： 响应
  4. 点击右侧response是响应的结果 image.png
  5. 点击右侧preview, 是浏览器试着对响应内容进行格式化 image.png

小结

请求是浏览器通过url去获取资源的过程，响应是服务器返回资源的过程

04.响应资源划分

响应的资源类型有html, css, js, 图片, 音频, 视频, JSON字符串数据等等

05.JSON

1、JSON（全称：JavaScript Object Notation）是一种数据交换格式，它本质上是用字符串的方式来表示对象或数组
2、JSON 数据：用字符串的方式来表示的对象或数组类型的数据

  • 对象格式JSON字符串
    • key必须用双引号包起来
    • value 的值只能是字符串、数字、布尔值、null、数组、对象类型（可选类型只有这 6 种）
const user = `{
 "name": "小红",
 "age": 20,
 "marry": true,
 "weight": 80,
 "hobby": ["吃饭", "睡觉", "打豆豆"],
 "address": {
  "province": "辽宁省",
  "city": "大连市"
 }
}`
  • 数组格式的 JSON 数据，最外层使用 [ ] 进行包裹，内部的每一项数据之间使用英文的 , 字符串双引号, 数据项用逗号隔开。
  • 其中：每一项的值类型只能是字符串、数字、布尔值、null、数组、对象这 6 种类型之一。

配套API

JSON.stringify(JS数据类型); JSON.parse(JSON字符串)

// 目标: 把JS数据类型 ==> 转成JSON字符串
// 语法: JSON.stringify(JS数据类型)
// 返回值: JSON字符串
let obj = {
    username: '小马',
    age: 16,
    sex: '男'
}
let resultStr = JSON.stringify(obj)
console.log(resultStr); // '{"username":"小马","age":16,"sex":"男"}'


// 目标: 把JSON字符串 ==> 转成JS数据类型
// 语法: JSON.parse(JSON字符串)
// 返回值: JS数据类型
let jsonStr = '{"username":"小马","age":16,"sex":"男"}'
let result = JSON.parse(jsonStr)
console.log(result); // {username: '小马', age: 16, sex: '男'}

06.Ajax讲解

Ajax[ˈeɪdʒæks], 是一种在JS代码中发请求并获取响应数据的技术

image.png

使用场景

不刷新页面的情况，从服务器获取数据，以更新页面
1、比如验证手机号是否在服务器已经注册过了

image.png

2、根据输入的搜索关键字, 联想菜单提示数据切换

image.png

3、根据增和删除, 修改页面数据

image.png

07.用axios发起ajax请求

axios和ajax

axios是别人封装好的，用来发ajax请求的工具。

axios的使用

  1. 先引入axios.js文件到自己的网页中
    axios.js文件链接: cdn.jsdelivr.net/npm/axios@0…
  2. axios的使用语法
axios({
    url: '请求的URL网址',
    method: '请求的方法'
}).then((结果变量名) => {
    // .then 用来指定请求成功之后的回调函数
    // 形参中的 result 是请求成功之后的结果
})

示例

<!DOCTYPE html>
<html lang="en">
  <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>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"></script>
  </head>
  <body>
    <h1>第一个ajax程序。请在控制台看打印输出</h1>
    <script>
      axios({
        url: 'http://ajax-api.itheima.net/api/province',
        method: 'GET'
      }).then(res => {
        console.log(res)
      })
    </script>
  </body>
</html>
  • 请求的url地址, 就是标记资源的url网址省份列表
  • 请求的方法是'GET'固定字符串, 代表获取数据动作
  • 运行后结果, 在控制台可以看到, 请求并接收到此url网址返回的响应结果打印的是axios结果对象, 而响应的真正数据在data属性下包裹着

08.概念-接口相关

接口

接口是提供数据服务的url网址。

使用 Ajax 技术请求数据时，被请求的 URL 网址，就叫做数据接口（简称：接口或 API 接口）。

同时，每个接口必须有对应的请求方式。

接口文档

是接口使用说明书

服务器会把一些接口地址罗列整理到一个文档上

  • 可能一张纸记录的 (太low)
  • 可能微信/qq, 打字告诉你 (太low)
  • 可能用一些工具生成接口文档网页 (标准): www.apifox.cn/apidoc/shar…

接口文档格式

image.png

09.语法_axios请求携带查询参数

axios传参的语法

axios({
    url: '请求地址',
    method: '请求方式',
    params: {
        // 后端规定的参数名: 前端准备给后端的值
    }
}).then(result => {
    console.log(result)
})

示例1

获取指定的省份的城市

GET方式请求url网址: ajax-api.itheima.net/api/city, 参数名为pname, 值为省份名字

axios({
    url: 'http://ajax-api.itheima.net/api/city',
    method: 'GET',
    params: {
        pname: '辽宁省', // 告诉后台, 我要获取辽宁省下的城市列表
    }
}).then(result => {
    console.log(result)
})

示例2

获取获取某个城市下的地区列表

GET方式请求url地址: ajax-api.itheima.net/api/area

  • 参数如下
    • pname: 省份名字
    • cname: 城市名字
  • 返回值: 地区名字列表
// 携带多个参数
axios({
    url: 'http://ajax-api.itheima.net/api/area',
    method: 'GET',
    params: {
        pname: '辽宁省', // 告诉后台, 我要获取辽宁省下的城市列表
        cname: '大连市'
    }
}).then(result => {
    console.log(result);
})
avatar
文章
阅读
粉丝