01-Ajax-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_51295096/article/details/119654917

本文详细解析了客户端与服务器的交互，包括URL的组成、网页打开的过程以及Ajax的工作原理。讲解了如何使用XMLHttpRequest对象进行异步数据请求，重点介绍了jQuery中的$.get()和$.ajax()方法。同时，提到了接口的概念，并推荐了Postman作为接口测试工具。通过实例展示了如何使用Postman发起POST请求并查看响应结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

客户端与服务器

客户端：负责获取和消费资源的电脑

客户端：上网过程中，负责存放和对外提供资源的电脑

URL地址

URL:统一资源定位符，用于表示互联网上每个资源的唯一存放位置

eg: https://www.baidu.com

组成部分：

通信协议
服务器名称
具体存放位置
- eg: http://www.taobao.com/mine

分析网页的打开过程

请求->处理->响应

服务器对外提供了哪些资源

数据也是资源

数据是网页的灵魂

网页中如何请求网络数据？

如果要在网页中请求服务器上的数据资源，则需要用到 XMLHttpRequest 对象(简称xhr)。

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

声明一个xhr对象: var xhr = new XMLHttpRequest()

资源的请求方式

最常见的是get和post请求

了解Ajax

Ajax 的全称是 Asynchronous Javascript And XML（异步 JavaScript 和 XML）。

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

Ajax其实就是请求服务器数据的一种方式，一直以为Ajax是jQuery中的东西。jQuery中的Ajax进行了封装，调用更简单。

jQuery中的Ajax

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

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

$.get()语法：

$.get(url,[参数],[回调])

感觉ajax不常用，这里仅做体验，post和ajax用法基本相同。

//带参数
$.get('http://www.liulongbin.top:3006/api/getbooks',{ id: 1 },function(res){
			console.log(res)
		})

//不带参数
$.get('http://www.liulongbin.top:3006/api/getbooks',function(res){
			console.log(res)
		})

参数一般都是对象的形式

小技巧：

Network->XHR 可以过滤其他资源，只保留ajax请求

接口

使用 Ajax 请求数据时，被请求的 URL 地址，就叫做数据接口（简称接口）。同时，每个接口必须有请求方式。一般是get或post

接口测试软件：postman https://www.getpostman.com/downloads/

使用postman时，post方式与get方式不同

1.选择请求的方式

2.填写请求的URL地址

3.选择 Body 面板并勾选数据格式 x-www-form…

4.填写要发送到服务器的数据

5.点击 Send 按钮发起 POST 请求

6.查看服务器响应的结果

百度：在线postman工具，会发现很多web端的请求工具，更方便。