本文介绍了HTML5中Ajax跨域的问题及其在标准浏览器和IE下的处理方式，包括设置Access-Control-Allow-Origin头以及使用XDomainRequest对象。同时，文章还讨论了Ajax新增的无刷新上传特性，展示了如何通过FormData发送文件并监听上传进度。
请求的文件与当前的文件不在同一域下，ajax跨域请求
（1） 标准浏览器下：
后端对访问源进行控制：
设置一下：设置访问该资源的域
<script>
window.onload =function() {
/*
在标准浏览器下，XMLHttpRequest对象已经是升级版本，支持了更多的特性，可以跨域了
但是，如果想实现跨域请求，还需要后端的相关配合才可以
*/
var oBtn =document.getElementById('btn');
oBtn.onclick = function() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange= function() {
if (xhr.readyState == 4) {
if (xhr.status ==200) {
alert(xhr.responseText);
}
}
}
xhr.open('get','http://www.b.com/ajax.php', true);
xhr.send();
}
}
</script>
</head>
<body>
<input type="button"value="获取跨域下内容" id="btn" />
</body>
</html>
B中后端中ajax.php
<?php
header('Access-Control-Allow-Origin:http://www.a.com'); //这是允许访问该资源的域
echo 'hello';
（2） IE下实现跨域请求
同域下，XMLHttpRequest
跨域下：oXDomainRequest
只有事件不同 onload
<script>
window.onload = function() {
/*
XMLHttpRequest: 增加很多功能，他也不推荐使用onreadystatechange这个事件来监听，推荐使用onload
XDomainRequest: IE如果想实现跨域请求，则需要使用另外一个对象去实现
*/
varoBtn = document.getElementById('btn');
oBtn.onclick= function() {
varoXDomainRequest = new XDomainRequest();
oXDomainRequest.onload = function() {
alert(this.responseText);
}
oXDomainRequest.open('get','http://www.b.com/ajax.php', true);
oXDomainRequest.send();
}
}
</script>
</head>
<body>
<inputtype="button" value="获取跨域下内容"id="btn" />
</body>
</html>
（3） XMLHttpRequest:增加很多功能，他也不推荐使用onreadystatechange这个事件来监听，推荐使用onload
Ajax增加的特性
（1） Ajax无刷新上传
获取上传文件的内容，不是用value
表示文件列表信息
for (var attr in oMyFile.files){
console.log(attr + ' : ' + oMyFile.files[attr] );
}
表示第一个文件的内容
for (var attr inoMyFile.files[0]) {
console.log(attr + ' : ' + oMyFile.files[0][attr] );
}
上传文件一般用POST方式
设置请求头信息
xhr.setRequestHeader('X-Request-With','XMLHttpRequest');
设置当前数据发送方式
响应失败
因为Post中send要发送数据
不能以这种方式发送，要使用formData
表单是如何进行数据的发送：
二进制数据
怎样发送二进制数据
构建表单提交数据
成功
响应中提示提交成功
Upload监听上传的进度
上传成功返回的数据
上传进度对象
监控上传进度
进度条的制作
整体代码：
<style>
#div1 {width:300px; height: 30px; border: 1px solid #000; position: relative;}
#div2 {width: 0;height: 30px; background: #CCC;}
#div3 {width:300px; height: 30px; line-height: 30px; text-align: center; position: absolute;left: 0; top: 0;}
</style>
<script>
window.onload =function() {
var oBtn =document.getElementById('btn');
var oMyFile =document.getElementById('myFile');
var oDiv1 =document.getElementById('div1');
var oDiv2 =document.getElementById('div2');
var oDiv3 = document.getElementById('div3');
oBtn.onclick = function() {
//alert(oMyFile.value); //获取到的是file控件的value值，这个内容是显示给你看的文字，不是我们选择的文件
//oMyFile.files file控件中选择的文件列表对象
//alert(oMyFile.files);
//我们是要通过ajax把oMyFile.files[0]数据发送给后端
/*for (var attr inoMyFile.files[0]) {
console.log( attr + ' : ' +oMyFile.files[0][attr] );
}*/
var xhr = new XMLHttpRequest();
//上传完成
xhr.onload = function() {
//alert(1);
//var d =JSON.parse(this.responseText);
//alert(d.msg + ' : ' +d.url);
alert('OK,上传完成');
}
//alert(xhr.upload);
var oUpload = xhr.upload;
//alert(oUpload);
oUpload.onprogress = function(ev) {
console.log(ev.total + ' :' + ev.loaded);
var iScale = ev.loaded /ev.total;
oDiv2.style.width = 300 *iScale + 'px';
oDiv3.innerHTML = iScale *100 + '%';
}
xhr.open('post', 'post_file.php',true);
xhr.setRequestHeader('X-Request-With','XMLHttpRequest');
var oFormData = new FormData(); //通过FormData来构建提交数据
oFormData.append('file',oMyFile.files[0]);
xhr.send(oFormData);
}
}
</script>
</head>
<body>
<input type="file"id="myFile" /><input type="button" id="btn"value="上传" />
<div id="div1">
<divid="div2"></div>
<div id="div3">0%</div>
</div>
</body>
后端代码：
<?php
header('Content-type:text/html;charset="utf-8"');
$upload_dir ='uploads/';
if(strtolower($_SERVER['REQUEST_METHOD'])!= 'post'){
exit_status(array('code'=>1,'msg'=>'错误提交方式'));
}
if(array_key_exists('file',$_FILES)&& $_FILES['file']['error'] == 0 ){
$pic = $_FILES['file'];
if(move_uploaded_file($pic['tmp_name'],$upload_dir.$pic['name'])){
exit_status(array('code'=>0,'msg'=>'上传成功','url'=>$upload_dir.$pic['name']));
}
}
echo$_FILES['file']['error'];
exit_status(array('code'=>1,'msg'=>'出现了一些错误'));
functionexit_status($str){
echo json_encode($str);
exit;
}
?>
扫一扫
547
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
