ajax跨域上传文件

很多用到AJAX请求,如何区别一个请求是传统的HTTP请求?还是Ajax请求?网上有很多,这里记录一下,方便以后直接查看,大笑懒人计划,

关键是看http请求头(header)信息中的 x-requested-with 信息项是否有无,如果无该头信息项,取出的是未定义的值,即null,则说明是传统请求;如果存在该头信息项,值是XMLHttpRequest 则说明是Ajax请求;

有时候做ajax上传的时候 ,会报错误。blob.png

x-requested-with  不允许,然后就是需要在xhr对象那里 那个头声明给去掉,或者在服务端添加对它的支持 如 header('Access-Control-Allow-Headers:x-requested-with,content-type'); 

原理呢 上一部分 源代码

  var xhr = false;
  try{
    xhr=new XMLHttpRequest();//尝试创建 XMLHttpRequest 对象,除 IE 外的浏览器都支持这个方法。
  }catch(e){
   xhr=ActiveXobject("Msxml12.XMLHTTP");//使用较新版本的 IE 创建 IE 兼容的对象(Msxml2.XMLHTTP)。
  }

  
  if (xhr.upload) {
     // 上传中
     xhr.upload.addEventListener("progress", function(e) {
        fileObj.onProgress(file, e.loaded, e.total);
     }, false);
     // 文件上传成功或是失败
     xhr.onreadystatechange = function(e) {
        if (xhr.readyState == 4) {
           if (xhr.status == 200) {
              //校正进度条和上传比例的误差
              var thisfile = _this.find('#fileupload_'+instanceNumber+'_'+file.index);
              thisfile.find('.uploadify-progress-bar').css('width','100%');
               option.showUploadedSize&&thisfile.find('.uploadedsize').text(thisfile.find('.totalsize').text());
               option.showUploadedPercent&&thisfile.find('.up_percent').text('100%');
                option.onUploadSuccess&&option.onUploadSuccess(file, xhr.responseText);
              //在指定的间隔时间后删掉进度条
              setTimeout(function(){
               _this.find('#fileupload_'+instanceNumber+'_'+file.index).fadeOut();
              },option.removeTimeout);
           } else {
              option.onUploadError&&option.onUploadError(file, xhr.responseText);     
           }
           option.onUploadComplete&&option.onUploadComplete(file,xhr.responseText);
           //清除文件选择框中的已有值
           fileObj.fileInput.val('');
        }
     };
         option.onUploadStart&&option.onUploadStart();  
     // 开始上传
     xhr.open(option.method, this.url, true);
//   xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
// 上面这一句 其实很多余,
// 导致服务器需要多声明 header('Access-Control-Allow-Headers:x-requested-with,content-type'); 所以注释
     var fd = new FormData();
     fd.append(option.fileObjName,file);
     if(option.formData){
      for(key in option.formData){
         fd.append(key,option.formData[key]);
      }
     }
     xhr.send(fd);
  }

git地址 https://git.coding.net/kok2015/Huploadify.git