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接口，就能够跨源通讯。