前端_JavaScript_面向對象編程

時間  2020-12-08
標籤 javascript html java node ios nginx web ajax 正則表達式 算法 欄目 JavaScript 简体版
原文   原文鏈接

面向對象編程

Objects對象的原生方法分紅兩類：Object自身的方法(靜態方法)和Object的實例方法。注意Object是JavaScript的原生對象，全部的其餘對象都是繼承自Object對象，故其它對象都是Object的實例。javascript

Object的靜態方法

Object.keys()方法與Object.getOwnPropertyNames()，參數是對象，返回一個數組，數組的值是改對象自身的全部屬性名,——區別在於keys返回可枚舉的屬性，getOwnPropertyNames返回不可枚舉的屬性值。html

Object的實例方法

Object.prototype.valueOf():返回當前對象的對應值.
Object.prototype.toString():返回當前對象對應的的字符串形式.
Object.prototype.toLocaleString(): 返回當前對象對應的的本地字符串形式.
Object.prototype.hasOwnProperety(): 判斷某個屬性是否爲當前對象的自身屬性,仍是繼承自原型對象
Object.prototype.isPrototypeOf(): 判斷當對象是否爲另外一個對象的原型.
Object.prototype.propertyIsEnumerable(): 判斷某個屬性是否爲枚舉.java

Array對象

<article>

對象是一個容器,封裝一些屬性(property)和方法的集合,屬性是對象的狀態,方法是對象的行爲.JavaScript語言的對象體系,不是基於"類"的,
而是基於構造函數(constructor)和原型(prototype).
構造函數是對象的模板,專門用來生成實例對象的函數.構造函數的首字母大寫,內部使用this關鍵字,生成對象的時候
,必須使用new命令.
new命令: 執行構造函數,返回一個實例對象.
Object.create()建立實例對象.node

this關鍵字: 屬性和方法"當前"所在的對象,總返回一個對象.
綁定this的三種方法:
Function.prototype.call()
Function.prototype.apply()
Function.prototype.bind()
使用場合: 全局環境是使用this,指的是頂層對象window.在構造函數中的this,指的是實例對象ios

嚴格模式: "use strict"; 嚴格模式必須從代碼的一開始就生效,即寫在第一行.
異步操做:
瀏覽器的JS引擎有多個線程,每一個腳本只能在一個線程上運行.採用"事件循環"機制.nginx

<p>web

垃圾回收機制:利用垃圾收集器.週期性回收那些程序中,不被其餘引用所執行的變量的內存資源,可能是局部變量,用完就廢.
常見的二種方式: 標記清除與引用計數,標記清除,當變量進入執行環境,如聲明一個變量,垃圾回收機制將其標記進入"進入環境",當這個變量離開這個環境時,函數執行結束將其標記爲"離開環境",清除.引用計數跟蹤每一個值被使用的次數,該值獲得賦值+1,該變量的值變爲另一個-1.
OOP:面向對象編程,對象是一個容器,封裝了屬性(Property)和方法(method).
JAVA和C++都有類的概念,而類是對象的模板,對象是類的實例,但JS不是基於"類",基於"構造函數(constructor)"和"原型鏈(prototype).
構造函數:ajax

普通的函數,函數名首字母大寫.生成對象就要使用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>

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程