JavaScript ajax 系列一 ajax中的 get post ajax、接口测试插件 PostMan 、两个案例

1. 服务器与客户端

1. 上网过程中，负责存放和对外提供资源的电脑，叫做服务器。
2. 上网过程中，负责获取和消费资源的电脑，叫做客户端。

2. URL地址的概念

URL（全称是UniformResourceLocator）中文叫统一资源定位符，用于标识互联网上每个资源的唯一存放位置。浏览器只有通过URL地址，才能正确定位资源的存放位置，从而成功访问到对应的资源。

URL地址一般由三部组成：

1. 客户端与服务器之间的通信协议（http）
2. 存有该资源的服务器名称 (www.baidu.com)
3. 资源在服务器上具体的存放位置 (wangsihua/p/123456.html)

3. 客户端与服务器的通信过程

客户端与服务器之间的通信过程，分为 请求 – 处理 – 响应 三个步骤。

网页中的每一个资源，都是通过 请求 – 处理 – 响应 的方式从服务器获取回来的。

4. 服务器对外提供的资源

文本内容、img图片、audio音频、video视频还有最主要的 data数据

1. HTML是网页的骨架
2. CSS是网页的颜值
3. Javascript是网页的行为
4. 数据，则是网页的灵魂

4.1 网页中如何请求数据

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

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

		var xhrObj = new XMLHttpRequest()

4.2 资源的请求方式

客户端请求服务器时，请求的方式有很多种，最常见的两种请求方式分别为 get 和 post 请求。

1. get 请求通常用于 获取服务端资源（向服务器要资源）
   例如：根据 URL 地址，从服务器获取 HTML 文件、css 文件、js文件、图片文件、数据资源等

2. post 请求通常用于 向服务器提交数据（往服务器发送资源）
   例如：登录时向服务器提交的登录信息、注册时向服务器提交的注册信息、添加用户时向服务器提交的用户信息等各种数据提交操作

5.0 Ajax

Ajax 的全称是 Asynchronous Javascript And XML（异步 JavaScript 和 XML）。

通俗的理解：在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式，就是Ajax。

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

5.1 jQuery中的Ajax

浏览器中提供的 XMLHttpRequest 用法比较复杂，所以 jQuery 对 XMLHttpRequest 进行了封装，提供了一系列 Ajax 相关的函数，极大地降低了 Ajax 的使用难度。

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

1. $.get()
2. $.post()
3. $.ajax()

6.0 $.get()函数的语法

	语法：
	$.get(url,[data],[callback])
	url 要请求的地址，  data 请求资源期间要携带的参数 ， callback 请求成功后的回调函数
	
	1.发起不带参数的GET请求  （这个是获取所有的数据）
    $(function () {
   
      $('#btnGET').on('click', function () {
   
        $.get('http://www.liulongbin.top:3006/api/getbooks', function (res) {
   
          console.log(res)
        })
      })
    })
	2.发起带参数的GET请求 （这个表示是请求获取 id：1 的这个数据）
	$(function () {
   
      $('#btnGETINFO').on('click', function () {
   
        $.get('http://www.liulongbin.top:3006/api/getbooks', {
    id: 1 }, function (res) {
   
          console.log(res)
        })
      })
    })

6.1 $.post()函数的语法

	语法：
	$.post(url, [data], [callback])
	url 提交数据的地址，  data 要提交的数据 ， callback 数据提交成功后的回调函数

	$(function () {
      （提交 data里的数据）
      $('#btnPOST').on('click', function () {
   
        $.post('http://www.liulongbin.top:3006/api/addbook', {
    bookname: '水浒传',