服务器与客户端,Ajax,接口,数据交互
- 1、 服务器&客户端
上网的本质目的:通过互联网的形式来获取和消费资源
- 2、 URL
- URL (全称是UniformResourceLocator) 中文叫统-资源定位符,用于标识互联网.上每个资源的唯一存放位置。
浏览器只有通过URL地址,才能正确定位资源的存放位置,从而成功访问到对应的资源。 - URL地址一般由三部组成:
①客户端与服务器之间的通信协议
②存有该资源的服务器名称
③资源在服务器上具体的存放位置
- URL (全称是UniformResourceLocator) 中文叫统-资源定位符,用于标识互联网.上每个资源的唯一存放位置。
- 3、 客户端与服务器的通信(通信过程分请求-处理-相应三个步骤)
- 4、 服务器对外提供的资源有:文字,图片,音频,视频,数据(网页的灵魂)。
- 5、 网页中如何请求数据
如果要在网页中请求服务器上的数据资源,则需要用到XMLHttpRequest对象。
XMLHttpRequest (简称xhr)是浏览器提供的js成员,通过它,可以请求服务器上的数据资源。
最简单的用法var xhrOlhj = new XMLHttpRequest() - 6、 资源的请求方式
- get请求通常用于获取服务端资源(向服务器要资源)
例如:根据URL地址,从服务器获取HTML文件、css文件、js文件、 图片文件、数据资源等 - post 请求通常用于向服务器提交数据(往服务器发送资源)
例如:登录时向服务器提交的登录信息、注册时向服务器提交的注册信息、添加用户时向服务器提交的用户
信息等各种数据提交操作
- get请求通常用于获取服务端资源(向服务器要资源)
- 7、Ajax(异步JavaScript和XML)
- 即在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式,就是Ajax。
- Ajax负责网页与服务器之间的数据传输(数据交互)
- 典型应用场景
①用户名检测:注册用户时,通过ajax的形式,动态检测用户名是否被占用
②搜索提示:当输入搜索关键字时,通过ajax的形式,动态加载搜索提示列表
③数据分页显示:当点击页码值的时候,通过ajax的形式,根据页码值动态刷新表格的数据
④数据的增删改查:数据的添加、删除、修改、查询操作,都需要通过ajax的形式,来实现数据的交互
- 8、JQuery中的Ajax
(1)将服务器上的资源请求到客户端来进行使用 - $.get(url,[data],[callback])
- url,string,要请求的资源地址
- data,object,请求资源期间要携带的参数,发送到服务器上
- callback,function,请求成功时的回调函数
(2)向服务器提交数据 - $.post(url,[data],[callback])
- url,string,提交数据的地址
- data,object,要提交的数据
- callback,function,数据提交成功时的回调函数
(3) - $.ajax({ type:'', //请求的方式,例如GET或POST url:'', //请求的URL地址 data:{}, //这次请求要携带的数据 success:function(res){} //请求成功后的回调函数 })
- 9、接口
使用Ajax请求数据时,被请求的URL地址,就叫做数据接口(简称接口)。同时,每个接口必须有请求方式。 - 10、接口文档
- 接口文档,顾名思义就是接口的说明文档,它是我们调用接口的依据。好的接口文档包含了对接口URL,参数以及输出内容的说明,我们参照接口文档就能方便的知道接口的作用,以及接口如何进行调用。
- 组成部分
(1)接口名称: 用来标识各个接口的简单说明,如登录接口,获取图书列表接口等。
(2)接口URL: 接口的调用地址。
(3)利用方式: 接口的调用方式,如GET或POST.
(4)参数格式: 接口需要传递的参数,每个参数必须包含参数名称、参数类型、是否必选、参数说明这4项内容。
(5)响应格式: 接口的返回值的详细描述,- 般包含数据名称、数据类型、说明3项内容。
(6)返回示例 (可选) : 通过对象的形式,例举服务器返回数据的结构。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通