了解ajax2.0的使用

简介

由于老版本的ajax存在以下问题，从而导致了ajax2的出现

老版本ajax:

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

ajax2新增的特性：

1.可以设置HTTP请求的时限。
2.可以使用FormData对象管理表单数据。
3.可以上传文件。
4.可以请求不同域名下的数据（跨域请求）。
5.可以获取服务器端的二进制数据。
6.可以获得数据传输的进度信息。
下载的progress事件属于XMLHttpRequest对象，上传的progress事件属于XMLHttpRequest.upload对象。
学习文章 ：
ajax2简介
ajax2新特性

ajax2的理解

区分ajax2.0和ajax的不一样，2.0需要借助formData来使用

<script>
     document.querySelector('.ajax').onclick=function(){
         //创建异步对象
         var ajax=new XMLHttpRequest();
         //设置请求行
         ajax.open('post','./saveData.php');
         //设置请求头 2.0可以不用写
         //回调函数
         ajax.onload=function(){
             console.log(ajax.responseText);
         }
         //ajax2.0需要结合一个新的对象来使用
         //formData
         //能够自动帮助我们获取表单中有name属性的数据
         var sendData=new FormData(document.querySelector('form'));
 
         //还可以自己去append
         sendData.append('ssd','固态硬盘');
         //设置请求主体
         ajax.send(sendData);
     }
 </script>   

学习文章：
ajax2的理解与应用实例
ajax2.0的使用

ajax2的使用语法

<script>
  //ajax2.0
    $("#feature").change(function(){
      var formData = new FormData();
      formData.append('preview',this.files[0]);
      $.ajax({
        url:'http://www.baixiu.com/admin/API/06.imgPreview.php',
        data:formData,
        type:'post',
        processData:false,//不自动格式化数据
        contentType:false,//不自动设置请求头
        success:function(backData){
          console.log(backData);
          $('.help-block').attr('src',backData).show();
        }
      })
    })

参考文章:
ajax 2.0 使用语法
ajax2