客户端与服务器

服务器: 上网过程中,负责存放和对外提供资源的电脑
客户端: 上网过程中,负责获取和消费资源的电脑

URL地址

URL地址用于标识互联网上每个资源的唯一存放位置
浏览器只有通过URL地址,才能正确定位资源的存放位置,从而成功访问到对应的资源。

URL地址的组成部分

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

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


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

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

注意:

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

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

步骤:

🐔打开 Chorme 浏览器
🐼 打开开发者工具
🐨 切换到 Network 面板
🐸 选中 Doc 页签
🐲 刷新页面,分析客户端与服务器的通信过程


网页中如何请求数据

10.31 Ajax基础_javascript

资源的请求方式

最常见的方式有 get 和 post 请求

get 请求通常用于获取服务端资源(向服务器要资源)
例如:
根据 URL 地址,从服务器获取 HTML 文件、css 文件、js 文件、图片文件、数据资源等。

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

什么是 Ajax

在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式,就是 Ajax。

JQuery 中的 Ajax

了解 JQuery 中的 Ajax

JQuery 中对 XMLHttpRequest 进行了封装,并提供了一系列 Ajax 相关的函数。
JQuery 中发起 Ajax 请求最常见的三种方法:

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

$.get()函数

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

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

参数含义 :

参数名

参数类型

是否必选

说明

url

string


要请求的资源地址

data

object


请求资源期间携带的参数

callback

function


请求成功时的回调函数

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

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

$.get('https://www.bilibili.com',function(res){
  console.log(res);//res是服务器返回的数据
})

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/code.jquery.com_jquery-3.7.1.js"></script>
</head>
<body>
    <button id="btnGET">发起不带参数的GET请求</button>
    <script>
        $(function(){
            $('#btnGET').on('click',function(){
                $.get('https://zhenti.burningvocabulary.com/cet6/2023-06/01',function(res){
                    console.log(res);
                })
            })
        })
    </script>
</body>
</html>