Web前端學習-第五課JavaScript篇

Q9：什麼是跨域？什麼是JSON？什麼是JSONP？解決跨域問題有哪些方法？請結合代碼和文字說明。

跨域：由於JavaScript同源策略（一段腳本只能讀取來自同一來源的窗口和文檔的屬性，同一來源指主機名，協議和端口號的組合）的限制，a.com域名下的js沒法操做b.com域名下的對象，只要是協議，域名，端口有任何一個不一樣都被當作是不一樣的域；

 

Json（JavaScript Object Notation）：一種輕量級的數據交換格式。基於ECMAScript的一個子集。採用徹底獨立於語言的文本格式，可是也使用了相似相似於C語言家族的習慣，這些特性是json成爲理想的交換語言，易於人閱讀也易於機器解析和生成。

JSONP（JSON with Padding）：是JSON的一種使用模式，可用於解決主流瀏覽器的跨域數據訪問的問題。因爲同源策略，通常來講位於server1.example.com的網頁沒法與不是server1.example.com的服務器溝通，而HTML的<script>元素是一個列外。利用<script>元素這個開放策略，網頁能夠獲得從其餘來源動態產生的json自理啊，而這種使用模式就是所謂的JSONP。使用JSONP抓到的並非JSON，而是任意的JavaScript，用JavaScript直譯器執行而不是用JSON解析器解析。

JSONP優勢：不想XMLHttpRequest對象實現的ajax請求那樣受到同源策略的限制，兼容性好，在古老的瀏覽器中均可以運行，不須要XMLHttpRequest或ActiveX的支持，而且在請求完畢後能夠經過調用callback的方式回傳結果。             缺點：只支持GET請求不支持POST等其餘類型的HTTP請求，不能解決不一樣域的兩個頁面之間如何調用JavaScript調用的問題。

解決跨域問題：（http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html）

  （http://segmentfault.com/a/1190000000718840）

  （http://www.cnblogs.com/oneword/archive/2012/12/03/2799443.html）

 

跨域資源共享（CORS）:CORS基本思想使用自定義的http頭部讓瀏覽器與服務器進行溝通，從而決定應該是成功仍是失敗；

 

 

絕對路徑即要跨域訪問的接口地址，服務器端對於CORS的支持主要是經過設置Access-Control-Allow-Origin來進行的。

 

經過jsonp跨域：JSONP由兩部分組成，回調函數（當響應到來時應該在頁面中調用的函數）和數據（傳入回調函數中的JSON數據）；在js中直接用XMLHttpRequest請求不一樣域上的數據時不能夠，可是在頁面上引入不一樣域上的js腳本文件卻能夠，JSONP正是利用此特性：

 

Js文件載入成功後會執行在URL參數中指定的函數，而且會把須要的json數據做爲參數傳入，因此JSONP是須要服務器端的頁面進行相應的配合。

 

輸出結果爲dosomething（[‘a’,’b’,’c’]）；

若是頁面使用的jQuery：

 

jQuery會自動生成一個全局函數來替換callback=？中的問好，以後獲取到數據後又會自動銷燬，實際上就是起一個臨時代理函數的做用，$.getJSON方法會自動判斷是否跨域，不跨域的話就調用普通的ajax方法，跨域的話則會以異步加載js文件的形式來調用jsonp的回調函數。

 

 

經過修改document.domain來跨子域：

將兩個頁面的document.domain設置成相同的域名，注意設置是有限的，只能把它設置成自身或更高一級的父域，且主域必須相同。

 

修改document.domain的方法只適用於不一樣子域的框架間的交互。

 

使用window.name來進行跨域：即在一個窗口（window）的生命週期內，窗口載入的全部的頁面都是共享一個window.name的，每一個頁面對window.name都有讀寫的權限，他是持久存在一個窗口載入過的全部頁面中。

 

使用HTML5的window.postMessage方法跨域：window.postmessage(message,targetOrigin)方法是html5 新引進的特性，可使用它來向其餘的window對象發送消息，不管這個window對象是屬於同源或不一樣源。

 

jQuery：（jsonp方式）

 

執行此段js時，js向服務器發出了請求：http://192.168.0.5/Web/web1.aspx?jsoncallback=jsonp134505244726&_=1354505244742

而服務器也相應的返回了對象：jsonp1354506338864({「name」:」Zhangsan」,」date」:」2015-8-4」})

此時實現了跨域範文數據的要求。

 

動態建立script：

 

 

利用iframe和location.hash：利用location.hash來進行傳值。在url:http://a.com#helloworld中的#helloworld就是lacation.hash，改變hash並不會致使頁面刷新，因此能夠利用hash值來進行數據傳遞，可是數據容量是有限的，假設域名a.com下的文件cs1.html要和cnblogs.com域名下的cs2.html傳遞信息，cs1.html首先建立一個隱藏的iframe，iframe的src指向cnblogs.com域名下的cs2.html頁面，這是的hash值能夠作參數傳遞用。cs2.html響應請求後再將經過修改cs1.html的hash值來傳遞參數（因爲兩個頁面不在同一個域下IE，Chrome不容許修改parent.location.hash的值，因此要藉助a.com域名下的一個代理iframe；Firefox能夠修改）。同時在cs1.html上加一個定時器，隔離一段時間來判斷location.hash的值有沒有變化，一點有變化則獲取hash值

 

 

Q10：請描述一下JavaScript定時器。使用定時器編寫一個時鐘。

 

JavaScript是運行於單線程中的，而定時器僅僅是在將來某個時間執行，執行具體時間不能被保證，在頁面的生命週期中不一樣的時間有可能有其餘代碼在控制JavaScript的裏進程。瀏覽器只是負責排序，紙牌某個代碼在某個時間點運行；定時器對隊列的工做方式：當特定的時間過去，將代碼插入，添加到隊列並不覺得會立刻執行，只能說會盡快執行，設定時間到達時只是被加入到隊列中，若是這個時間點隊列是空的則會被立刻執行；

 

 

 

setInterval()方法會不停的調用函數，直到clearInterval（）被調用或窗口被關閉。由setInterval（）返回的ID值可用做clearInterval（）方法的參數。關於重複定時器可使用setTimeout來重複建立定時器，也能夠直接用setInterval，使用setInterval建立的定時器確保了定時器規則的插入隊列中這個方法在於代碼可能在再次添加到隊列以前尚未完成執行，可能尋到定時器重複運行好幾回而中間沒有停頓，如今搜索殷勤能避免這個問題，當使用setInterval時，僅當沒有定時器的任何其餘代碼時，纔將定時器代碼添加到隊列中來確保定時器代碼加入到隊列的時間間隔是指定的間隔，因此使用setInterval會存在兩個問題：某些間隔會被跳過；多個定時器的代碼執行間隔可能會比預期的小。爲避免此問題使用鏈式setTimeout調用：

 

 

 

倒記計時器：timename=setTimeout(「function();」,delaytime);只做用一次

循環計時器：timename=setInterval(「function();」,delaytime);反覆做用

 

獲取焦點：if(「mid」 == document.activeElement.id){alert();}」mid」表單對應的ID