这是我参与「第五届青训营」伴学笔记创作活动的第 8 天

概述及基本使用

客户端与服务器

1. 服务器：负责存放和对外提供资源的电脑
2. 客户端：负责获取和消费资源的电脑

url（统一资源定位符）地址

标识互联网上每个资源的唯一存放位置，由三部分组成：

1. 客户端与服务端之间的通信协议
2. 存有该资源的服务器名称
3. 资源在服务器上具体的存放位置

客户端和服务器的通信过程

1. 客户端和服务器之间的通信过程，分为 请求-处理-响应 三个步骤
2. 网页中的每一个资源，都是通过请求-处理-响应 的方式从服务器获取回来的
3. 如果要请求服务器上的数据资源，就会用到XMLHttpRequest对象（简称xhr），是浏览器提供的js成员

资源请求方式

1. get请求：获取服务端资源

例如根据url地址，从服务器获取HTML、css文件、js文件、图片资源、数据资源等

2. post请求：向服务器提交数据

例如登录信息、注册信息、数据提交操作

AJAX概述

• AJAX(Asynchronous JavaScript and XML) 异步的JavaScript and XML
• 是一种 实现网页和服务器之间数据交互的 交互性更强的Web技术（而非xhr对象）
• 是一种在无需加载整个网页的情况下，能够更新部分网页的技术

jQuery中的AJAX

jQuery中Ajax请求最常用的三个方法如下：

1. $.get（） 获取服务器数据

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

        $("#get").on("click", function () {
          $.get("http://www.liulongbin.top:3006/api/getbooks", function (res) {
            console.log(res);
          });
        });

• url ：必选参数，要请求的资源地址

• data ：可选参数，请求资源期间要携带的参数

• callback ：可选参数，请求成功时的回调函数

2. $.post（） 向服务器提交数据

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

        $("#post").on("click", function () {
          $.post("http://www.liulongbin.top:3006/api/addbook", {bookname:"eee",author:2,publisher:3},function (res) {
            console.log(res);
          });

• url ：必选参数，要请求的资源地址

• data ：可选参数，要提交的数据

• callback ：可选参数，请求成功时的回调函数

3. $.ajax（） 既可以提交也可以获取数据

$.ajax({
    type:"",
    url:"",
    data:{}
    success:function(res){}
})

          $.ajax({
            type: "POST",
            url: "http://www.liulongbin.top:3006/api/addbook",
            data: {
              bookname: "前端",
              author: "小李",
              publisher: "可每大学",
            },
            success: function (res) {
              console.log(res);
            },
          });

• type ：请求的方式 GET or SET
• url ：请求的url地址
• data ：请求携带的数据
• success ：请求成功之后的回调函数

接口

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