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

开门见山

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

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

GET请求的理解

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

使用 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的封装，其实就是找它们的不同…

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

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

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

	function ajax(url,methods,params={},fn){
		var xhr = null;
		var methods = methods.toUpperCase() //方便后续判断
   		if(window.XMLHttpRequest){
        	xhr = new XMLHttpRequest(); //标准
    	}else{
        	xhr = new ActiveXObject('Microsoft.XMLHTTP'); //ie6
    	}
    	// 将参数转化为字符串用&链接的格式
    	var arr = [] //定义一个数组接收键值对
    	for(var key in params){
    		arr.push(`${key}=${params[key]}`)
    	}
    	var str = arr.join('&')//请求格式
    	if(methods=='GET'){
    		url += '?' + str
    	}
    	xhr.open(methods,url,true)
    	var data = null
    	if(methods=='POST'){
    		data = str
    		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
    	}
    	xhr.send(data)
    	xhr.onreadystatechange = function(){
    		if(this.readyState === 4){
    			if(this.status===200){
    				fn(this.responseText)
    			}
    		}
    	}
	}

写完后测试一下
后台测试文件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文件，并写好前端页面

	<form>
		<input type="text" name="username" id="username">
		<input type="text" name="password" id="password">
		<button>test</button>
	</form>

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

<script>
	document.querySelector('button').onclick = function(e){
		e = e || window.event
		e.preventDefault && e.preventDefault()
		var username = document.querySelector('#username').value
		var password = document.querySelector('#password').value
		ajax('./test.php','get',{username:username,password:password},function(data1){
			console.log(data1)
			ajax('./test.php','post',{username:username,password:password},function(data1){
			console.log(data1)
			
			})
		})
	}
</script>

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

神器Promise封装

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

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

function axios(url,type,params){
	return new Promise(function(resolve,reject){
		var xhr = null;
		// var type = type.toUpperCase() //方便后续判断
   		if(window.XMLHttpRequest){
        	xhr = new XMLHttpRequest(); //标准
    	}else{
        	xhr = new ActiveXObject('Microsoft.XMLHTTP'); //ie6
    	}
    	// 将参数转化为字符串用&链接的格式
    	var arr = [] //定义一个数组接收键值对
    	for(var key in params){
    		arr.push(`${key}=${params[key]}`)
    	}
    	var str = arr.join('&')//请求格式
    	type = type.toUpperCase()
    	if(type=='GET'){
    		url += '?' + str
    	}
    	xhr.open(type,url,true)
    	var data = null
    	if(type=='POST'){
    		data = str
    		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
    	}
    	xhr.send(data)
    	xhr.onreadystatechange = function(){
		    if (this.readyState !== 4) {
    			return;
  			}
  			if (this.status === 200) {
    			resolve(this.response);
  			} else {
    			reject(new Error(this.statusText));
  			}
    	}
	})
}

使用它

<script src="axios.js"></script>
<script>
	document.querySelector('button').onclick = function(e){
		......
		axios('./test.php','get',{username:username,password:password})
		.then(function(data){
			console.log(data)
			return axios('./test.php','post',{username:username,password:password})
		})
		.catch(function(err){
			console.log(err)
		})
		.then(function(data){
			console.log(data)
		})
		
	}
</script>

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

Promise

对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。
一旦状态改变，就不会再变，任何时候都可以得到这个结果。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)
		})

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

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

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

前端使用jsonp进行跨域请求

<script>
	function foo(data){
		console.log(data)//{msg: "", status: "0", error_code: "0", data: "服务端测试"}
		console.log(typeof data)//object
	}
</script>
<script src="http://127.0.0.1/jsonp/jsonp.php?callback=foo" type="text/javascript"></script>

请求城市的天气案例

    <input type="text" id="inp">
    <button id="btn">点击</button>

<script type="text/javascript">
   var inp = document.getElementById('inp')
   var btn = document.getElementById('btn')
   function hello(data){
       console.log(data);
   }
   btn.onclick = function(){
      var script = document.createElement('script');
      script.src = `
      http://api.jisuapi.com/weather/query?appkey=eee8cacbc1e612cd&city=${inp.value}&callback=hello`;
      var head = document.getElementsByTagName('head')[0];
      head.appendChild(script);    
   }  
</script>

获取广州的天气

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

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

如何来调用它(使用)

<script src='jsonp.js'></script>
<script>
	jsonp.get(`http://api.jisuapi.com/weather/query`,{appkey:'eee8cacbc1e612cd',city:'深圳'})
	.then(data=>{
		console.log(data)
		return jsonp.get(`http://api.jisuapi.com/weather/query`,{appkey:'eee8cacbc1e612cd',city:'汕头'})
	})
	.then(data=>{
		console.log(data)
	})
</script>

打印数据

readyState

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

时间轴

时间轴
由于 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的产生

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

Cross Origin Resource Share，跨域资源共享

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

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

同步与异步

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

同步和异步

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

ajax的好处

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

第三方库

Axios

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

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

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);
});

还有其它：转换请求数据和响应数据；取消请求；自动转换 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

$.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

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 是一个简约、超快的模板引擎。
前端轻量级web进度条 – Nprogress
better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。

如何将jsonp和ajax一起封装

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

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

实现跨域

readyState状态
 ajax进度