Ajax第一天学习总结—— 客户端与服务器、URL地址、客户端与服务器的通信过程、服务器对外提供的资源、jQuery中的Ajax、接口、案例-图书管理、案例-聊天机器人

最新推荐文章于 2022-03-10 21:45:14 发布

李穩钰

最新推荐文章于 2022-03-10 21:45:14 发布

阅读量388

点赞数 2

分类专栏： Ajax

本文链接：https://blog.csdn.net/weixin_52819925/article/details/119854413

版权

(一)客户端与服务器

1.服务器

上网的本质目的：通过互联网的形式来 获取和消费资源

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

在这里插入图片描述

2.客户端

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

在这里插入图片描述

(二)URL地址

1.URL的概念

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

2.URL的组成

URL地址一般由三部分组成:

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

在这里插入图片描述

(三)客户端与服务器的通信过程

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

在这里插入图片描述

注意：

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

2.基于浏览器的开发者工具分析通信过程

在这里插入图片描述

步骤：

打开Chorme浏览器
Ctrl + Shift + I（F12） 打开 Chrome 的开发者工具
切换到 Network 面板
选中Doc 页签
刷新页面，分析客户端与服务器的通讯过程

(四)服务器对外提供的资源

1.常见资源

在这里插入图片描述

2.数据也是资源

网页中的数据，也是服务器对外提供的一种资源，例如股票数据，各行业排行榜等

HTML是网页的骨架
CSS是网页的颜值
Javascript是网页的行为
数据，则是网页的灵魂

3.网页中如何请求数据

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

在这里插入图片描述

如果要在网页中请求服务器上的数据资源，需要用到 XMLHttpRequest 对象

XMLHttpRequest（简称 xhr）是浏览器提供的JS成员，通过它，可以请求服务器上的数据资源

最简单的用法 var xhrObj = new XMLHttpRequest()

4.资源的请求方式

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

get 请求，通常用于 获取服务器资源（要资源）

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

例如：登录时，向服务器 提交登录信息、注册时向服务器 提交注册信息、添加用户时向服务器 提交用户信息等各种 数据提交操作

(五)了解Ajax

1.Ajax

Ajax 的全称是 Asynchronous JavaScript And XML
Ajax = 异步 JavaScript 和 XML 或者是 HTML（标准通用标记语言的子集）。
Ajax 是一种用于创建快速动态网页的技术。
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

通俗理解：在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式，就是Ajax

2.为什么学习Ajax

之前所学的技术，只能把网页做的更美观漂亮，或添加一些动画效果，但还是，Ajax能让我们轻松实现网页与 服务器之间的 数据交互

在这里插入图片描述

3.Ajax的应用场景

场景一：用户名检测

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

在这里插入图片描述

场景二：搜索提示

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

在这里插入图片描述

场景三：数据分页显示

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

在这里插入图片描述

场景四：数据的增删改查

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

在这里插入图片描述

(六)jQuery中的Ajax

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

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

$.get() get方式请求，用于获取数据
$.post() post方式请求，用于提交数据
$.ajax() 比较综合，既可以获取数据，又可以提交数据

1.`$.get()`函数

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

语法：

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

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

注意：这个快捷方法不支持错误回调函数，如果要处理错误请使用$.ajax()

1.1`$.get()`发起不带参数的请求

使用 $.get()函数发起不带参数的请求时，直接提供给 请求的 URL 地址 和 请求成功之后的回调函数 即可

示例代码：

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/jquery.js"></script>
</head>

<body>
  <button id="btnGET">发起不带参数的GET请求</button>

  <script>
    $(function () {
   
      $('#btnGET').on('click', function () {
   
        $.get('http://www.liulongbin.top:3006/api/getbooks', function (res) {
   
          console.log(res) // 这里的 res 是服务器返回的数据 
        })
      })
    })
  </script>
</body>

</html>

在这里插入图片描述

1.2`$.get()`发起携带参数的请求

使用$.get()发起携带参数的请求，那么携带的参数应该写在第二个参数的位置

示例代码：

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/jquery.js"></script>
</head>

<body>
  <button id="btnGETINFO">发起带参数的GET请求</button>

  <script>
    $(function () {
     
      $('#btnGETINFO').on('click', function () {
     
        $.get('http://www.liulongbin.top:3006/api/getbooks', {
      id: 1 }, function (res) {
     
          console.log(res)
        })
      })
    })
  </script>
</body>

</html>

在这里插入图片描述

2.`$.post()` 函数

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

语法：

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

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

注意：这个快捷方法不支持错误回调函数，如果要处理错误请使用$.ajax()

`$.post()`向服务器提交数据

使用 $.post() 向服务器提交数据的示例代码如下：

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/jquery.js"></script>
</head>

<body>
  <button id="btnPOST">发起POST请求</button>

  <script>
    $(function () {
     
      $('#btnPOST').on('click', function () {
     
        $.post(
          'http://www.liulongbin.top:3006/api/addbook',  //请求的URL地址
          {
      bookname: '水浒传00', author: '施耐庵00', publisher: '天津图书出版社' },  //提交的数据
          function (res) {
      //回调函数
            console.log(res)
          })
      })
    })
  </script>
</body>

</html>

最低0.47元/天解锁文章

李穩钰

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Ajax第一天学习总结—— 客户端与服务器、URL地址、客户端与服务器的通信过程、服务器对外提供的资源、jQuery中的Ajax、接口、案例-图书管理、案例-聊天机器人

(一)客户端与服务器1.服务器上网的本质目的：通过互联网的形式来获取和消费资源上网过程中，负责存放和对外提供资源的电脑，叫做服务器2.客户端在上网过程中，负责获取和消费资源的电脑，叫做客户端(二)URL地址1.URL的概念URL（全称是 UniformResourceLocator）中文叫统一资源定位符，用于标识互联网上每个资源的唯一存放位置。浏览器只有通过URL地址，才能正确定位资源的存放位置，从而成功访问到对应的资源2.URL的组成URL地址一般由三部分组成:客
复制链接

扫一扫