• 售前

  • 售后

热门帖子
入门百科

Ajax的根本概念

[复制链接]
明月照大江754 显示全部楼层 发表于 2022-1-16 17:06:25 |阅读模式 打印 上一主题 下一主题
1.可以或许知道和服务器干系的根本概念

1.1 客户端和服务器


我们在上网的过程中,我们的电脑叫客户端,对外发送哀求,有一个大概多个服务器吸收并处置处罚哀求的叫服务器。服务器也就是负责存放和对外提供资源的电脑!
2. URL所在的概念&构成

URL的全称是(UniformResourceLocator ),中文名称叫作,同一资源定位符,用于标识互联网上每个资源的唯一存放位置。欣赏器只有通过URL所在,才气准确定位资源的存放位置,从而乐成访问到对应的资源
2.1 URL的构成
URL的所在一样寻常由三部分构成
*客户端与服务器之间的 通讯协议
*存有该资源的 服务器名称
*资源在服务器上 具体的存放位置
3. 客户端与服务器通讯过程



  • 客户端与服务器之间的通讯过程,分为: 哀求-处置处罚-相应 三个步调
  • 网页中每一个资源,都是通过 哀求-处置处罚-相应 的方式从服务器获取返来的
4. 基于欣赏器工具分析通讯过程



  • 打开Chorme欣赏器
  • Ctrl + Shift + I(F12) 打开 Chrome 的开辟者工具
  • 切换到 Network 面板
  • 选中Doc 页签
  • 革新页面,分析客户端与服务器的通讯过程
5. 服务器对外提供的资源

比如:笔墨内容、图片、音频、视频等等
5.1 数据也是资源
网页中的数据,也是服务器对外提供的一种资源,比方股票数据,各行业排行榜等
6. 网页中怎样哀求数据

如果要在网页中哀求服务器上的数据资源,须要用到 XMLHttpRequest 对象
XMLHttpRequest(简称 xhr)是欣赏器提供的JS成员,通过它,可以哀求服务器上的数据资源
最简朴的用法:
  1. var xhrObj = new XMLHttpRequest()
复制代码
7. 资源的哀求方式

客户端哀求服务器时,哀求的方式 有很多种,最常见的两种哀求方式分别是 get 和 post 哀求


  • get 哀求,通常用于 获取服务器资源(要资源)
    比方:根据 URL 所在,从服务器获取 HTML文件、css文件、js文件、图片文件、数据资源等
  • post 哀求,通常用于 向服务器提交数据(送资源)
    比方:登录时,向服务器 提交登录信息、注册时向服务器 提交注册信息、添加用户时向服务器 提交用户信息等各种 数据提交操纵
8. 什么是Ajax

Ajax 的全称是 Asynchronous JavaScript And XML(异步 JavaScript 和 xml)
普通明确:在网页中利用 XMLHttpRequest 对象和服务器举行数据交互的方式,就是Ajax
9. Ajax应用场景

一:用户名检测
二:搜索提示
三:数据分页体现
四:数据的增编削查
10. jQuery中的Ajax

欣赏器中提供的 XMLHttpRequest 用法比力复杂,以是 jQuery 对 XMLHttpRequest 举行了封装,提供了一系列Ajax干系的函数,极大地 低沉了Ajax的利用难度
jQuery中发起 Ajax 哀求最常用的三个方法如下:


  • $.get() get方式哀求,用于获取数据
  • $.post() post方式哀求,用于提交数据
  • $.ajax() 比力综合,既可以获取数据,又可以提交数据
10.1 $.get() 函数先容 
jQuery 中 $.get() 函数的功能单一,专门用来发起 get 哀求,从而将服务器上的资源哀求到客户端来举行利用


  1. $.get(url,[data],[callback])
复制代码
10.1.2 $.get()发起不带参数的哀求

  1. $.get('url',function(res){
  2.     console.log(res)
  3. })
复制代码
10.1.3 $.get()发起携带参数的哀求

  1. $.get('url',{data:1},function(res){
  2.     console.log(res)
  3. })
复制代码
10.2 $.post() 函数先容:
jQuery 中 $.post() 函数的功能单一,专门用来发起post哀求,从而向服务器提交数据
$.post() 函数的语法如下:


  1. $.post(url,[data],[callback])
复制代码
10.2.1 利用 $.post() 向服务器提交数据的示例代码如下:  
  1. $post({
  2.     url: '',
  3.     function (res) {
  4.         console.log(res)
  5.     },
  6. })
复制代码
10.3 $.ajax() 函数先容
相比于 $.get() 和 $.post() 函数,jQuery 中提供的 $.ajax() 函数,是一个功能比力综合的函数,它允许我们对 Ajax 哀求举行更具体的设置。
$.ajax() 函数的根本语法如下:
  1. $ajax({
  2.     type: '', //请求的方式
  3.     url:'', //请求的地址
  4.     data:(), // 请求要携带的数据
  5.     success: function (res) {} //请求成功后的回调函数
  6. })
复制代码
10.3.1 $.ajax() 发起 get 哀求
利用 $.ajax() 发起 get哀求,只须要把 type属性的值 设置为 ‘get’ 即可
10.3.2 $.ajax 发起 post 哀求
利用 $.ajax() 发起 post哀求,只须要把 type属性的值 设置为 ‘post’ 即可
11. 接口

11.1 接口的概念
利用 Ajax 哀求数据时,被哀求的 URL 所在,就叫做 数据接口(简称接口)。同时,每个接口必须有哀求方式。
比方:
  1. http://www.baidu.top:2022/api/getsb(get请求)
  2. http://www.baidu.top:2022/api/addsb(post请求)
复制代码
11.2 接口的哀求过程(GET方式)

11.3 接口的哀求过程(POST方式)
 
12. 接口测试工具

为了验证接口是否被正常被访问,我们常常须要利用接口测试工具,来对数据接口举行检测
利益:接口测试工具能让我们在 不写任何代码 的环境下,对接口举行 调用测试
常用的就是:PostMan



免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作