Ajax (一) 基础知识与数据发送

Ajax (一) 基础知识与数据发送

一、客户端与服务器

1、上网的目的

通过互联网的形式来 获取和消费资源

2、服务器

上网过程中，负责 存放和对外提供资源 的电脑，叫做服务器

3、客户端

在上网过程中，负责 获取和消费资源 的电脑，叫做客户端

二、URL地址的概念&组成

1、URL的概念

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

2、URL的组成

3、复习

 url路径的获取：location.path (/home/index.html)

   url中的查询参数：location.search (?uname=tom&age=20)

   url中的锚点：location.hash (#abc)

BOM中的三大对象：location（操作地址栏） history（浏览器历史） Navigation(获取浏览器对象)

三、客户端与服务器通讯过程

• 客户端与服务器之间的通讯过程，分为： 请求-处理-响应 三个步骤
• 网页中每一个资源，都是通过 请求-处理-响应 的方式从服务器获取回来的

四、服务器对外提供的资源

1、常见资源

文档、图片、音频、视频

2、数据也是资源

网页中的数据，也是服务器对外提供的一种资源，例如股票数据，各行业排行榜等

3、资源的请求方式

1. GET请求: 表示向服务器获取数据, 例如: 获取页面, 图片, js文件, 数据…

2. POST请求: 表示向服务器发送数据, 例如: 登录或注册个人信息, 购买商品, 发表文章…

五、Ajax概念

1、概念

Asynchronous JavaScript And XML(全称不用记), 即使用 XMLHttpRequest 进行数据获取和提交的方式,

它最大的特点就是异步(Async), 可以在不重新刷新页面的情况下与服务器通信, 交换数据

2、异步任务和同步任务回顾

• 异步任务: 图片,脚本资源加载; 点击事件; 定时器事件; ajax 数据交互

• 异步执行任务的好处: 不会阻塞主线程执行栈上的同步任务

  复习：一个回调函数就是一个异步任务，先执行同步再执行异步任务

3、jquery 中的 ajax

使用 jQuery 为我们封装好的 XMLHttpRequest 方法, 可以提升开发的效率, 避免兼容性问题

4、jquery 中 ajax 的请求方法

$.get() 用于发送 GET 请求，获取数据

$.post() 用于发送 POST 请求，提交数据

$.ajax({ }) 用于发送任意 HTTP 请求，可以获取和提交数据

5、get 和 post 请求的区别 (面试)★★★

1. get 请求发送的参数放在 url 中, post 参数放在 请求体 中, 相对安全

2. get 请求会被缓存到浏览器, post 不会被缓存

3. get 请求的参数有长度限制, post 发送数据量比 get 大, 且支持发送二进制数据

六、jQuery中的Ajax

1、$.get() 函数介绍

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

• 参数说明：

  (1) url: 请求地址必须传入

  (2) data: 请求资源时的参数信息 (key/value格式)

  (3) callback: 获取服务器数据成功时的回调函数
  

2、$.post() 函数介绍

发送 post 请求语法:

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

• 参数说明：

  (1) url: 请求地址必须传入

  (2) data: 请求资源时的参数信息(key/value格式)

  (3) callback: 请求服务器数据成功时的回调函数
  

3、$.ajax() 函数介绍

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

 $.ajax({
        url:  请求地址,
        method: 请求方式,
        data: 请求参数,
        success: function (res) { // 请求成功的回调函数 }
      })

• 注意: 从jquery 1.9 版本开始往后, 请求类型的参数名推荐使用 method

4、$.ajax() 发起 get 请求

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

5、$.ajax 发起 post 请求

使用 $.ajax() 发起 post请求，只需要把 type属性的值 设置为 ‘post’ 即可：

七、接口

1、定义

发送 ajax 请求时的 URL 地址, 叫做数据接口; 每个接口必须有自己的请求类型

2、接口文档

项目接口的说明文档, 它是我们调用接口的依据. 前端人员根据接口文档中规定的 url 地址，请求参数等进行调用，

后端人员负责维护接口返回的数据

3、接口规范

一个规范的接口文档通常包含下列 5 部分：

1. 接口名称: 说明接口功能

2. 接口的 URL 地址

3. 接口的请求方式: get, post

4. 接口的请求参数格式: 参数名称, 参数类型, 参数是否必选, 含义说明

5. 接口的响应的详细描述: 返回的数据名称, 数据类型, 含义说明

6. 接口的返回示例

注意：以上为理想状态下，一般就一个地址QAQ！