服务器的基本概念与jQuery使用Ajax
一，客户端与服务器
- 上网过程中，负责存放和对外提供资源的电脑，叫做服务器。
- 上网过程中，负责获取和消费资源的电脑，叫做客户端。
二，URL地址
- 概念
URL（全称是UniformResourceLocator）中文叫统一资源定位符，用于标识互联网上每个资源的唯一存放位置。浏览器只有通过URL地址，才能正确定位资源的存放位置，从而成功访问到对应的资源。
- URL地址的组成部分
- 客户端与服务器之间的通信协议
- 存有该资源的服务器名称
- 资源在服务器上具体的存放位置
三，客户端与服务器的通信过程
客户端与服务器之间的通信过程，分为 请求 – 处理 – 响应 三个步骤。
网页中的每一个资源，都是通过 请求 – 处理 – 响应 的方式从服务器获取回来的。
资源的请求方式
客户端请求服务器时，请求的方式有很多种，最常见的两种请求方式分别为 get 和 post 请求。
- get 请求通常用于获取服务端资源（向服务器要资源）
例如：根据 URL 地址，从服务器获取 HTML 文件、css 文件、js文件、图片文件、数据资源等 - post 请求通常用于向服务器提交数据（往服务器发送资源）
例如：登录时向服务器提交的登录信息、注册时向服务器提交的注册信息、添加用户时向服务器提交的用户信息等各种数据提交操作
四，Ajax
- 概念
Ajax 的全称是 Asynchronous Javascript And XML（异步 JavaScript 和 XML）。
通俗的理解：在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式，就是Ajax。
- jQuery中的Ajax
浏览器中提供的 XMLHttpRequest 用法比较复杂，所以 jQuery 对 XMLHttpRequest 进行了封装，提供了一系列 Ajax 相关的函数，极大地降低了 Ajax 的使用难度。
jQuery 中发起 Ajax 请求最常用的三个方法如下：
- $.get()
- $.post()
- $.ajax()
①$.get()发起带参数的请求
<!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="./lib/jquery.js"></script>
</head>
<body>
<button id="btnGET">发送带参数get请求</button>
<script>
$(function() {
$('#btnGET').on('click', function() {
$.get('请求的接口地址', {
id: 带的参数
}, function(res) {
//打印返回的数据对象
console.log(res);
})
})
})
</script>
</body>
</html>
②$.post()向服务器提交数据
<!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="./lib/jquery.js"></script>
</head>
<body>
<button id="btnPOST">发起post请求</button>
<script>
$(function() {
$('#btnPOST').on('click', function() {
$.post('请求的接口地址', {
发送的数据写这里
}, function(res) {
console.log(res);
})
})
})
</script>
</body>
</html>
③$.ajax()函数的语法
-
使用$.ajax()发起GET请求
<!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="./lib/jquery.js"></script> </head> <body> <button id="btnAjax">使用$.ajax发送get请求</button> <script> $(function() { $('#btnAjax').on('click', function() { $.ajax({ type: 'get', url: '请求的接口地址', data: { id: 带的参数 }, success: function(res) { console.log(res); } }) }) }) </script> </body> </html> -
使用$.ajax()发起POST请求
<!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="./lib//jquery.js"></script> </head> <body> <button id="ajaxPost">使用$.ajax发送psot请求</button> <script> $(function() { $('#ajaxPost').on('click', function() { $.ajax({ type: "POST", url: "请求的接口地址", data: { 发送的数据写这里 }, success: function(res) { console.log(res); } }) }) }) </script> </body> </html>
535
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
