客户端与服务器
服务器: 上网过程中,负责存放和对外提供资源的电脑
客户端: 上网过程中,负责获取和消费资源的电脑
URL地址
URL地址用于标识互联网上每个资源的唯一存放位置
浏览器只有通过URL地址,才能正确定位资源的存放位置,从而成功访问到对应的资源。
URL地址的组成部分
URL地址一般由三部分组成:
🍥 客户端与服务器之间的通信协议
🍥 存有该资源的服务器名称
🍥资源在服务器上具体的存放位置
客户端与服务器的通信过程
图解客户端与服务器的通信过程
注意:
🍥客户端与服务器之间的通信过程,分为 请求–>处理–>响应 三个步骤。
🍥网页中的每一个资源,都是通过 **请求–>处理–>响应 **的方式从服务器获取回来的。
基于浏览器的开发者工具分析通信过程
步骤:
🐔打开 Chorme 浏览器
🐼 打开开发者工具
🐨 切换到 Network 面板
🐸 选中 Doc 页签
🐲 刷新页面,分析客户端与服务器的通信过程
网页中如何请求数据
资源的请求方式
最常见的方式有 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>