【前端】Ajax

【前端】Ajax
目录

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

二、了解Ajax

2.1什么是Ajax

2.2Ajax作用

三、jQuery中的Ajax

3.1$.get()函数的语法

3.2$.post()函数的语法

3.3$.ajax()函数的语法

四、接口

4.1接口的概念

4.2接口测试工具

4.3接口文档

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

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

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

最简单的用法 var xhrObj=new XMLHttpRequest()

二、了解Ajax

2.1什么是Ajax

在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式就是Ajax

2.2Ajax作用

Ajax能让我们轻松实现网页与服务器之间的数据交互

三、jQuery中的Ajax

jQuery中发起Ajax请求常用的三个方法：

$.get()

$.post()

$.ajax()

3.1$.get()函数的语法

专门用于发起get请求，从而将服务器上的资源请求到客户端来进行使用。

语法：
```
$.get(url,[data],[callback])
```
```
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>Documenttitle>
    <script src="jquery.min.js">script>
head>
 
<body>
    <button id="btnGET">发起带参数的GET请求button>
    <script>
        $(function () {
            $('#btnGET').on('click', function () {
                $.get('http://www.liulongbin.top:3006/api/getbooks', { id: 1 }, function (res) {
                    console.log(res);
                })
            })
        })
    script>
body>
 
html>
```
3.2$.post()函数的语法

专门用来发起post请求，从而向服务器提交数据。

语法：
```
$.post(url,[data],[callback])
```
3.3$.ajax()函数的语法

功能比较综合的函数，他运行我们对Ajax请求进行更详细的配置。
```
            $.ajax({
                type:'',    //请求的方式  如GET或POST
                url:'',     //请求的URL地址
                data:{},    //这次请求要携带的数据
                success:function(res){} //请求成功之后的回调函数
            })
```
四、接口

4.1接口的概念

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

4.2接口测试工具

Postman:Download Postman | Get Started for Free

vscode添加插件：postcode

4.3接口文档

接口的说明文档，它是我们调用接口的依据。

接口文档的组成部分：
1. 接口名称
2. 接口URL
3. 调用方式
4. 参数格式
5. 响应格式
6. 返回示例（可选）
相关阅读:
苹果从成熟到落地，Apple Newton 背后的工程师们 | 历史上的今天
 delphi 调用编码格式为application/x-www-form-urlencoded
MySql——性能分析
 面了三十个人，说说我的真实感受
 【Mac M2 pro】Linux虚拟机轻装上阵—multipass 尝试
 百数SRM应用，一站式数字化管理供应商关系
 使用 NuGet.Server 创建和部署 ASP.NET Web 应用程序搭建私有Nuget服务器
 Vue.js 原理分析
 孙卫琴的《精通Vue.js》读书笔记-插槽slot的基本用法
 vue基于百度云实现行驶证识别
原文地址：https://blog.csdn.net/qq_45764950/article/details/127885617

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

二、了解Ajax

2.1什么是Ajax

2.2Ajax作用

三、jQuery中的Ajax

3.1$.get()函数的语法

3.2$.post()函数的语法

3.3$.ajax()函数的语法

四、接口

4.1接口的概念

4.2接口测试工具

4.3接口文档