Ajax和跨域

Ajax

关于Ajax你要知道：

1. AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
2. AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
3. AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
4. AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
   核心对象-----XMLHTTPRequest下面简称XHR，浏览器中创建XHR对象要使用XMLHTTPRequest构造函数。

 	  var xhr=new XMLHTTPRequest();

XHR的用法

在使用XHR对象时，要调用的第一个方法是open（）,他接受三个参数：要发送的请求的类型（“get”,“post”）、请求的URL和表示是否异步和同步发送请求的布尔值。下面是调用该方法的例子：

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

这行代码回启动一个针对example.php的get请求。有两点需要说明：一是URL相当于执行代码的当前页面；二是调用open（）方法的并不会真正发送请求，而只是启动一个请求以备发送。要发送特定的请求还需要调用send（）方法。send（）方法接收一个参数，即作为请求主体发送的数据。如果是get方法则send（null），而post方法则传入某些数据，格式不限。

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

XHR对象相关属性：
responseText：作为响应主体被返回的文本。
responseXML：如果响应的内容类型是"text/xml"或"application/xml，这个属性中将保存包含着响应数据的XML DOM文档。
status：响应HTTP状态。
这里普及一下HTTP响应的状态代码：

statusText：HTTP的状态说明。
因此就有这样的ajax请求：

	xhr.open("get","example.php",false);
	xhr.send(null);
	if((xhr.status>=200&&xhr.status<300)||xhr.status==304）){
	alert(xhr.responseText);
	}else{
		alert("Response was unsuccessful:"+xhr.status);
		}

像前面这样发送同步请求没有问题，但是多数请求都是异步的，才能让JavaScript继续执行而不需要等待响应，此时可以检查XHR对象的readyState属性，该属性表示请求的/响应的当前活动阶段，取值如下：
0：未初始化。尚未调用open()方法。
1：启动。已经调用open()方法，但未调用send（）方法。
2：发送。已经调用send()方法，但尚未接收到响应。
3：接收。已经接收到部分响应数据。
4：完成。已经接收到全部响应数据，而且可以在客户端使用了。
只要readystate属性值由一个变成另一个都会触发一次readystatechange事件，我们可以利用这个事件来检测每次状态变化后的readstate值，当readyState值为4的阶段所有数据都已经就绪。必须在调用open（）方法之前指定onreadystatechange事件处理程序才能确保跨浏览器兼容性：

    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("Response was unsuccessful:"+xhr.status);
				}
			}
    	};
	xhr.open("get","example.php",false);
	xhr.send(null);
	

在接收到响应之前还可以调用absorb()方法来取消异步请求，调用这个方法后xhr对象会停止触发事件，而且也不再允许访问任何与响应有关的对象属性。
我们通常也可以使用jQuery的ajax，jQuery 提供多个与 AJAX 有关的方法。通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。因为jQuery为我们封装好了可以直接使用代码如下：

$(function(){
	$.ajax({
		type: "POST", //提交方式，也可以是get
		url: "GetEmployee",    //请求的url地址
		dataType: "json",   //返回格式为json,也可以不添加这个属性，也可以是（xml、json、script 或 html）。
		async: true, //请求是否异步，默认为异步，这也是ajax重要特性
		data: { id: value },    //参数值 ,id是定义的要传的参数变量名，后台接收一致，value是页面取的传值的变量名，如果有多个，按照格式每组用逗号隔开，没有参数可以不用
		beforeSend: function() {
			//请求前的处理，如果没有可以不用写
		},
		success: function(data) {
			//请求成功后的回调方法
		},
		complete: function() {
			//请求完成的处理 ，如果没有，可以不用
		},
		error: function() {
			alert("出错了，没取到啊!");
		}
	});
});

就这样我们就完成一个ajax请求啦！

跨域资源共享

通过XHR实现Ajax通信的一个主要限制来源于跨域安全策略。默认情况下，XHR对象只能访问与包含他的页面位于同一个域中的资源。这种安全策略可以预防某些恶意行为。CORS（Cross-Origin Resource Sharing，跨域资源共享）定义了在必须访问跨域资源时，浏览器与服务器应该如何进行沟通。
CORS的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应应该是成功还是失败。

IE对CORS的实现

微软在IE8中引入了XDR（XDomainRequest）类型，这个类型和XHR类似，但能实现安全可靠的跨域通信。被请求的资源可以根据他认为合适的任意数据来决定是否设置Access-Control-Allow-Origin头部。作为请求的一部分，Origin头部的值表示请求的来源域，以便远程资源的明确的的识别XDR对象。以下是XDR与XHR的不同之处：
cookie不会随请求发送，也不会随响应返回。
只能设置请求头部信息中的Content—Type字段。
不能访问响应头部信息。
只支持get和post请求。

其他浏览器对CORS的实现：

Firefox 3.5+、Safari 4+、Chrome、iOS版的Safari和安卓平台的WebKit都通过XMLHTTPRequest对象实现了对CORS的原生支持。要请求位于另一个域中的资源，使用标准的XHR对象并在open（）方法中传入绝对URL即可。

其他跨域技术

图像Ping

图像ping是与服务器进行简单，单项的跨域通信的一种方式

var img=new Image();
img.onload=img.onerror=function(){
     alert("done")
}
img.src="http://www.example.com/";

JSONP

jsonp（最实用) jsonp是通过动态< script >元素来使用的,使用时可以为src属性制定一个跨域URL。

function callbackFunction(){
   alert("JSONP");
}
var script=document.createElement("script");
script.src="http://frergeoip.net.json/?callback=callbackFunction";
document.body.insertBefore(script,document.body.firstChild);

使用jquery实现跨域（最简单的)

通过jQuery的ajax进行跨域，这其实是采用的jsonp的方式来实现的。
jsonp是英文json with padding的缩写。它允许在服务器端生成script tags至返回至客户端，也就是动态生成javascript标签，通过javascript callback的形式实现数据读取。

html页面端示例代码：

复制代码 代码如下:

 //首先要引入jquery的js包 
 jQuery(document).ready(function(){ 
     $.ajax({
         type : "get", //jquey是不支持post方式跨域的

         async:false,

         url : "http://api.taobao.com/apitools/ajax_props.do", //跨域请求的URL

         dataType : "jsonp",

         //传递给请求处理程序，用以获得jsonp回调函数名的参数名(默认为:callback)

         jsonp: "jsoncallback",

         //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名

         jsonpCallback:"success_jsonpCallback",

         //成功获取跨域服务器上的json数据后,会动态执行这个callback函数

         success : function(json){ 

             alert(json); 
         } 
     }); 
 });

WebSocket

WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工双向通信，同时允许跨域通讯，使用自定义协议而非HTTP协议的好处是，能够在客户端和服务器之间发送非常少量的数据，而不必担心HTTP那样字节级的开销。