Ajax学习笔记（上）--使用JQuery发送ajax为了让大家更好的理解ajax的使用，先讲jQuery中的ajax操

Ajax（Asynchronous Javascript And XML（异步 JavaScript 和 XML））

作用：用来发送请求的一种方式
实现方式简介：浏览器提供了一个XMLHttpRequest的构造函数，创建的对象用来进行ajax操作
- 为了让大家更好的理解ajax的使用，先讲jQuery中的ajax操作，再将ajax的原生实现和封装。
特点：无需刷新页面，也可以进行请求响应处理（局部刷新）同步和异步的概念

js的语言特性

js是弱类型语言
js是动态语言
js是脚本语言
js是基于对象的语言(面向对象语言)
js是基于原型的语言
js是事件驱动的语言
js是单线程的语言
- 单线程（只有一个人干活）
  - 因为js中具有DOM操作，例如修改元素颜色，单个线程操作不会与其他线程产生干扰
  - es5后js也出现了多线程的概念，但是有限制，多个线程只能进行辅助操作，主线程进行控制
- 多线程（有好多人干活）

同步和异步

同步任务：
- 执行顺序：代码按顺序从上往下一个一个执行。
- 同步任务有哪些：除了异步任务都是同步任务。
异步任务：
- 为什么要有异步任务: 因为某些任务较为耗时，或执行时间不确定，为了避免卡住（阻塞）后续代码，设置为异步任务。
- 常见异步任务有哪些：
  - 定时器
    - 示例：无论定时器的时间为多少，都会比同步任务执行晚。
  - Ajax
- 执行顺序：异步任务的执行一定晚于同步任务

	<script>
    // 同步代码
     console.log('这是第1个代码');
     console.log('这是第2个代码');
     console.log('这是第3个代码');
     console.log('这是第4个代码');
     console.log('这是第5个代码'); 


    // 异步代码：
    setTimeout(function () {
      console.log('这是定时器内的代码');
    }, 0);
    console.log('这是第1个代码');
    console.log('这是第2个代码');
    console.log('这是第3个代码');
    console.log('这是第4个代码');
    console.log('这是第5个代码');


     for (var i = 0; i < 10; i++) {
      console.log(i); // 0-9
    }
    console.log(i); // 10

    for (var i = 0; i < 10; i++) {
      setTimeout(function () {
        console.log(i);
      }, 1000);
    }

    for (var i = 0; i < 10; i++) {
      setTimeout(function () {
        console.log(i);
      }, 0);
    }

  </script>

ajax发送数据

资源的请求方式get post

请求类型
- 语义的区别
  - get 用来进行获取资源的请求操作
    - 获取图片、音视频、js文件、css文件、地址栏输入地址回车，location.href，a标签跳转。。。
  - post 用来进行发送资源的请求操作
    - 表单提交form标签（get、post均可，可以自己选择）
    - ajax也可以发送get和post请求（新内容）
- 可发送数据大小有区别
  - get请求受限制于浏览器对url的限制，2M左右
  - post请求理论上无大小限制，受限制与服务端实际的需求和处理能力
- 可发送的数据格式有区别
  - get请求只能发送文本格式数据
  - post请求不限制发送的数据格式，服务器会根据业务需求进行处理

$.get()的使用

专门用来发送get请求,从而将服务器上的资源请求到客户端来进行使用
语法

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

三个参数代表含义
- url: 类型： string 必选要请求资源的地址
- data: object 否请求资源期间要携带的参数
- callback: function 否请求成功时的回调函数
$.get()只发送请求，无参数，无回调处理

   $.get('https://autumnfish.cn/api/joke/list');

$.get()发送请求，通过回调函数接收响应的数据

   $.get('https://autumnfish.cn/api/joke/list', function (res) {
    // 响应完成后，触发这个回调函数
    // console.log('执行了回调函数');
      // 回调函数的参数1表示响应的数据，一般称为response或res
     //  - 发现，响应的JSON格式数据被jQuery自动转换为js对象
	console.log(res) // 这里的res是服务器返回的数据
})

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

  $.get('https://autumnfish.cn/api/joke/list', { num: 2 }, function (res) {
    console.log(res);
    }); 
  /*  Object
   	  jokes: Array(2)
          0: "晚上九点，客厅的门被打开，看到疲惫不堪的丈夫，她连忙起身上前帮他脱下厚重的外套。忽然，她的眼神落在丈夫的脖子上，一个刺眼的口红印，鲜艳的口红深深地刺进了她的心，她很想控制自己的情绪，可是身为女人，这种情况下谁能控制得住呢，片刻后，她失控地尖叫道，这个颜色也太好看了吧！"
   	   1: "我有一个学美术的朋友，人物画得特别好，只要看一眼就能抓住一个人的主要特征，今天我让他画我，问他我有什么特征，他看了我一眼说：穷。"
   	  length: 2
         __proto__: Array(0)
   	  msg: "获取2条笑话"
   	  __proto__: Object*/
   ```
- 本地的服务器代码的使用
```javascript
     $.get('http://localhost:3005/common/get', { username: '嘿嘿嘿', age: 18 }, function (res) {
    console.log(res);
    });

$.post()的使用

专门用来发起post请求,从而向服务器提交数据
语法

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

三个参数代表含义
- url: 类型： string 必选提交数据的地址
- data: object 否要提交的数据
- callback: function 否数据提交成功时的回调函数
无参数，不接收响应内容

   $.post('http://192.168.141.45:3005/common/post');

无参数，接收响应内容

    $.post('http://192.168.141.45:3005/common/post', function (res) {
      console.log('成功接收响应内容');
      console.log(res);
    });

传入请求参数，接收响应内容

    $.post(
      'http://192.168.141.45:3005/common/post',
      { name: 'jack', age: 18 },
      function (res) {
        console.log('成功接收响应内容');
        console.log(res);
      });

	$.post(
   	'http://www.liulongbin.top:3006/api/addbook', // 请求的URL地址
   	{ bookname: '水浒传', author: '施耐庵', publisher: '上海图书出版社' }, // 提交的数据
   	function(res) { // 回调函数
      console.log(res)
   		}
	)

$.ajax()的使用

相比于 $.get() 和$ .post() 函数，jQuery 中提供的 $.ajax() 函数，是一个功能比较综合的函数，它允许我们对 Ajax 请求进行更详细的配置。

$.ajax() 函数的基本语法如下：

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

使用$.ajax()发送GET请求
- 使用 $.ajax() 发起 GET 请求时，只需要将 type 属性的值设置为 'GET' 即可：


	$.ajax({
   		type: 'GET', // 请求的方式
   		url: 'http://www.liulongbin.top:3006/api/getbooks',  // 请求的 URL 地址
   		data: { id: 1 },// 这次请求要携带的数据
   		success: function(res) { // 请求成功之后的回调函数
       console.log(res)
   	}
	})

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

使用 $.ajax() 发起 POST 请求时，只需要将 type 属性的值设置为 'POST' 即可：


	$.ajax({
		type: 'POST', // 请求的方式
		url: 'http://www.liulongbin.top:3006/api/addbook',  // 请求的 URL 地址
		data: { // 要提交给服务器的数据
  			bookname: '水浒传',
  			author: '施耐庵',
  			publisher: '上海图书出版社'
		},
	success: function(res) { // 请求成功之后的回调函数
   		console.log(res)
 	}
})


	```

接口

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

	http://www.liulongbin.top:3006/api/getbooks  获取图书列表的接口(GET请求)
	http://www.liulongbin.top:3006/api/addbook   添加图书的接口（POST请求）

接口测试工具
- 什么是接口测试工具
- 为了验证接口能否被正常被访问，我们常常需要使用接口测试工具，来对数据接口进行检测。
- 好处：接口测试工具能让我们在不写任何代码的情况下，对接口进行调用和测试。
下载并安装PostMan
- 访问 PostMan的官方下载网址(www.getpostman.com/downloads/)…