从ajax异步请求封装和JSONP跨域封装到第三方库的使用

不念不忘少年蓝@ 2022-01-31 00:59 224阅读 0赞

### 开门见山 ###

本文章采用倒序和插叙等进行叙述的手法，边吃西瓜边浏览效果更佳…

> 使用XMLHttpRequest (XHR)对象可以与服务器交互。您可以从URL获取数据，而无需让整个的页面刷新。这使得Web页面可以只更新页面的局部，而不影响用户的操作。XMLHttpRequest在 Ajax 编程中被大量使用。

##### GET请求的理解 #####

> Asynchronous Javascript And XML（异步JavaScript和XML）,他并不是凭空出现的新技术,而是对于现有技术的结合:核心是js对象XMLHttpRequest

1.  使用 AJAX 的过程可以类比平常我们访问网页过程

// 1. 创建异步对象 --相当于打开一个浏览器
    	var xhr = new XMLHttpRequest()
    	// 2. 打开与网址特定的链接 --相当于在地址栏输入访问地址
    	xhr.open('get','./01get.php')
    	// 3. 通过链接发送一次请求 --相当于在浏览器输入回车发送请求
    	xhr.send(null)
    	// 4. 指定 xhr 状态变化事件处理函数 —— 相当于处理网页呈现后的操作
    	xhr.onreadystatechange = function(){ 
    		// 通过 xhr 的 readyState 判断此次请求的响应是否接收完成
    		if (this.readyState === 4) { 
    			// 通过 xhr 的 responseText 获取到响应的响应体
    			console.log(this)
    		}
    	}

如果GET需要传参数，需要接在open的url地址里面

##### POST请求 #####

var xhr = new XMLHttpRequest()
    	// open 方法的第一个参数的作用就是设置请求的 method,第二个方法是路径，建立与浏览器特定端口的链接
    	xhr.open('POST','./02post.php')
    	// 设置请求头中的 Content‐Type 为 application/x‐www‐form‐urlencoded
    	// 标识此次请求的请求体格式为 urlencoded 以便于服务端接收数据
    	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
    	// 需要提交到服务端的数据可以通过 send 方法的参数传递
    	// 格式：key1=value1&key2=value2
    	xhr.send('key1=value1&key2=value2')//post请求参数在这里传递，并且不需要encodeURI()转码
    	xhr.onreadystatechange = function(){ 
    		// 状态为4才能获取完整的响应内容
    		if (this.readyState === 4) { 
    			console.log(this.responseText) //获取服务端返回的内容
    		}
    	}

open的第三个参数是布尔类型，代表是否异步请求

##### 简单粗暴–直接封装 #####

我们废话不多说了，直接讲讲关于get和post的封装，其实就是找它们的不同…

1.  我们首先要是xhr兼容；要使其兼容ie6和标准的浏览器

var xhr = null;
        if(window.XMLHttpRequest){ 
            xhr = new XMLHttpRequest(); //标准
        }else{ 
            xhr = new ActiveXObject('Microsoft.XMLHTTP'); //ie6
        }

1.  需要传递的参数：请求后台的路径，请求参数，请求方式，回调函数
2.  请求方式methods，这里我们同一把传入进来的请求方式转为大写`var method = method.toUpperCase()`
3.  请求参数格式是`'key1=value1&key2=value2'`但是我们需要传递的是一个对象，而且get方式请求是在open用`?`连接;post需要在send进行发送
4.  由于是异步请求，所以我们需要使用
5.  有些会把异步状态和响应状态一起写`xhr.readyState == 4 && xhr.status == 200`；但是个人xhr.status不是200也是需要处理的
6.  ajax.js封装

1.  写完后测试一下  
    后台测试文件test.php

<?php
    if($_SERVER['REQUEST_METHOD']==='GET'){ 
    	$username = $_GET['username'];
    	$password = $_GET['password'];
    	$arr  = array('username' => $username, 'password'=>$password,'methods'=>'get');
    	echo json_encode($arr);
    }else{ 
    	$username = $_POST['username'];
    	$password = $_POST['password'];
    	$arr  = array('username' => $username, 'password'=>$password,'methods'=>'post');
    	echo json_encode($arr);
    }

引入我们写好的ajax.js文件，并写好前端页面

点击按钮先发送get请求，再发送post请求

1.  缺点，如果我们想先后获取数据，即ajax是一个异步请求;我们必须在回调函数继续请求，不能并能着写，而且如果发生错误要怎么处理

##### 神器Promise封装 #####

> Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。

1.  使用Promise改装上面的ajax.js，放在axios.js文件夹下

1.  使用它

![结果如图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70]  
3. 当然我们最好在封装的时候判断格式是否是`json`;是的话使用`JSON.parse()`将其转换，这点大家自己加上

##### Promise #####

1.  对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。
2.  一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

### JSONP ###

> JSON with Padding;是一种借助`script`标签发送跨域请求的技巧

> 其原理就是在客户端借助 script 标签请求服务端的一个动态网页，服务端的这个动态网页返回一段带有函数调用的 JavaScript 全局函数调用的脚本，将原本需要返回给客户端的数据传递进去

比如我们的访问地址是`http://localhost/test/test.html`，但是请求地址域名是不同的

axios('http://127.0.0.1/test/test.php','get',{ username:username,password:password})
    		.then(function(data){ 
    			console.log(data)
    		})

![结果][20190516082328126.png]

##### 服务端代码`http://localhost/jsonp/jsonp.html` #####

请求的后台代码jsonp.php文件

<?php 
        $sData = '{"msg":"","status":"0","error_code":"0","data":"服务端测试"}';
        $cbName = $_GET['callback'];
        echo $cbName.'('.$sData.')';
     ?>

前端使用jsonp进行跨域请求

##### 请求城市的天气案例 #####

获取广州的天气  
![广州][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 1]

##### 这么好用和常用的东西，当然得进行封装 #####

1.  我们使用Promise对象和面向对象来封装；为什么要使用这两种；因为让人看起来很高级；当然；主要是不会重复创建实例；
2.  我们首先要对参数进行处理，我们设定参数是对象，查看是否有传入参数，有的话使用for…in循环；
3.  我们随机生成一个函数名，声明它
4.  创建后拿到我们的数据后就删除它
5.  创建一个jsonp.js文件

// jsonp的封装
    function Jsonp(){ 
    	
    }
    // 创建链接
    Jsonp.prototype.ranNum = function(min,max){  //生成随机数
    	return parseInt(Math.random()*(max-min+1)+min)
    }
    Jsonp.prototype.get = function(url,data){ 
    	return new Promise((resolve,reject)=>{ 
    		var num = this.ranNum(0,100) //获取[0,100]随机数
    		var callBackRadom = "jsonpSuccess_" + num; //指定回调函数
    		window[callBackRadom] = resolve;//处理函数，这是函数名，resolve成功后的回调函数（这是声明式函数）
    		var script = document.createElement('script');//创建script标签
    		var arr = [] //用来存放我们的键值对数据
    		script.type = "text/javascript"
    		script.id = callBackRadom//给它一个id；方便我们后续用来删除它
    		if(data!=null){ 
    			for(var key in data){ 
    				arr.push(`${ key}=${ encodeURIComponent(data[key])}`)//对字符串进行编码
    			}
    			var str = arr.join('&')//转化成我们想要的格式
    			script.src = `${ url}?${ str}&callback=${ callBackRadom}`;//发送请求
    		}else{ 
    			script.src = `${ url}&callback=${ callBackRadom}`;
    		}
    	    var head = document.getElementsByTagName('head')[0];
    	    head.appendChild(script);//添加到头部
    	    this.removeJsonp(callBackRadom) //创建后拿到数据就删除 
    	})	
    }
    Jsonp.prototype.removeJsonp = function(id){ 
    	var head = document.getElementsByTagName('head')[0];
        var el = document.getElementById(id);
        if (head != null && el != null) { 
            head.removeChild(el);
        }
    }
    var jsonp = new Jsonp()

1.  如何来调用它(使用)

![打印数据][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 2]

### readyState ###

<table> 
 <thead> 
  <tr> 
   <th>readyState</th> 
   <th>状态描述</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>0</td> 
   <td>UNSENT</td> 
   <td>代理（XHR）被创建，但尚未调用 open() 方法。</td> 
  </tr> 
  <tr> 
   <td>1</td> 
   <td>OPENED</td> 
   <td>open() 方法已经被调用，建立了连接。</td> 
  </tr> 
  <tr> 
   <td>2</td> 
   <td>HEADERS_RECEIVED</td> 
   <td>send() 方法已经被调用，并且已经可以获取状态行和响应头。</td> 
  </tr> 
  <tr> 
   <td>3</td> 
   <td>LOADING</td> 
   <td>响应体下载中， responseText 属性可能已经包含部分数据。</td> 
  </tr> 
  <tr> 
   <td>4</td> 
   <td>DONE</td> 
   <td>响应体下载完成，可以直接使用 responseText 。</td> 
  </tr> 
 </tbody> 
</table>

##### 时间轴 #####

![时间轴][20190516161920581.png]  
由于 readystatechange 事件是在 xhr 对象状态变化时触发（不单是在得到响应时），也就意味着这个事件会被触发多次，所以我们为什么要设定xhr.readyState=4的原因

### ajax遵循http ###

本质上 XMLHttpRequest 就是 JavaScript 在 Web 平台中发送 HTTP 请求的手段，所以我们发送出去的请求任然是HTTP 请求，同样符合 HTTP 约定的格式：

// 设置请求报文的请求行
    xhr.open('GET', './time.php')
    // 设置请求头
    xhr.setRequestHeader('Accept', 'text/plain')
    // 设置请求体
    xhr.send(null)
    xhr.onreadystatechange = function () { 
    if (this.readyState === 4) { 
    // 获取响应状态码
    console.log(this.status)
    // 获取响应状态描述
    console.log(this.statusText)
    // 获取响应头信息
    console.log(this.getResponseHeader('Content‐Type')) // 指定响应头
    console.log(this.getAllResponseHeader()) // 全部响应头
    // 获取响应体
    console.log(this.responseText) // 文本形式
    console.log(this.responseXML) // XML 形式，了解即可不用了
    }
    }

### 同源策略 ###

同源策略是浏览器的一种安全策略，所谓同源是指域名，协议，端口完全相同，只有同源的地址才可以相互通过AJAX 的方式请求。同源或者不同源说的是两个地址之间的关系，不同源地址之间请求我们称之为跨域请求。  
由于同源从略的限制，XMLHttpRequest只允许请求前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后再服务端输出JSON数据并执行回调函数，从而解决跨域数据请求； 而JSONP 需要服务端配合，服务端按照客户端的要求返回一段 JavaScript 调用客户端的函数。

##### jsonp的产生 #####

1.  jax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准；
2.  当前阶段如果想通过纯web端（ActiveX控件、服务端代理、属于未来的HTML5之Websocket等方式不算）跨域访问数据就只有一种可能，那就是在远程服务器上设法把数据装进js格式的文件里，供客户端调用和进一步处理；
3.  恰巧，我们已经知道有一种叫做JSON的纯字符数据格式可以简洁的描述复杂数据，更妙的是JSON还被js原生支持，所以在客户端几乎可以随心所欲的处理这种格式的数据；
4.  这样子解决方案就呼之欲出了，web客户端通过与调用脚本一模一样的方式，来调用跨域服务器上动态生成的js格式文件（一般以JSON为后缀），显而易见，服务器之所以要动态生成JSON文件，目的就在于把客户端需要的数据装入进去。
5.  客户端在对JSON文件调用成功之后，也就获得了自己所需的数据，剩下的就是按照自己需求进行处理和展现了，这种获取远程数据的方式看起来非常像AJAX，但其实并不一样。
6.  为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

##### Cross Origin Resource Share，跨域资源共享 #####

header('Access‐Control‐Allow‐Origin: *');

这种方案无需客户端作出任何变化（客户端不用改代码），只是在被请求的服务端响应的时候添加一个 AccessControl-Allow-Origin 的响应头，表示这个资源是否允许指定域请求

### 同步与异步 ###

*  同步:必须等待前面的任务完成,才能继续后面的任务(我们在银行排队时,只有等到你了,才能够去处理业务)
 *  异步:我们在排队的时候,拿台电脑打代码是没有任何影响的(不建议做低头族哦)

##### 同步和异步 #####

想象一下：在一片蓝色的天空和碧绿的湖水包围下；你在刷着微博；当你看完了内容；点击加载更多按钮；页面重新刷新了…但实际情况是:我们在访问新浪微博时,当你看到一大半了,会自动帮我们加载更多的微博,同时页面并没有刷新

##### ajax的好处 #####

1.  当然，实现前后端分离；前端只需要关注自己的数据
2.  加载页面的时候能在不更新整个页面的前提下维护数据
3.  Ajax应用程序必须在众多不同的浏览器和平台上经过严格的测试。  
    但是，同样的它可能破坏浏览器的后退与加入收藏书签功能；对搜索引擎支持较弱；还有它的安全等问题

### 第三方库 ###

##### Axios #####

[Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中][Axios _ promise _ HTTP _ node.js]

1.  一般都是首推这个。因为它•支持 Promise API
2.  拦截请求和响应；这样在我们判断进入页面是否登录注册了可以进行判断:比如判断是否有身份认证存储的信息

import Axios from 'axios'
    Vue.prototype.HOST = 'http://localhost:3000'//虚拟接口
    Vue.prototype.$axios  = Axios//在vue中使用
    
    // 添加请求拦截器
    Axios.interceptors.request.use(function (config) { 
      const token = localStorage.getItem('auth_token')
      config.headers['X-Access-Token'] = token
      return config;
    }, function (error) { 
      // 对请求错误做些什么
      return Promise.reject(error);
    });
    
    // 添加响应拦截器
    Axios.interceptors.response.use(function (response) { 
      // 对响应数据做点什么
      return response;
    }, function (error) { 
      // 对响应错误做点什么
      return Promise.reject(error);
    });

1.  还有其它：转换请求数据和响应数据；取消请求；自动转换 JSON 数据；客户端支持防御 XSRF

##### httpClient #####

这是angular的

import {  HttpClient } from '@angular/common/http'
    ...
      constructor(
        private http: HttpClient,
        private router: Router
      ) {  }
      ......
          this.http.post(url, params)
          .toPromise()
          .then(data => { 
          })
          .catch(err => { 
          })

##### vue-resourse #####

这是vue提供的；但是已经不再维护了…

import VueResource from 'vue-resource'
    Vue.use(VueResource)
    Vue.http.options.root = 'http://www.liulongbin.top:3005/'
    Vue.http.options.emulateJSON = true//支持post

this.$http.get('api/getnew/'+this.id).then(result=>{ 
      })

##### jquery #####

[http://jquery.cuishifeng.cn/jQuery.Ajax.html][http_jquery.cuishifeng.cn_jQuery.Ajax.html]

$.get()	 $.post()  $.getJSON()  不需要传入对象，单个参数即可，而ajax可以传入对象
     $.get('json.php', {  id: 1 }, function (res) { 
           console.log(res)
        })
        // $.post('json.php', { id: 1 }, function (res) { 
        // console.log(res)
        // })
    
        // $.getJSON('json.php', { id: 1 }, function (res) { 
        // console.log(res)
        // })

当然可以使用一个ajax搞定了

$.ajax({ 
    		url: '',
    		type: 'get',
    		data: {  id: 1, name: '张三' },
    		dataType: 'json',
        	// 一旦设置的 dataType 选项，就不再关心 服务端 响应的 Content-Type 了
            // 客户端会主观认为服务端返回的就是 JSON 格式的字符串
    		success:function(data){ 
    			console.log(data)
    		},
    		error:function(){ 
    
    		},
    		complete:function(){ 
    
    		}
    	})

如果想要在请求前和请求后处理一些业务逻辑

$(document)
          .ajaxStart(function () { 
            // 只要有 ajax 请求发生 就会执行
            $('.loading').fadeIn()
            // 显示加载提示
            console.log('注意即将要开始请求了')
          })
          .ajaxStop(function () { 
            // 只要有 ajax 请求结束 就会执行
            $('.loading').fadeOut()
            // 结束提示
            console.log('请求结束了')
          })

##### fetch #####

Fetch API 提供了一个获取资源的接口（包括跨域请求fetch-jsonp）。任何使用过 XMLHttpRequest 的人都能轻松上手，但新的API提供了更强大和灵活的功能集。  
[https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch\_API][https_developer.mozilla.org_zh-CN_docs_Web_API_Fetch_API]

##### wx.request #####

这是微信小程序发送请求的API

//app.js
    App({ 
      config: { 
        apiBase: 'https://locally.uieee.com'
      }
    })

进行封装`utils/fetch.js`

const app = getApp()
    module.exports = (url,data,methods="get")=>{ 
      wx.showLoading({  title: 'Loading...' })
      return new Promise((res, rej)=>{ 
        wx.request({ 
          url:app.config.apiBase+url,
          data,
          methods,
          success:function(data){ 
            res(data)
          },
          fail:function(err){ 
            rej(err)
          },
          complete:wx.hideLoading()
        })
      })
    }

引入并使用fetch代码

const fetch = require('../../utils/fetch.js')
        fetch(`/shops/1`)
        .then(res=>{ 
          console.log(res.data)
        })
        .catch(err=>{ 
          console.log(err)
        })

##### 配合ajax使用的其它第三方库 #####

[art-template 是一个简约、超快的模板引擎。][art-template]  
[前端轻量级web进度条 – Nprogress ][web_ _ Nprogress]  
[better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。][better-scroll _ PC]

### 如何将jsonp和ajax一起封装 ###

我这里就不深入了…可以参考下jquery源码。  
**我的思路:**

1.  我们要考虑是否同源，可以像jquery传入一个dataType判断；也可以自己根据`locallhost`来判断
2.  ajax主要是异步请求对象XMLHttpRequest；而jJSONP主要通过创建script发送请求
3.  都是要使用回调函数将数据存储出来
4.  想封装的更完美一些最好配合进度事件

##### 实现跨域 #####

[readyState状态][readyState]  
[ajax进度][ajax]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70]: /images/20220131/1fa63c3f915b4c0b827ed698d8765802.png
[20190516082328126.png]: /images/20220131/aa71dea4a13347bebec2a28afe092ea6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 1]: /images/20220131/89bea271397e4d0c97d71b1c75d7cd03.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 2]: /images/20220131/d4f95c0610f0464bb00460311f26ad7b.png
[20190516161920581.png]: /images/20220131/0c536d1c10a84d048132ca3526e25cfb.png
[Axios _ promise _ HTTP _ node.js]: https://www.kancloud.cn/yunye/axios/234845
[http_jquery.cuishifeng.cn_jQuery.Ajax.html]: http://jquery.cuishifeng.cn/jQuery.Ajax.html
[https_developer.mozilla.org_zh-CN_docs_Web_API_Fetch_API]: https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API
[art-template]: http://aui.github.io/art-template/zh-cn/docs/
[web_ _ Nprogress]: http://ricostacruz.com/nprogress/
[better-scroll _ PC]: http://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options-advanced.html#pulldownrefresh
[readyState]: https://blog.csdn.net/weixin_41105030/article/details/85318456
[ajax]: https://www.cnblogs.com/xiaohuochai/p/6552674.html