AJAX、跨域、服务器交互

什么是AJAX？

AJAX，实际上指的是XMLHttpRequest对象。

XMLHttpRequest是一个浏览器接口，使得Javascript可以进行HTTP(S)通信。

最早，微软在IE 5引进了这个接口。因为它太有用，其他浏览器也模仿部署了，ajax操作因此得以诞生。

但是，这个接口一直没有标准化，每家浏览器的实现或多或少有点不同。HTML 5的概念形成后，W3C开始考虑标准化这个接口。2008年2月，就提出了XMLHttpRequest Level 2 草案。

老版本的XMLHttpRequest对象

在介绍新版本之前，我们先回顾一下老版本的用法。

首先，新建一个XMLHttpRequest的实例。

var xhr = new XMLHttpRequest();

然后，向远程主机发出一个HTTP请求。

xhr.open('GET', 'example.php');
xhr.send();

接着，就等待远程主机做出回应。这时需要监控XMLHttpRequest对象的状态变化，指定回调函数。

xhr.onreadystatechange = function(){
    if ( xhr.readyState == 4 && xhr.status == 200 ) {
        alert( xhr.responseText );
    } else {
        alert( xhr.statusText );
    }
};

上面的代码包含了老版本XMLHttpRequest对象的主要属性：

xhr.readyState：XMLHttpRequest对象的状态，等于4表示数据已经接收完毕。
xhr.status： 服务器返回的状态码，等于200表示一切正常。
xhr.responseText： 服务器返回的文本数据
xhr.responseXML： 服务器返回的XML格式的数据
xhr.statusText： 服务器返回的状态文本。

老版本的缺点:

老版本的XMLHttpRequest对象有以下几个缺点：

只支持文本数据的传送，无法用来读取和上传二进制文件。
传送和接收数据时，没有进度信息，只能提示有没有完成。
受到"同域限制"（Same Origin Policy），只能向同一域名的服务器请求数据。

新版本的功能

新版本的XMLHttpRequest对象，针对老版本的缺点，做出了大幅改进。

可以设置HTTP请求的时限。
可以使用FormData对象管理表单数据。
可以上传文件。
可以请求不同域名下的数据（跨域请求）。
可以获取服务器端的二进制数据。
可以获得数据传输的进度信息。

下面，我就一一介绍这些新功能。

HTTP请求的时限

有时，ajax操作很耗时，而且无法预知要花多少时间。如果网速很慢，用户可能要等很久。

新版本的XMLHttpRequest对象，增加了timeout属性，可以设置HTTP请求的时限。

xhr.timeout = 3000;

上面的语句，将最长等待时间设为3000毫秒。过了这个时限，就自动停止HTTP请求。与之配套的还有一个timeout事件，用来指定回调函数。

xhr.ontimeout = function(event){
    alert('请求超时！');
}

目前，Opera、Firefox和IE 10支持该属性，IE 8和IE 9的这个属性属于XDomainRequest对象，而Chrome和Safari还不支持。

FormData对象

ajax操作往往用来传递表单数据。为了方便表单处理，HTML 5新增了一个FormData对象，可以模拟表单a。

首先，新建一个FormData对象。

var formData = new FormData();

然后，为它添加表单项。

formData.append('username', '张三');
formData.append('id', 123456);

最后，直接传送这个FormData对象。这与提交网页表单的效果，完全一样。

xhr.send(formData);

FormData对象也可以用来获取网页表单的值。

var form = document.getElementById('myform');
var formData = new FormData(form);
formData.append('secret', '123456'); // 添加一个表单项
xhr.open('POST', form.action);
xhr.send(formData);

上传文件

新版XMLHttpRequest对象，不仅可以发送文本信息，还可以上传文件。

假定files是一个"选择文件"的表单元素（input[type="file"]），我们将它装入FormData对象。

var formData = new FormData();
//多个文件
for (var i = 0; i < files.length;i++) {
    formData.append('files[]', files[i]);
}

然后，发送这个FormData对象。

xhr.send(formData);

跨域资源共享（CORS）

新版本的XMLHttpRequest对象，可以向不同域名的服务器发出HTTP请求。这叫做"跨域资源共享"（Cross-origin resource sharing，简称CORS）。

使用"跨域资源共享"的前提，是浏览器必须支持这个功能，而且服务器端必须同意这种"跨域"。如果能够满足上面的条件，则代码的写法与不跨域的请求完全一样。

目前，除了IE 8和IE 9，主流浏览器都支持CORS，IE 10也将支持这个功能。

服务器端的设置

asp.net 设置跨域

context.Response.ClearHeaders(); 
context.Response.AppendHeader("Access-Control-Allow-Origin","*"); 
string requestHeaders = context.Request.Headers["Access-Control-Request-Headers"]; 
context.Response.AppendHeader("Access-Control-Allow-Headers", 
string.IsNullOrEmpty(requestHeaders) ? "*" : requestHeaders); 
context.Response.AppendHeader("Access-Control-Allow-Methods", "POST, OPTIONS");

php 设置跨域

// 允许 ityangs.net 发起的跨域请求
header("Access-Control-Allow-Origin: baidu.com"); 

//如果需要设置允许所有域名发起的跨域请求，可以使用通配符 *
header("Access-Control-Allow-Origin: *");

java 设置跨域

// 最简单的处理方式
response.setHeader("Access-Control-Allow-Origin","*");

// 这个可以用过滤器统一处理
if (request.getHeader("Access-Control-Request-Method") != null && "OPTIONS".equals(request.getMethod())) {
    // CORS "pre-flight" request
    response.addHeader("Access-Control-Allow-Origin", "*");
    response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
    response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
    response.addHeader("Access-Control-Max-Age", "1800");//30 min
}

JSONP 跨域

客户端（a域名）的html文件

<!doctype html>
<html lang="en">
<head></head>
<body>
    <script type="text/javascript">
        function jsonpCallback(result) {   
            for(var i in result) {  
                console.log(i+":"+result[i]);//循环输出result的元素  
            }  
        }  
    </script>
    <script src="http://www.baidu.com/update/index.php?callback=jsonpCallback"></script>  
    <!-- 传递固定参数的方式 -->
    <!-- <script src="http://www.baidu.com/update/index.php?os=Windows&version=2.0&callback=jsonpCallback"></script> -->  
</body>
</html>

服务端（b域名）的php代码：

<?php    
    //服务端返回JSON数据  
    //$arr=array('a'=>1,'b'=>2,'c'=>3); 

    $arr->version = "3.3.2.764";
    $arr->url = "#"; 
    $result=json_encode($arr);  
    //动态执行回调函数  
    $callback=$_GET['callback'];  
    echo $callback."($result)";  
?>

postMessage实现跨域通信

html5最常用的API之一，实现两个不同域窗口对象之间的数据通信。
在发送数据窗口执行：otherWindow.postMessage(msg,origin)。

otherWindow:表示接受数据的窗口的window对象，包括iframe的contentWindwohe和通过window.open打开的新窗口。
msg表示要发送的数据，包扩字符串和对象(ie9以下不支持，可以利用字符串和json互换)。
origin表示接收的域名。

在接受的窗口监听window的message事件，回掉函数参数接受一个事件对象event，包括的属性有：

data：接受的数据
origin：发送端的域
source：发送端的DOMWindow对象

利用`window.postMessage`在框架之间发送数据

在父框架页面index.html发送obj对象给远程服务器的jx-tongan.com/test/b.html，该页面是通过iframe加载的，如下：

<!DOCTYPE html>
<html>
<head>
	<title>window.postMessage</title>
	
</head>
<body>
	<iframe id="proxy" src="http://jx-tongan.com/test/b.html" onload = "postMsg()" style="display: none" ></iframe>

	<script>
		var obj = {
			msg: '我是来自于首页的数据!'
		}

		function postMsg (){
			var iframe = document.getElementById('proxy');
			var win = iframe.contentWindow;
			win.postMessage(obj,'http://jx-tongan.com');
		}
		
	</script>
</body>
</html>

在远程页面b.html中监听message事件，先通过origin属性判断下数据来源的域是否可信任，加强安全措施。具体代码如下：


<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript">
		window.onmessage = function(e){
			if(e.origin !== 'http://jx-tongan.com') return;
			console.log(e.origin+' '+e.data.msg);
		}
	</script>
</head>
<body>
	<p>this is my server</p>
</body>
</html>

接收二进制数据

方法A：改写MIMEType

老版本的XMLHttpRequest对象，只能从服务器取回文本数据（否则它的名字就不用XML起首了），新版则可以取回二进制数据。

这里又分成两种做法。较老的做法是改写数据的MIMEType，将服务器返回的二进制数据伪装成文本数据，并且告诉浏览器这是用户自定义的字符集。

xhr.overrideMimeType("text/plain; charset=x-user-defined");

然后，用responseText属性接收服务器返回的二进制数据。

var binStr = xhr.responseText;

由于这时，浏览器把它当做文本数据，所以还必须再一个个字节地还原成二进制数据。

for (var i = 0, len = binStr.length; i < len; ++i) {
    var c = binStr.charCodeAt(i);
    var byte = c & 0xff;
}

方法B：responseType属性

从服务器取回二进制数据，较新的方法是使用新增的responseType属性。如果服务器返回文本数据，这个属性的值是"TEXT"，这是默认值。较新的浏览器还支持其他值，也就是说，可以接收其他格式的数据。

你可以把responseType设为blob，表示服务器传回的是二进制对象。

var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png');
xhr.responseType = 'blob';

接收数据的时候，用浏览器自带的Blob对象即可。

var blob = new Blob([xhr.response], {type: 'image/png'});

注意

注意是读取xhr.response，而不是xhr.responseText。

你还可以将responseType设为arraybuffer，把二进制数据装在一个数组里。

var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png');
xhr.responseType = "arraybuffer";

接收数据的时候，需要遍历这个数组。

var arrayBuffer = xhr.response;
if (arrayBuffer) {
    var byteArray = new Uint8Array(arrayBuffer);
    for (var i = 0; i < byteArray.byteLength; i++) {
        // do something
    }
}

进度信息

新版本的XMLHttpRequest对象，传送数据的时候，有一个progress事件，用来返回进度信息。

它分成上传和下载两种情况。下载的progress事件属于XMLHttpRequest对象，上传的progress事件属于XMLHttpRequest.upload对象。

我们先定义progress事件的回调函数。

xhr.onprogress = updateProgress;
xhr.upload.onprogress = updateProgress;

然后，在回调函数里面，使用这个事件的一些属性。

function updateProgress(event) {

    if (event.lengthComputable) {
        var percentComplete = event.loaded / event.total;
    }

}

上面的代码中，event.total是需要传输的总字节，event.loaded是已经传输的字节。如果event.lengthComputable不为真，则event.total等于0。

与progress事件相关的，还有其他五个事件，可以分别指定回调函数：

load事件： 传输成功完成。
abort事件： 传输被用户取消。
error事件： 传输中出现错误。
loadstart事件： 传输开始。
loadEnd事件： 传输结束，但是不知道成功还是失败。

服务器交互

发送请求js

//创建request对象
var request;
if(window.XMLHttpRequest){
    request=new XMLHttpRequest()
}else{
    request=new ActiveXObject(Miscrosoft.XMLHTTP)
}
//创建参数parma
var parma;
//GET请求
request.open("GET",url+"?"+parma,true);
request.send();
//POST请求
request.open("POST",url,true);
requset.setRequestHeader("Content-tyep","application/x-www-form-urlencoded");
request.send(prama);
//结果与回复
request.onreadystatechange=function(){
    if(request.readyStage=4&&request.status==200){
        success()
    }else{
        fail()
    }
}

后端接收请求，以PHP为例

//JSon格式头：
header("Content-type:application/json")
//php连接数据库
$conn=mysql_connect("url","username","password");
//php选择数据库
mysql_select_db("dbname",$conn);
//设置编码
mysql_query("set names utf8",$conn);
//从表中取出数据
$rule=mysql_query("select * from tb");
//创建结果变量
$result=array();
//输出数组
while($row=myaql_fetch_array($rule)){
    array_push($result,$row)
}
print_r($result)
//输出json
while($row=myaql_fetch_assoc($rule)){
    $result[]=$row
}
echo json_encode($result)

# AJAX、跨域、服务器交互

# 什么是AJAX？

# 老版本的XMLHttpRequest对象

# 上面的代码包含了老版本XMLHttpRequest对象的主要属性：

# 老版本的缺点:

# 新版本的功能

# HTTP请求的时限

# FormData对象

# 上传文件

# 跨域资源共享（CORS）

# 服务器端的设置

# JSONP 跨域

# postMessage实现跨域通信

# 利用window.postMessage在框架之间发送数据

# 接收二进制数据

# 方法A：改写MIMEType

# 方法B：responseType属性

# 进度信息

# 服务器交互