Ajax 与跨域 小结

原生Ajax

Ajax，是对Asynchronous JavaScript + XML 的简写。这一技术能够向服务器请求额外的数据而无须卸载页面，会带来更好的用户体验。
使用XHR 对象取得新数据，然后再通过DOM 将新数据插入到页面

var xhr = new XMLHttpRequest();

在使用XHR 对象时，要调用的第一个方法是open()，它接受3 个参数：要发送的请求的类型（”get”、”post”等）、请求的URL 和表示是否异步发送请求的布尔值。

xhr.open("get", "example.php", false);xhr.send(null);

由于这次请求是同步( 第三个参数设为false )的，JavaScript 代码会等到服务器响应之后再继续执行。在收到响应后，响应的数据会自动填充XHR 对象的属性，相关的属性简介如下。

 responseText：作为响应主体被返回的文本。 responseXML：如果响应的内容类型是"text/xml"或"application/xml"，这个属性中将保存包含着响应数据的XML DOM 文档。 status：响应的HTTP 状态。 statusText：HTTP 状态的说明。

像前面这样发送同步请求当然没有问题，但多数情况下，我们还是要发送异步请求，才能让JavaScript 继续执行而不必等待响应。此时，可以检测XHR 对象的readyState 属性，该属性表示请求/响应过程的当前活动阶段。

var xhr = new XMLHttpRequest();xhr.onreadystatechange = function(){    if (xhr.readyState == 4){        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){            alert(xhr.responseText);        } else {            alert("Request was unsuccessful: " + xhr.status);        }    }};xhr.open("get", "example.txt", true);xhr.send(null);

另外，在接收到响应之前还可以调用abort()方法来取消异步请求，如下所示：xhr.abort();

HTTP头部信息

每个HTTP 请求和响应都会带有相应的头部信息。不同浏览器实际发送的头部信息会有所不同。
使用setRequestHeader()方法可以设置自定义的请求头部信息。这个方法接受两个参数：头部字段的名称和头部字段的值。要成功发送请求头部信息，必须在调用open()方法之后且调用send()方法之前调用setRequestHeader()。

var xhr = new XMLHttpRequest();xhr.onreadystatechange = function(){    if (xhr.readyState == 4){        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){            alert(xhr.responseText);        } else {            alert("Request was unsuccessful: " + xhr.status);        }    }};xhr.open("get", "example.php", true);xhr.setRequestHeader("MyHeader", "MyValue");xhr.send(null);

调用XHR 对象的getResponseHeader()方法并传入头部字段名称，可以取得相应的响应头部信息。而调用getAllResponseHeaders()方法则可以取得一个包含所有头部信息的长字符串

var myHeader = xhr.getResponseHeader("MyHeader");var allHeaders = xhr.getAllResponseHeaders();

GET and POST

对XHR 而言，位于传入open()方法的URL 末尾的查询字符串必须经过正确的编码才行。

url += (url.indexOf("?") == -1 ? "?" : "&");url += encodeURIComponent(name) + "=" + encodeURIComponent(value);

encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ’ ( ) 。 其他字符（比如 ：;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号），都是由一个或多个十六进制的转义序列替换的。

xhr.open("post", "example.php", true);

发送POST 请求的第二步就是向send()方法中传入某些数据。

跨域

跨域资源共享（CORS）

CORS（Cross-Origin Resource Sharing，跨源资源共享)使用自定义的HTTP 头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。
在发送请求时，需要给它附加一个额外的Origin 头部，其中包含请求页面的源信息（协议、域名和端口），以便服务器根据这个头部信息来决定是否给予响应。

xhr.setRequestHeader("Origin", "http://www.nczonline.net");

如果服务器认为这个请求可以接受，就在Access-Control-Allow-Origin 头部中回发相同的源信息（如果是公共资源，可以回发”*”）.

Access-Control-Allow-Origin: http://www.nczonline.net

JSONP

JSONP 是JSON with padding（填充式JSON 或参数式JSON）的简写.
JSONP 是通过动态<script>元素来使用的，使用时可以为src 属性指定一个跨域URL。这里的<script>元素与<img>元素类似，都有能力不受限制地从其他域加载资源。因为JSONP 是有效的JavaScript 代码，所以在请求完成后，即在JSONP 响应加载到页面中以后，就会立即执行。

var script = document.createElement("script");script.src = "http://freegeoip.net/json/?callback=handleResponse";document.body.insertBefore(script, document.body.firstChild);

请求到的资源：

handleResponse({"ip":"121.248.49.251","country_code":"CN","country_name":"涓浗","region_code":"32","region_name":"姹熻嫃鐪�","city":"鍗椾含","zip_code":"","time_zone":"Asia/Shanghai","latitude":32.0617,"longitude":118.7778,"metro_code":0});

然后立即执行预定义的callback函数即handleResponse();

function handleResponse(response){alert("You’re at IP address " + response.ip + ", which is in " +response.city + ", " + response.region_name);}

缺点：
JSONP 是从其他域中加载代码执行。如果其他域不安全，很可能会在响应中夹带一些恶意代码。
要确定JSONP 请求是否失败并不容易。

跨文档消息传输

不同网页文档、不同端口、不同域之间进行消息传递。
发送消息：

window.postMessage(message,targetOrigin)

接收消息：

window.onmessage = function(ev){alert(event.data)};

服务器发送事件

SSE（Server-Sent Events，服务器发送事件），服务器发送到客户端的单向通信机制，适用于实时业务。

var source = new EventSource("myevents.php");

接收数据：

source.onmessage = function(event){    var data = event.data;    //处理数据};

Web Socket

Web Sockets 的目标是在一个单独的持久连接上提供全双工、双向通信。

var socket = new WebSocket("ws://www.example.com/server.php");socket.send("Hello world!");socket.onmessage = function(event){    var data = event.data;    //处理数据};

jQuery 中 Ajax

通过jQuery.ajax( url [, settings ] )接口执行Ajax请求。
url 类型: String
一个用来包含发送请求的URL字符串。
其他参数：
type (默认: ‘GET’)
类型: String
请求方式 (“POST” 或 “GET”)， 默认为 “GET”。注意:其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。

async: 默认设置下，所有请求均为异步请求（也就是说这是默认设置为 true ）。如果需要发送同步请求，请将此选项设置为 false 。跨域请求和 dataType: “jsonp” 请求不支持同步操作

cache:(默认: true, dataType为”script”和”jsonp”时默认为false)
如果设置为 false ，浏览器将不缓存此页面

data:发送到服务器的数据。将自动转换为请求字符串格式。

dataType :
“xml”: 返回 XML 文档，可用 jQuery 处理。.
“html”: 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。
“script”: 把响应的结果当作 JavaScript 执行。并将其当作纯文本返回。默认情况下不会通过在URL中附加查询字符串变量 “_=[TIMESTAMP]” 进行自动缓存结果，除非设置了cache参数为true。Note: 在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
“json”: 把响应的结果当作 JSON 执行，并返回一个JavaScript对象。
“jsonp”: 以 JSONP 的方式载入 JSON 数据块。会自动在所请求的URL最后添加 “?callback=?”。默认情况下不会通过在URL中附加查询字符串变量 “_=[TIMESTAMP]” 进行自动缓存结果，除非将 cache参数设置为true。
“text”: 返回纯文本字符串。

$.ajax({    type:'get',    url:'',    dataType:'jsonp',}).success()  .error()

angularJS 中ajax

使用内置的$http服务直接同外部进行通信。

$http({    method: 'GET',    url: '/api/users.json'    }).success(function(data,status,headers,config) {    // 当相应准备就绪时调用    }).error(function(data,status,headers,config) {    // 当响应以错误状态返回时调用});

快捷方法：
1. get()

$http.get('/api/users.json');

1. jsonp()

$http.jsonp("/api/users.json?callback=JSON_CALLBACK");

。。。
AngularJS传递给then()方法的响应对象包含四个属性。
 data（字符串或对象）
这个数据代表转换过后的响应体（如果定义了转换的话）。
 status（数值型）
响应的HTTP状态码。
 headers（函数）
这个函数是头信息的getter函数，可以接受一个参数，用来获取对应名字的值。
 config（对象）
这个对象是用来生成原始请求的完整设置对象。
 statusText（字符串）
这个字符串是响应的HTTP状态文本。

$http({    method: 'GET',    url: '/api/users.json'}).then (resp) {    // 读取X-Auth-ID    resp.headers('X-Auth-ID');});