JavaScript JSON AJAX 同源策略 跨域請求

網頁和Ajax和跨域的關係

1 Ajax使網頁能夠動態地、異步地的與服務器進行數據交互，可讓網頁局部地與服務器進行數據交互

2 Ajax強調的是 異步，可是會碰到跨域的問題。

3 而有不少技術能夠解決跨域問題。

eg:不少公共地圖，身份證查詢的API都使用了CORS技術，在respons headers裏面作了設置。

1、JSON 介紹

1. JSON: JavaScript Object Notation 

是一種輕量級的數據交換格式。 它基於ECMAScript的一個子集。 JSON採用徹底獨立於語言的文本格式(多種後臺語言均可以處理json，就很充分的說明了這一點)，可是也使用了相似於C語言家族的習慣（包括C、C++、C#、Java、JavaScript、Perl、Python等）。這些特性使JSON成爲理想的數據交換語言。

Because of this similarity, instead of using a parser (like XML does), a JavaScript program can use standard JavaScript functions to convert JSON data into native JavaScript objects. 

The JSON syntax is a subset of the JavaScript syntax.   JSON 語法是 JavaScript 語法的子集。 

JSON Uses JavaScript Syntax
Because JSON syntax is derived from JavaScript object notation, very little extra software is needed to work with JSON within JavaScript. 

JSON values can be:
A number (integer or floating point)
A string (in double quotes)
A Boolean (true or false)
An array (in square brackets)
An object (in curly braces)
null 

2. Javascript中的JSON對象 MDN

The JSON object contains methods for parsing JavaScript Object Notation (JSON) and converting values to JSON. It can't be called or constructed, and aside from its two method properties it has no interesting functionality of its own.

兩個方法:

一、    JSON.parse()        把JSON object 轉化成 javascript中的 數值類型

二、    JSON.stringify()     剛好相反

3.  Josn解析

2、AJAX

wiki

Ajax (short for asynchronous JavaScript and XML(XML只是以前名字的來歷，如今更多的是json格式的數據交換，固然也有其它數據格式)) is a set of(多種技術的合集) web development techniques using many web technologies on the client-side to create asynchronous Web applications. With Ajax, web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. By decoupling the data interchange layer from the presentation layer, Ajax allows for web pages, and by extension web applications, to change content dynamically without the need to reload the entire page(容許網頁或是web應用來動態地、異步地的交換數據). In practice, modern implementations commonly substitute JSON for XML(如今更多使用json代替xml) due to the advantages of being native to JavaScript.

Ajax is not a technology, but a group of technologies. HTML and CSS can be used in combination to mark up and style information. The DOM is accessed with JavaScript to dynamically display – and allow the user to interact with – the information presented. JavaScript and the XMLHttpRequest object provide a method for exchanging data asynchronously between browser and server to avoid full page reloads.

 Asynchronous JavaScript + XML,(MDN) while not a technology in itself, is a term coined (不是新技術，而是一種術語)in 2005 by Jesse James Garrett, that describes a "new" approach to using a number of existing technologies together, including: HTML or XHTML, Cascading Style Sheets, JavaScript,The Document Object Model, XML, XSLT, and most importantly the XMLHttpRequest object.   (The keystone of AJAX is the XMLHttpRequest object.)
AJAX is a misleading name. You don't have to understand XML to use AJAX.

1 The XMLHttpRequest Object   (MDN)

建立xhr對象

All  modern browsers support the XMLHttpRequest object.
eg:

var xhttp;

if (window.XMLHttpRequest) {

    xhttp = new XMLHttpRequest();

    } else {

    // code for IE6, IE5

    xhttp = new ActiveXObject("Microsoft.XMLHTTP");

}

2  http請求

So essentially  GET is used to retrieve remote data, and  POST is used to insert/update remote data.

XHR(XMLHttpRequest 對象)的 屬性中的三個:

1. status

• 1xx：指示信息--表示請求已接收，繼續處理。
• 2xx：成功--表示請求已被成功接收、理解、接受。
• 3xx：重定向--要完成請求必須進行更進一步的操做。
• 4xx：客戶端錯誤--請求有語法錯誤或請求沒法實現。
• 5xx：服務器端錯誤--服務器未能實現合法的請求。

      100——客戶必須繼續發出請求
　　101——客戶要求服務器根據請求轉換HTTP協議版本
　　200——成功
　　201——提示知道新文件的URL
　　300——請求的資源可在多處獲得
　　301——刪除請求數據
　　404——沒有發現文件、查詢或URl
　　500——服務器產生內部錯誤

2. readyState   

存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。

                       0: 請求未初始化,open()方法尚未調用

                       1: 服務器鏈接已創建

                       2: 請求已接收，接收到頭信息了

                       3: 請求處理中，接收到響應主體了

                       4: 請求已完成，且響應已就緒，也就是相應已經完成了

3. onreadystatechange    

An EventHandler that is called whenever the readyState attribute changes. The callback is called from the user interface thread.

request.open(method,url,asy)

requset.send(string)

若是是get請求，則參數直接拼接在url裏面了

若是是send請求，則參數須要寫在send()方法裏面

post請求

   function post(){  

var req = createXMLHTTPRequest();  

if(req){  

        req.open("POST", "http://test.com/", true);  

        req.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=gbk;");     

        req.send("keywords=手機");  

        req.onreadystatechange = function(){  

if(req.readyState == 4){  

if(req.status == 200){  

                    alert("success");  

                }else{  

                    alert("error");  

                }  

            }  

        }  

    }  

}  

get請求

function get(){  

var req = createXMLHTTPRequest();  

if(req){  

        req.open("GET", "http://test.com/?keywords=手機", true);  

        req.onreadystatechange = function(){  

if(req.readyState == 4){  

if(req.status == 200){  

                    alert("success");  

                }else{  

                    alert("error");  

                }  

            }  

        }  

        req.send(null);  

    }  

} 

3、同源策略

瀏覽器同源政策及其規避方法   

同源策略

 同源策略限制了一個源（origin）中加載文本或腳本與來自其它源（origin）中資源的交互方式。

同源政策的目的，是爲了保證用戶信息的安全，防止惡意的網站竊取數據。

若是非同源，共有三種行爲受到限制。

• （1） Cookie、LocalStorage 和 IndexDB 沒法讀取。
• （2） DOM 沒法得到。
• （3） AJAX 請求不能發送。

Cookie

Cookie老是保存在客戶端中，按在客戶端中的存儲位置，可分爲內存Cookie和硬盤Cookie。 

4、跨域

 跨域的含義

 只要協議、域名、端口有任何一個不一樣，都被看成是不一樣的域

javascript出於安全方面的考慮，不容許跨域調用其它頁面的對象

 

同源政策規定，AJAX請求只能發給同源的網址，不然就報錯。

除了架設服務器代理（瀏覽器請求同源服務器，再由後者請求外部服務），有三種方法規避這個限制。

• JSONP

• WebSocket

• CORS

解決跨域問題的幾種方法：

 1 JSONP

說說JSON和JSONP，也許你會豁然開朗，含jQuery用例

JSON是一種數據交換格式，而JSONP是一種依靠開發人員的聰明才智創造出的一種非官方跨域數據交互協議。

JSONP ( JSON with Padding or JSON-P) is a technique used by web developers to overcome(克服跨域限制) the cross-domain restrictions imposed by browsers' same-origin policythat limits access to resources retrieved from origins other than the one the page was served by.

 基本思想是，網頁經過添加一個 <script>元素，向服務器請求JSON數據，這種作法不受同源政策限制；服務器收到請求後， 將數據放在一個指定名字的回調函數裏傳回來。

 該協議的一個要點就是容許用戶傳遞一個callback參數給服務端，而後服務端返回數據時會將這個callback參數做爲函數名來包裹住JSON數據，這樣客戶端就能夠隨意定製本身的函數來自動處理返回數據了.

能夠這樣理解：本身先寫好一個回調函數，而後讓「服務器調用」。

2 WebSocket

 

3 CORS

跨域資源共享 CORS 詳解

CORS是一個W3C標準，全稱是"跨域資源共享"（Cross-origin resource sharing）。

The CORS standard describes new HTTP headers(新的請求頭) which provide browsers and servers a way to request remote URLs only when they have permission(當有「許可」時).

The HTTP headers that relate to CORS are:

Request headers

• Origin
• Access-Control-Request-Method
• Access-Control-Request-Headers

Response headers

• Access-Control-Allow-Origin
• Access-Control-Allow-Credentials
• Access-Control-Expose-Headers
• Access-Control-Max-Age
• Access-Control-Allow-Methods
• Access-Control-Allow-Headers

CORS vs JSONP

CORS can be used as a modern alternative(現代瀏覽器替換jsonp的模式) to the JSONP pattern.

While JSONP supports only the GET request method, CORS also supports other types(支持其它請求) of HTTP requests.

Using CORS enables a web programmer to use regular XMLHttpRequest, which supports better error handling than JSONP.

On the other hand, JSONP works on legacy browsers(老式瀏覽器) which predate CORS support. CORS is supported by most modern web browsers. Also, while JSONP can cause cross-site scripting (XSS) issues where the external site is compromised, CORS allows websites to manually parse responses to ensure security.

CORS

CORS須要瀏覽器和服務器同時支持。目前，全部瀏覽器都支持該功能，IE瀏覽器不能低於IE10。

整個CORS通訊過程，都是瀏覽器自動完成，不須要用戶參與。對於開發者來講，CORS通訊與同源的AJAX通訊沒有差異，代碼徹底同樣。瀏覽器一旦發現AJAX請求跨源，就會自動添加一些附加的頭信息，有時還會多出一次附加的請求，但用戶不會有感受。

所以，實現CORS通訊的關鍵是服務器。只要服務器實現了CORS接口，就能夠跨源通訊。