Ajax学习(1) 引入+基础知识学习

引入

服务器

网络中负责存放和对外提供资源的电脑,叫做服务器。可以简单把服务器理解为一台电脑,但比个人电脑性能高。

客户端

网路中负责获取和消费资源的电脑,叫做客户端。用户可以通过使用浏览器访问各种资源

URL地址
  • 全称:UniformResourceLocator,中文:统一资源定位符,标识互联网上每个资源的唯一存放位置。浏览器通过URL地址,确定位资源的存放位置,从而访问到对应的资源。

  • URL地址由三部分组成:客户端与服务器之间的通信协议、存有该资源的服务器名称、资源在服务器上具体的存放位置。例如下图(来自网络):

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8Z24oMFf-1649385616084)(C:\Users\mi\AppData\Roaming\Typora\typora-user-images\image-20220406233145264.png)]

图解客户端与服务器的通信过程

(图片来自网络)

在这里插入图片描述

简单来说就是请求–>处理–>响应

网页中请求数据的方式

网页中的数据是服务器提供的一种资源,需要通过请求–>处理–>响应的方式进行获取。

网页请求服务器上的数据资源,要用到 XMLHttpRequest 对象。**XMLHttpRequest(简称 xhr)**是浏览器提供的 js 成员,通过它可以请求服务器上的数据资源。简单用法: var xhrObj = new XMLHttpRequest()

资源的请求方式

客户端请求服务器最常见的两种请求方式为 get 和 post 请求。

(1)get 请求通常用于获取服务端资源
例如:根据 URL 地址,从服务器获取图片、文档等

(2)post 请求通常用于向服务器提交数据
例如:登录和注册时向服务器提交的信息等

Ajax

简介

Ajax 的全称是 Asynchronous Javascript And XML(异步 JavaScript 和 XML)。可以简单理解为在网页中使用 XMLHttpRequest 对象和服务器进行数据交互的方式,就是Ajax。

Ajax的作用是实现网页与服务器之间的数据交互;实际应用有

检测用户名是否被占用、输入搜索关键字会出现提示列表等等

了解jQuery中的Ajax

jQuery 对 XMLHttpRequest 进行了封装,提供了一系列 Ajax 相关的函数,我们能够较轻松地使用Ajax 。其中最常用的三个方法有: . g e t ( ) 、 .get()、 .get().post()、 $.ajax()

$.get()函数的语法

发起 get 请求,请求使用服务器上的资源。

语法:

(1)$.get(url, [data], [callback])

在这里插入图片描述

(2) $.get()发起不带参数的请求

直接提供请求的 URL 地址和请求成功之后的回调函数即可:

$.get('url地址', function(res) {
    console.log(res) // 这里的 res 是服务器返回的数据
})

(3)$.get()发起带参数的请求

$.get('url地址', { id: 1 }, function(res) {
    console.log(res)
})
$.post()函数的语法

发起 post 请求向服务器提交数据。

语法:

(1)$.post(url, [data], [callback])

在这里插入图片描述

(2)$.post()向服务器提交数据

$.post(
   'url地址', // 请求的URL地址
   { xxx: 'xxx', xxx: 'xxx'},
   function(res) { // 回调函数
      console.log(res)
   }
)
$.ajax()函数的语法

jQuery 中提供的 . a j a x ( ) 函 数 , 功 能 比 较 综 合 , 可 以 对 A j a x 请 求 进 行 更 详 细 的 配 置 。 .ajax() 函数,功能比较综合,可以对 Ajax 请求进行更详细的配置。 .ajax()Ajax.ajax() 函数的基本语法如下:

$.ajax({
   type: '', // 请求的方式,例如 GET 或 POST
   url: '',  // 请求的 URL 地址
   data: { },// 这次请求要携带的数据
   success: function(res) { } // 请求成功之后的回调函数
})

(1)使用$.ajax()发起GET请求

$.ajax({
   type: 'GET', 
    ...
})

(2)使用$.ajax()发起POST请求

$.ajax({
   type: 'POST', 
   url: '',  
   data: { // 要提交给服务器的数据
      xxxx: 'xxx',
      xxxx: 'xxx',
      xxxx: 'xxx'
    },
   success: function(res) { 
       console.log(res)
   }
})
接口的概念

使用 Ajax 请求数据时,被请求的 URL 地址,就叫做数据接口(简称接口),每个接口必须有请求方式(get、post)。

接口测试工具:

postman, 安装地址: https://www.getpostman.com/downloads/postman

汉化地址:https://gitee.com/hlmd/PostmanCn

接口文档

接口文档包括:

  • 接口名称:描述各个接口,如登录接口。

  • 接口URL:接口的调用地址。

  • 调用方式:接口的调用方式(get、post)。

  • 参数格式:接口需要传递的参数,每个参数必须包含参数名称、参数类型、是否必选、参数说明。

  • 响应格式:接口的返回值的详细描述,一般包含数据名称、数据类型、以及说明。

  • 返回示例(可选):例举服务器返回数据的结构和形式。

  • 简单示例(来自网络):

    请求的根路径

    http://www.liulongbin.top:3006

    图书列表

    • 接口URL: /api/getbooks
    • 调用方式: GET
    • 参数格式:
    参数名称参数类型是否必选参数说明
    idNumber图书Id
    booknameString图书名称
    authorString作者
    publisherString出版社
    • 响应格式:
    数据名称数据类型说明
    statusNumber200 成功;500 失败;
    msgString对 status 字段的详细说明
    dataArray图书列表
    +idNumber图书Id
    +booknameString图书名称
    +authorString作者
    +publisherString出版社
    • 返回示例:
    {
      "status": 200,
      "msg": "获取图书列表成功",
      "data": [
        { "id": 1, "bookname": "西游记", "author": "吴承恩", "publisher": "北京图书出版社" },
        { "id": 2, "bookname": "红楼梦", "author": "曹雪芹", "publisher": "上海图书出版社" },
        { "id": 3, "bookname": "三国演义", "author": "罗贯中", "publisher": "北京图书出版社" }
      ]
    }
    
    
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

GDUF-LZ

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值