[前端学习笔记] Ajax基础知识整理(包含Postman、Axios、JSONP)

本文介绍: 目录一、客户端与服务器1. 基本概念2. 客户端与服务器通信过程：请求–处理–响应3. 资源请求：XMLHt t pReque st 对象二、Aja x 概念及应用场景1. Aja x(Async hr on o us JS And XML)2. Aja x 应用三、jQue ry 封装请求方法四、接口测试工具Po stm a n1. 数据接口2. 接口文档3. 接口测试工具【以Po stm a n 为例】五、表单 form1. 表单作用2. 表单组成3. 表单属性：规定如何把采集到的数据发送到服务器4. Aja x 提交表单数据六、XMLHttpRequ

一、客户端与服务器

1. 基本概念

客户端：负责获取和消费资源的电脑。
服务器：负责存放和对外提供资源的电脑。
URL(Un i form Re source Lo cat o r)：统一资源定位符，用于标识互联网上资源的唯一存放位置。

2. 客户端与服务器通信 过程：请求-处理–响应

3. 资源请求：XMLHttpReque st 对象

XMLHttpReque st简称xhr，是浏览器提供的JS成员，通过它可以请求服务器上的数字资源。
请求方式有很多种，其中最常见的是get和post请求。
get请求用来获取服务器资源；post请求用来向服务器提交资源。

二、Aja x 概念及应用 场景

1. Aja x(Async h r on o us JS And XML)

异步JS和XML。理解为在网页中利用XMLHttpReque st对象和服务器进行数据交互的方式。让我们轻松实现网页与服务器之间的数据通信。

2. Aja x 应用

三、jQu e ry 封装请求方法

jQu er y对XMLHttpRequ est进行封装，提供了一些列相关函数，降低Aja x的难度。

get 函数：从服务器获取数据

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

post函数：向服务器提交数据

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

ajax函数：从服务器获取数据/向服务器提交数据

$.ajax({
	type:'', //请求方法:GET,POST...
	url:'',  //请求的URL地址
	data:{}  //请求携带的参数
	success:function(res){} //请求成功的回调函数
})

四、接口测试工具Po stm a n

1. 数据接口

Ajax请求数据时被请求的URL地址叫数据接口。每个数据接口必须有请求方式。

2. 接口 文档

接口的说明文档，是调用接口的依据，可以方便知道接口的作用和如何调用。

3. 接口测试工具【以Postm a n 为例】

可以方便的直接对接口进行调用及测试，不需要写代码。

GET方式
POST方式

五、表单 f orm

1. 表单 作用

表单主要负责数据采集功能。通过<f orm>标签提交表单操作，可以把采集到的信息提交到服务器端进行处理。

2. 表单组成

表单标签
表单域
表单按钮

3. 表单属性：规定如何把采集到的数据发送到服务器

action：向何处发送表单数据
若不指定URL，则提交到当前页面。
method：以何种方式把表单数据提交到action URL
默认为get，通过URL地址提交数据。
get适合提交少量的简单的数据；post适合提交大量的复杂的、文件上传的数据。
enc type：在发送表单数据前如何编码
target：在何处打开 action URL

4. Ajax提交表单数据

【问题】表单提交数据存在页面跳转前数据及状态丢失的问题。
所以，让表单只负责采集数据，Ajax负责将数据提交到服务器。
1）Ajax监听表单提交事件

// 两种方式
$('#form1').submit(function(e){
	alert('监听到了表单提交事件')
})
$('#form1').on('submit',function(e){
	alert('监听到了表单提交事件')
})

2）阻止表单默认跳转行为

e.preventDefault()

3）获取表单数据[必须为每个表单元素添加 name 属性]

var data = $('#form1').serialize() //username=ll&amp;age=18

六、XMLHttpRequ est与XMLHttpRequest Lev el2

1. XMLHttpRequest

XMLHttpRequest是浏览器提供的JS对象，通过它可以请求服务器上的数据资源。

2. XMLHttpRequest发起GET请求

// 1. 创建XHR对象
	var xhr = new XMLHttpRequest()
// 2. 调用open函数【创建请求】
// GET请求将参数以“查询字符串”的形式追加到URL后面
	xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1')
// 3. 调用send函数【发起请求】
	xhr.send()
// 4. 监听onreadystatechange事件
	xhr.onreadystatechange = function () {
		// 请求状态xhr.readyState  响应状态xhr.status
  		if (xhr.readyState === 4 &amp;&amp; xhr.status === 200) {
    		// 获取服务器响应的数据xhr.responseText
    		console.log(xhr.responseText)
  		}
	}

请求状态描述见下图：
补充知识：URL编码（百分号编码）
URL中有些字符可能会引起歧义。使用安全的字符去表示那些不安全的字符，即用英文字符表示非英文字符。

// URL编码 encodeURI()
var str1 = encodeURI('程序员') // %E7%A8%8B%E5%BA%8F%E5%91%98
// URL解码 decodeURI()
var str2 = decodeURI('%E7%A8%8B%E5%BA%8F%E5%91%98') // 程序员

3. XMLHttpRequest发起POST请求

// 1. 创建xhr对象
    var xhr = new XMLHttpRequest()
// 2. 调用open函数【创建请求】
    xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook')
// 3. 设置Content-Type属性【编码方式】
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 4. 调用send函数【发起请求并携带参数】
    xhr.send('bookname=水浒传&amp;author=施耐庵&amp;publisher=上海图书出版社')
// 5. 监听事件
    xhr.onreadystatechange = function () {
    // 请求状态xhr.readyState  响应状态xhr.status
      if (xhr.readyState === 4 &amp;&amp; xhr.status === 200) {
      	// 获取服务器响应的数据xhr.responseText(JSON格式的数据)
        console.log(xhr.responseText)
        // JSON转换为JS对象
        JSON.parse(xhr.responseText)
      }
    }

4. 数据交换格式

服务器端与客户端之间进行数据传输与交换的格式。
前端主要是XML和JSON。
1）XML(Extens ible Mark up Language)可扩展标记语言。
HTML是网页内容的载体，XML是数据的载体。

XML格式臃肿，无关代码多、体积大、传输效率低。
在JS解析中XML比较麻烦。

<note>
	<to>zz</to>
	<from>pp</from>
	<heading>通知</heading>
	<body>晚上开会</body>
</note>

2）JSON(JavaSc ript Object Notation)JS对象表示法。本质是字符串。

轻量级的文本数据交换格式，比XML更小、更快、更易解析。
成为主流的数据交换格式。
JSON包含“对象”和“数组”两种结构。
属性名key必须双引号包含！所有出现的字符串必须双引号包含！不能写注释！

对象结构：{“key”:value, “key”:value… }。key必须双引号包含的字符串，value 可以为数值、字符串、布尔值、null、数组、对象 6种类型。不能包含 undefined和函数形式的值。

{
	"name":"pp",
	"age":20,
	"gender":"女",
	"address":null,
	"hobby":["吃饭","睡觉","写代码"]
}

数组结构：[value, value, …]。value 可以为数值、字符串、布尔值、null、数组、对象 6种类型。不能包含 undefined和函数形式的值。

["java", 100, false, null, [4,5,6], {"name":"pp","age":20}]

JSON与JS对象相互转换：

// JSON.stringify(obj) JS对象转换为JSON 
var obj = { a: 'hello', b: 'world', c: false }
var str = JSON.stringify(obj) // {"a":"hello","b":"world","c":false}
// JSON.parse(json)    JSON转换为JS对象
var str = '{"a": "Hello", "b": "world"}'
var obj = JSON.parse(str) // {a:"Hello",b:"world"}

5. XMLHttpRequest Lev el2

1）旧版本存在问题

只支持文本数据传输，无法读取和上传文件。
传送和接收数据时没有进度信息，只能提示是否已完成。

2）新版本新加功能

可以设置HTTP请求时限

// 设置超时时间
    xhr.timeout = 30
// 设置超时事件的处理函数
    xhr.ontimeout = function () {
      console.log('请求超时了！')
    }

可以使用FormData对象管理表单数据

// 1. 通过DOM操作，获取到form表单元素
    var form = document.querySelector('#form1')
// 2. 创建FormData实例获取form表单数据
    var fd = new FormData(form) // {name: 'pp', pwd: 123}
// 与Jquery的serialize()区分    
// var data = $('#form1').serialize() // name=pp&amp;pwd=123
// 3. 使用FormData对象提交POST方法的数据
    var xhr = new XMLHttpRequest()
    xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')
    xhr.send(fd)
    ...

// 不涉及表单时 可以调用append函数，向fd中追加数据
    fd.append('name', 'pp')
    fd.append('pwd', '123')

可以上传文件

// 1）定义UI结构【省略】
// 2）验证是否选择了文件
var files = document.querySelector('#file1').files
      if (files.length <= 0) {
        return alert('请选择要上传的文件！')
      }
// 3）向FormData追加文件（file为接口定义的数据名称）
var fd = new FormData()
fd.append('file', files[0])
// 4）XHR上传文件【POST方法省略】

可以获取数据传输进度

// 监听文件上传的进度
xhr.upload.onprogress = function (e) {
    if (e.lengthComputable) {
    	// 计算出上传的进度：e.loaded已传输的字节/e.total需传输的字节
       	var Complete = Math.ceil((e.loaded / e.total) * 100)
        // 动态设置bootstrap的进度条
        $('#percent').attr('style', 'width: '+Complete+'%;').html(Complete+'%')
    }
}
// 上传成功后改变进度条样式
xhr.upload.onload = function () {
    $('#percent').removeClass().addClass('progress-bar progress-bar-success')
}

// 使用jquery实现文件上传时
// 上传文件【只能用ajax】
$.ajax({
    method: 'POST',
    url: 'http://www.liulongbin.top:3006/api/upload/avatar',
    // 传入FromData数据
    data: fd,
    // 不编码，使用FormData默认的content-Type
    processData: false,
    contentType: false,
    success: function (res) {
       console.log(res)
    }
})
// 监听到Ajax请求被发起
      $(document).ajaxStart(function () {
        $('#loading').show() // #loading 是一张图片
      })
// 监听到Ajax完成
      $(document).ajaxStop(function () {
        $('#loading').hide()
      })

七、网络数据请求Axios

1. Axios

专注于网路数据请求的JS库axios.js。
相比于原生的XMLHttpRequest对象更简单易用；相比于jQuery更轻量化。

2. Axios发起get请求

// axios.get(‘url’, { params: paramsObj }).then(callback)
var url = 'http://www.liulongbin.top:3006/api/get'
var paramsObj = { name: 'zs', age: 20 }
axios.get(url, { params: paramsObj }).then(function (res) {
// res.data为服务器返回的数据
    console.log(res.data)
})

3. Axi os发起post请求

// axios.post(‘url’, paramsObj).then(callback)
var url = 'http://www.liulongbin.top:3006/api/post'
var dataObj = { address: '北京', location: '顺义区' }
axios.post(url, dataObj).then(function (res) {
// res.data为服务器返回的数据
     console.log(res.data)
})

4. Axios发起axios请求

// GET 参数对象写入params
axios({
    method: 'GET',
    url: 'http://www.liulongbin.top:3006/api/get',
    params: { name: '钢铁侠', age: 35 }
}).then(function (res) {
    console.log(res.data)
})
// POST 参数对象写入data
axios({
    method: 'POST',
    url: 'http://www.liulongbin.top:3006/api/post',
    data: { name: '娃哈哈', age: 18, gender: '女' }
}).then(function (res) {
    console.log(res.data)
})

八、跨域请求JSONP

1. 同源与跨域

两个页面的协议、域名、端口都相同，则两个页面同源。反之为跨域。
同源策略是浏览器提供的一个安全功能，不允许跨域的URL之间进行资源的交互，无法通过Ajax请求跨域的接口数据：

2. 跨域请求解决方案

JSONP：出现早，兼容性好，不标准，只支持GET请求。
CORS：出现晚，兼容性差，W3C标准，支持GET和POST请求。

3. JSONP用法

1）JSONP原理
<script>标签不会受到浏览器同源策略的影响，可以通过<script>标签的src 属性请求跨域的数据接口，并通过函数调用的方式接收响应回来的数据。

2）JSONP请求步骤

定义function函数
通过<script>标签的src 属性请求接口
通过查询字符串中的函数?call back=‘函数名’接收数据

<script>
// 通过自定义函数abc接收响应数据【与src查询字符串的callback=abc保持一致】
function abc(data) {
   console.log('JSONP响应回来的数据是：')
   console.log(data)
}
</script>

<script src="http://ajax.frontend.itheima.net:3006/api/jsonp?callback=abc&amp;name=ls&amp;age=30"></script>

3）jQuery发起JSONP请求
jQuery采用在<header>标签中，动态创建、移除<script>标签的方式，来发起JSONP数据请求。

$.ajax({
    url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',
    // 发起JSONP的数据请求，必须指定dataType为jsonp
    dataType: 'jsonp',
    // 指定参数名称【一般不用，默认为callback】
    // jsonp: 'callback',
    // 指定回调函数名称【不指定时默认携带callback=jQueryxxx随机生成的回调函数名称】
    jsonpCallback: 'abc',
    success: function (res) {
          console.log(res)
    }
})