前端_JavaScript_面向对象编程

面向对象编程

Objects对象的原生方法分成两类：Object自身的方法(静态方法)和Object的实例方法。注意Object是JavaScript的原生对象，所有的其他对象都是继承自Object对象，故其它对象都是Object的实例。

Object的静态方法

Object.keys()方法与Object.getOwnPropertyNames()，参数是对象，返回一个数组，数组的值是改对象自身的所有属性名,——区别在于keys返回可枚举的属性，getOwnPropertyNames返回不可枚举的属性值。

Object的实例方法

Object.prototype.valueOf():返回当前对象的对应值.
Object.prototype.toString():返回当前对象对应的的字符串形式.
Object.prototype.toLocaleString(): 返回当前对象对应的的本地字符串形式.
Object.prototype.hasOwnProperety(): 判断某个属性是否为当前对象的自身属性,还是继承自原型对象
Object.prototype.isPrototypeOf(): 判断当对象是否为另一个对象的原型.
Object.prototype.propertyIsEnumerable(): 判断某个属性是否为枚举.

Array对象

<article>

对象是一个容器,封装一些属性(property)和方法的集合,属性是对象的状态,方法是对象的行为.JavaScript语言的对象体系,不是基于"类"的,
而是基于构造函数(constructor)和原型(prototype).
构造函数是对象的模板,专门用来生成实例对象的函数.构造函数的首字母大写,内部使用this关键字,生成对象的时候
,必须使用new命令.
new命令: 执行构造函数,返回一个实例对象.
Object.create()创建实例对象.

this关键字: 属性和方法"当前"所在的对象,总返回一个对象.
绑定this的三种方法:
Function.prototype.call()
Function.prototype.apply()
Function.prototype.bind()
使用场合: 全局环境是使用this,指的是顶层对象window.在构造函数中的this,指的是实例对象

严格模式: "use strict"; 严格模式必须从代码的一开始就生效,即写在第一行.
异步操作:
浏览器的JS引擎有多个线程,每个脚本只能在一个线程上运行.采用"事件循环"机制.

<p>

垃圾回收机制:利用垃圾收集器.周期性回收那些程序中,不被其他引用所执行的变量的内存资源,多是局部变量,用完就废.
常见的二种方式: 标记清除与引用计数,标记清除,当变量进入执行环境,如声明一个变量,垃圾回收机制将其标记进入"进入环境",当这个变量离开这个环境时,函数执行结束将其标记为"离开环境",清除.引用计数跟踪每个值被使用的次数,该值得到赋值+1,该变量的值变为另外一个-1.
OOP:面向对象编程,对象是一个容器,封装了属性(Property)和方法(method).
JAVA和C++都有类的概念,而类是对象的模板,对象是类的实例,但JS不是基于"类",基于"构造函数(constructor)"和"原型链(prototype).
构造函数:

     普通的函数,函数名首字母大写.生成对象就要使用new.new的作用就是执行构造函数,返回一个实例对象.
     <script>
        "use strict";
        var Cup = function(){ this.money= 77;};
        //
        let app = function() {this.money=100;};
      let Sun = new app(); Sun.money;//100 new 创建一个对象 用new this指向空对象,不用new this指向全局.

  //使用现有对象创建对象Object.create()
     var linyi = {
          naem: 'linyi',
          age:  '1000',
          do:function() {
           console.log("Hi"+this.name+".");
                         }
                  };
    let  linyi2 = Object.create(linyi);
    linyi2.name ;
     </script>

对象继承:

      A对象继承B对象,拥有B对象所有的属性和方法.继承通过"原型对象prototype".

编程规范:

      行为与样式分离.命名法: 大骆驼式命名法:首字母大写.小骆驼命名法:首字母小写.
      文件资源命名: 文件名不得含有空格,全部小写,多个单单词用- 使用相对路径.如src=”//img/s.jpg”
      变量,函数使用小骆驼,构造函数使用大骆驼.常量全部大写加下划线_.尽量不使用eval()函数.
      尽量不使用var,使用const.优先使用箭头函数,只使用单引号包裹字符串,禁止使用双引号,如果字符串中包含单引号字 符,应使用模板字符串.

模块加载:

      AMD提前加载模块,不管是否调用,先解析所有模块.CMD提前加载,在真正需要时,才解析该模块
      AMD(Require.js) CMD(Sea.js) UMD(Commonjs+AMD) Common.js(Node.js) 

设计模式:

     设计模式有20多种,掌握常用四种: 单例模式,工厂模式,装饰器模式,观察者模式.

this指向:

    this是一个关键字,它用在不同的场合,但它总是返回一个对象.属性所在的当前对象是可变的,this的指向是可变的.

JavaScript的一切都是对象,运行环境也是对象,函数在某一个对象中运行时,this就是函数运行时所在的对象.但函数可以在不同执行环境运行,所以需要this执代当前的运行环境.

     三使用: 
             (1)全局环境: this执向顶层对象window.
             (2)构造函数: this执向实例对象.
             (3)对象的方法: 当对象的方法里面包含this,this的指向就是方法运行时所在的对象.该方法赋值给另一个对象时,就会改变this的指向.
     三避免:
             (1)避免多层this.
             (2)避免数组处理方法中的this.
             (3)避免回调函数中的this.
     三绑定:
             (1)call();绑定this到某对象.
             (2)apply();接受一个数组,改变this指向.
             (3)bind();绑定个某对象,返回一个新函数,

关键字: call,apply,bind this.

三个方法call,bind,apply用于将this绑定到函数,即改变this指向.区别在于调用的方式.call()立即执行函数,但需要把参数按顺序传入 .apply()会立即执行函数,但需要把所有参数组合为一个数组传入.这两个差不多,但call函数会把数字作为一个参数.
.bind()传入参数的方式与.call()相同,但是返回一个新的函数,以及对应的环境与和参数.
.toString :返回函数的字符串表示
    

执行上下文:

        当前代码的执行环境.注意当代码开始执行时,形成执行上下文栈,全局执行上下文永远在栈底,当前执行执行的函数在栈定.每个执行上下文都有三个重要属性:变量对象,作用域链,this注意js引擎开始执行js代码时,最先进入的是一个全局的执行上下文,在全局的执行上下文中每调用一个函数,就会创建一个执行上下文的内部对象(作用域),一个执行上下文定义一个函数执行环境,每次执行每次的执行上下文独一无二,多次调用创建多个.执行上下文逐次执行,直到回到全局上下文.每个函数都有不同的上下文和作用域,作用域基于函数,上下文基于对象.

作用域链:

        一个函数,我们在里面再创建一段函数,父函数调用子函数的变量叫做闭包,但形成了单个作用域链,从子函数开始不断往上查找,就是作用域链.在js中,函数也是对象,对象中有些属性我们可以访问,有些不可以.不可以访问的属性进攻js引擎存取,如scope(作用域),存储了执行上下文的集合.其中执行上下文的对象集合,呈链式链接,叫做作用域链.

严格模式:

      页面第一行声明 "use strict"; 作用:禁止一些不合理与不严禁的语法,增加报错的场合, 提高编译器的效率.
      不可对只读属性赋值(字符串长度等),函数不能有重名的参数.禁止隐式全局变量声明,禁止this执行全局,禁止删除变量.禁止使用with语句,创设eval作用域,非函数代码块不可声明函数. 

AJAX 跨域.内置对象: Object对象(首字母大写),Array,Boolean,Number,String,Math,Date,RegExp,JSON.
异步操作: 定时器和Promise对象.

异步操作:

   JavaScript只在一个线程上运行,但js引擎是多个线程.内部使用"事件循环(Event Loop)"机制.所有的任务分为同步任务和异步任务.同步任务在主线程排队,一个接着一个.异步任务:被引擎放在一边,进入任务队列的任务,不用执行完就可以执行下一步.
   任务队列: 主线程之外,用来处理当前程序处理的异步任务.异步任务可变同步,且有回调函数.

定时器:定时执行代码.主要有两个函数setTimeout()和setInterval().向任务队列添加定时任务.

Object:顶层对象是Window对象,但所有的对象都继承Object对象,即所有的对象都是Object的实例.Object的原生方法,分Object本身方法(静态方法)和实例方法.<script>
//本身的方法,直接定义在本身.
Object.print= function () {console.log(0)};
//实例方法是定义在Object的原型对象Object.prototype上的方法,它可以被Object实例直接使用.
Object.prototype.print = function (){console.log(this);}; var obj = new Object;obj.print;();
//作为工具函数
var obj = Object();//转换为对象
//作为构造函数,生成新对象.
var Obja = new Object();
//此为有一些静态方法和实例方法.</script>

Array:

原生对象(内置对象之一),也是一个构造函数,也可用他它生成新的数组.一个静态方法和二十个实例方法.<script>
 var apple = new Array(2); arr.length;//2
 apple.isArray(arr);//true;判断是不是数组.
 var apple = [1,2,3];
 apple.valueOf();//[1,2,3]返回该值.
 apple.toString();//"1,2,3"返回数组的字符串形式.
 apple.push(1);//再数组末端添加一个或多个元素.
 apple.pop();//删除最后一个元素.
 apple.shift();//删除数组最后一个元素. 
 apple.join();//以制定参数作为分隔符,分隔数组.
 ['a'].concat(['world']);//合并数组.
 apple.reverse();//颠倒数组顺序.
 apple.slice(2,3);//提取数组返回,新数组.
 apple.splice();//删除原数组的一部分成员.
 apple.sort();//数组重新排序.
 apple.map();//将数组成员依次传入参数函数.
 apple.forEach();//将数组成员依次传入参数,但不返回值.
 apple.filter();//用于过滤数组成员.
 apple.some();//一真则真.
 apple.every();//全真才真.
 apple.reduce();//从左到右相加.
 apple.reduceRight();//从右到左想加.
 apple.indexOf();//指定数组第一次出现的位置.
 apple.lastIndexOf();//制定数组最后一次出现的位置.
</script>

JSON: 一种数据交换文本格式,每个JSON对象是一个值.JSON的对值的类型和格式有严格的规定.null,空对象,空数值都是合法的JSON值
javascript内置对象JSON对象,用来处理JSON格式数据,有两个静态方法.JSON.stringify()和JSON.parse()
<script>
//JSON.parse()将JSON字符串转换成对应的值.
JSON.parse('{}')//{}
//JSON.stringify()将一个值转为JSON字符串.
JSON.stringify('abc')//""abc""
</script>
RegExp对象:
一种表达文本模式的方法.新建有二种.使用字面量用/包括.使用RegExp构造函数.
Date对象:
javascript原生的时间库,它以1970.1.1.00:00:00作为零点,上下可表示一亿天.
用法: 作为普通函数和构造函数 三种静态方法: Date.now() Date.parse() Date.UTC()
实例方法: ValueOf和toString,之外还有三类: to类,get类,set类.
<script>
//普通函数
Date()//直接使用,返回当前时间,加参数也没用.
//构造函数
let Today = new Date();
Today; //这里返回的实例等于Today.toString()
Today.valueOf() //返回距离零点的毫秒数===getTime
Date.now()//返回距离零点的毫秒数
Date.parse()//解析日期字符串.同样返回距离零点的毫秒数.解析失败,返回NaN.
Date.UTC() //接受年,月,日等变量作为参数,返回该时间距离零点的时间.
</script>
Math对象:

内置对象,该对象不是构造函数,不能生成实例,提供各种数学功能.内置一些静态数学和方法.<script>
//返回常数e ,2的自然对数,10的自然数,以2为底的e的对数,以10为底的e的对数,常数PI.0.5和2的平方根.
Math.E; Math.LN2; Math.LN10; Math.LOG2E;Math.LOG10E;Math.PI;Math.SQRT1_2;Math.SQRT2;
//上面的数学都是只读的,不可修改.
//静态方法
Math.abs(); Math.ceil(); Math.floor();Math.max();Math.min();Math.pow();Math.sqrt();
Math.log();Math.exp();Math.round();Math.random();
//一些三角函数方法
Math.sin();Math.cos();Math.tan();Math.asin();Math.acos();Math.atan();</script>

包装对象:三种原始类型的值(数值,字符串,布尔值)封装的对象.内置了一些属性和方法.包装对象都从Object对象继承两个方法valueOf和toString.valueOf()方法返回包装对象实例对应的原始类型的值.toString()方法返回对应的字符串形式.

Bollean对象:

JavaScript对象作为JavaScript的三个包装对象(Number,String)之一.
用法: 作为构造函数和日常使用.<script>
  //作为构造函数
  let a = new Boolean(true);
  typeof a;
  a.valueOf() //true
  //日常单独使用
  Boolean(null)//false;
  Boolean(1)//true;
  !!0//false
  !![]//ture;</script>

Number对象:

包装对象之一,用法二种:构造函数和工具函数.封装了一些静态属性和方法.也可自定义方法.<script>
   //用于构造函数
   let a = new Number(1); //a为生成值为数值的对象.
   //工具函数
   Number(true) //1 将true转为1 将任何数据类型的值转为数值.
   Number.NaN//NaN
   //实例方法
   (100).toString();//"10"数字转字符串
   (100).toFixed();//转换为对应的字符串
   (222).toExponential();//转换为科学计算法
   (333).toPrecision(1);//转换为指定位数的有效数字.
                                           </script>

String对象
包装对象之一,用来生成字符串对象(很像数组的对象,但不是数组).一个静态方法,一个实例属性,十六个实例方法.<script>
//作为工具方法使用,将任意类型的值转为字符串
String(true);//"trye"
String.fromCharCode(104,101,108,108,111);//将参数值代表的Unicode码点转为字符串.
'abcdegf'.length; //7
let rain = new String("abcdefg");
rain.charAt(1);//"b"返回指定位置的字符=='abcdefg'[1]
rain.charCodeAt(1)//98返回指定位置字符串的Uniocde码点.无参返回首字符的码点.参数为负数或大于时,返回NaN.
let b = new String('0101');
rain.concat(b)//"abcdefg0101"连接两个字符串,返回一个新字符串.
rain.slice(0,1)//"ab"返回参数截取的字符,参数为负时,倒计数.一参大二参时,返回空字符串"".
rain.substring(0,1)//"ab"相似与slice,规则不好记,尽量不要用,用slice.
rain.substr()//"ab"大致与slice相同,二参为截取的长度,为负时转为0.
rain.indexOf('c')//3字符出现的位置.
rain.lastIndexOf('c')//4从尾部开始计数位置.
rain.trim()//去除字符串的两端的空格.
rain.toLowerCase();//将字符串全部转为小写.
rain.toUpperCase();//全局字符串转为大写.
rain.math('abc');//abc返回匹配到的字符,无则null.
rain.search('ab');//1返回匹配的第一个相符字符的位置.
rain.serach('a','1');//'1bcdefg'替换字符
rain.spilt('|');//["a","b","c","d","e","f""g]返回分割的字符串
rain.localeComparse('banana')//比较二个字符,一大二,返回值大于0,相等返回0,小于返回小于0 </script>方法:
parseInt()将字符串转为整数 parseFloat()将字符串转为浮点数 isNaN()判断一个值是否为NaN.
isFinite()返回布尔值,表示某个值是否为正常的数值.false有+/-Infinity NaN undefined
split() 把字符串分割为字符串数组.
Math.ceil();向上取整. Math.round();四舍五入.Math.floor();向下取整.
valueOf() 返回某个字符串对象的原始值。
concat() 连接两个或更多的数组，并返回结果。
pop() 删除并返回数组的最后一个元素
push() 向数组的末尾添加一个或更多元素，并返回新的长度。
reverse() 颠倒数组中元素的顺序。
shift() 删除并返回数组的第一个元素
sort() 对数组的元素进行排序
<script>

  //正则表达式
  //检验基本日期格式
  var reg1 = /^\d{4}(\-|\/|\.)\d{1,2}\1\d{1,2}$/;
  var reg2 = /^(^(\d{4}|\d{2})(\-|\/|\.)\d{1,2}\3\d{1,2}$)|(^\d{4}年\d{1,2}月\d{1,2}日$)$/;
  //效验密码强度,必须是包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间。
  var reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/;
  //校验中文,字符串仅能是中文
  var reg = /^[\\u4e00-\\u9fa5]{0,}$/;
  //由数字、26个英文字母或下划线组成的字符串
  var reg = /^\\w+$/;
  //校验E-Mail 地址
  var reg = /[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/;
  //. 校验身份证号码 15或18
  var reg = /^[1-9]\\d{7}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{3}$/;
  var reg = /^[1-9]\\d{5}[1-9]\\d{3}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{3}([0-9]|X)$/;
  //效验日期
  var reg = /^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/;
  //. 校验金额,精确到2位小数
  var reg = /^[0-9]+(.[0-9]{2})?$/;
  //判断IE的版本
  var reg = /^.*MSIE [5-8](?:\\.[0-9]+)?(?!.*Trident\\\/[5-9]\\.0).*$/;
  //校验ipv6地址
  var reg = /(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))/;
  //校验IP-v4地址
  var reg = /\\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\b/;
  //检查URL的前缀,应用开发中很多时候需要区分请求是HTTPS还是HTTP，通过下面的表达式可以取出一个url的前缀然后再逻辑判断。
  if (!s.match(/^[a-zA-Z]+:\/\//)) {
      s = 'http://' + s; }
  //提取url链接
  var reg = /^(f|ht){1}(tp|tps):\/\/([\w-]+\.)+[\w-]+(\/[\w- ./?%&=]*)?/;
  //文件路径与扩展名效验,验证windows下文件路径和扩展名（下面的例子中为.txt文件）
  var reg = /^([a-zA-Z]\\:|\\\\)\\\\([^\\]+\\)*[^\\/:*?"<>|]+\\.txt(l)?$/;
  //提取Color Hex Codes,有时需要抽取网页中的颜色代码，可以使用下面的表达式。
  var reg = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
  //提取网页图片,假若你想提取网页中所有图片信息，可以利用下面的表达式。
  var reg = /\\< *[img][^\\>]*[src] *= *[\\"\']{0,1}([^\\"\'\ >]*)/;
  //提取页面超链接,提取html中的超链接
  var reg = /(<a\\s*(?!.*\\brel=)[^>]*)(href="https?:\/\/)((?!(?:(?:www\\.)?'.implode('|(?:www\\.)?', $follow_list).'))[^"]+)"((?!.*\\brel=)[^>]*)(?:[^>]*)>/;
  //查找CSS属性
  var reg = /^\\s*[a-zA-Z\\-]+\\s*[:]{1}\\s[a-zA-Z0-9\\s.#]+[;]{1}/;
  //抽取注释,如果你需要移除HMTL中的注释，可以使用如下的表达式。
  var reg = /<!--(.*?)-->/;
  //转换千分位分隔符
  return total.toString().replace(/\B(?=(\d{3})+$)/g, ',');

</script>
跨域 :一个域下的文档或脚本试图去请求另一个域下的资源.(广义).浏览器同源策略限制的一类请求场景(狭义).

如: 资源跳转: A链接,重定向,表单提交.资源嵌入:<link><script></script><img><frame>等dom标签
样式中:background:url().@font-face()等文件外链.脚本请求:js发起的ajax请求,dom和js对象的跨域操作等.

跨域限制:

 服务器的一个行为,当开启对某些域名的访问限制后,只有同域或指定域名下的页面可以调用.一般情况下只在用浏览器端存在,对于服务器/ios/andriod等客户端是不存在的.

同源策略(SOP)

 它是一种约定,即"协议/域名/端口"必须相同.防止XXS,CSRF等攻击.限制了Cookie,LocalStorage和IndexDB无法读取.DOM和JS对象无法获得.AJax请求不能发送.

get请求与post请求:

  本质都是tcp协议,http的规定和浏览器与服务器的限制,在应用的过程有所不同,get产生一个tcp数据包,post产生两个数据包,GET求,浏览器会把http的header和data一并发送出去.服务器响应200(返回数据),对于post,浏览器先发header,服务器响应100 浏览器再送data,服务器响应200(返回数据).

前后端通信中ajax只支持同源策略,websocket不受同源策略影响,CRO新标准,都支持.
9种跨域解决方案
(1)jsonp跨域(2)document.domain + iframe跨域 (3)location.hash + iframe (4)window.name + iframe跨域
(5)postMessage跨域(6)跨域资源分享(CROS)(7)nginx代理跨域 (8)node中间件代理跨域(9)WebSocket协议跨域
json: javascript对象表示法,轻量级的文本数据交换格式.具有层级结构,可使用AJAX进行传输.json语法是js语法的子集,
JSONP:是json的一种"使用模式",可以让网页从别的域名获取资料.只支持GET请求,CORS支持所有类型的HTTP请求.JSONP优势在于支持老师浏览器,以及可以向不支持CORS的网站请求数据.原理是script src 本质就是一个回调函数,然后在远程服务器上调用这个函数并且将json数据形式作为参数传递,完成回调.对象格式的字符串,轻量的数据传输格式. 注意:键值需要""包起来.

 两个方法:JSON.parse 和 JSON.stringify  JSON.parse，将后台传来的字符串转化为对象。其字符串的内容就是对象才需要这个转化.
 JSON.stringify，将后台传来的对象转化为字符串。

<script>

  //原生实现
  var script = document.createElement('script');
  script.type = 'text/javascript';
  //传参并指定回调执行函数为onBack
  script.src = "http://www.domain2.com:8080/login?user=admin&callback=onBack"
  document.head.appendChild(script);
  //回调函数
  function onBack(res) {
     alert({JSON.stringify(res)});
  }
  //服务器返回如下(返回时即执行全局函数)
  onBack({"status":true,"user":"admin"})
 //jqery ajax
  $.ajax({
    url: 'http://www.domain2.com:8080/login',
    type: 'get',
    dataType: 'jsonp', //请求方式为jsonp
    jsonpCallback: "onBack" //自定义回调函数
    data: {}
  });

//方法document.domain +iframe 仅限于主域相同,子域不同的跨域应用场景
//两个页面都通过js强制设置document.domain为基础主域,实现同域.

 //父
 <iframe id="iframe" src="http://child.domian.com/b.html"><iframe>
   document.domain = "domain.com";
   var user = 'admin';
 //子
  document.domain = 'domain.com';
  alert('get js data from paretn --->' + window.parent.user)
 //添加<script>标签的方法
function addScriptTag(src) {
    var script = document.createElement('script');
    script.setAttribute("type", "text/javascript");
    script.src = src;
    document.body.appendChild(script);
}

// 向后台发起请求（链接是胡乱写的）
addScriptTag('http://www.qq.com/getJsonp?callback=jsonCallback')
 
//jQuery ajax,逐渐退出历史舞台,基于原生的XHR开发.Ajax是用JS向服务器发送请求,并获取服务器返回的内容,整个页面并没有刷新.通常用Ajax请求JSON的格式的数据
 $.ajax({
   type: 'POST',
   url: url,
   data: data,
   dataType: dataType,
   success: function () {},
   error: function () {}
});

//axios目前主力将军,promise实现版本
axios({
method: 'post',
url: '/user/12345',
data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
        }
    })
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });

//Fetch 未来的娇子 还需成长
try {
  let response = await fetch(url);
  let data = response.json();
  console.log(data);
} catch(e) {
  console.log("Oops, error", e);
}

//原生跨域请求

var script = document.createElement('script');
script.type = "text/javascript";
//传参数并指定回调执行函数为onBack
script.src = "http://www.baidu.com:8080/login?user=admin&callback=onBack;"
document.head.appendChild(script);
//回执行函数
function onBack(res) {
  alert(JSON.stringify(res));
}

$.ajax({
  url: 'http://www.baidu.co:8080/login',
  type; 'get',
  dataType: 'jsonp', //请求方式为jsonp
  jsonCallback: "onBack",
  data: {}
});
//Vue
this.$http.jsonp('http://www.baidu.com:8080/login',{
   params: {},
   jsonp: 'onBack'
}).then((res) => {
 console.log(res);
})

</script>