ajax基本操作（勿6基操）

Ajax：Asynchronous JavaScript and xml 异步的 javascript 和xml。其主要通过使用XMLHttpRequest对象来完成请求操作。

什么是XMLHttpRequest对象？

C对象用于后台和前端进行数据交换

作用：

• 在不重复加载页面的情况下更新网页
• 在页面已经加载后从服务器请求数据
• 在页面已经加载后从服务器接收数据
• 在后台向服务器发送数据

ajax请求分为三种：原生ajax，$.ajax,伪造ajax

原生ajax：

                创建XMLHttpRequest对象：（新老版本兼容方案）

                较新的版本： xmlhttp=new XMLHTTPRequest()

                较老的版本： xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")

  原生ajax 需要通过FormData才能发送数据

function ajax_submit_init() {
         var file_obj = document.getElementById('pic').files[0];
            var fd = new FormData();
            fd.append('picture',file_obj);//通过append方法将数据放入对象中
            var xhr = new XMLHttpRequest();
            xhr.open('POST', '/cmdb/registerAjax/',true);
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    // 接收完毕
                    var obj = xhr.responseText;
                    console.log(obj);
                }
            };
            xhr.send(fd);
    }

$.ajax 需要通过FormData才能发送数据（JQuery）

function ajax_submit(){
        var file_obj = document.getElementById('pic').files[0];
            var fd = new FormData();
            fd.append('picture',file_obj);
        $.ajax({
            url:'/cmdb/registerAjax',
            type:'POST',
            data:fd,
            processData:false, //在ajax发送数据之前，会对数据进行处理，文件类型数据不需要处理，所以加上这两行
            contentType:false,
            success:function (arg,a1,a2) {
                console.log(arg)
                console.log(a1)
                console.log(a2)
            }
        })
    }

伪ajax请求：利用<iframe></iframe>实现，该标签的返回值是一个html文件，存在于<iframe>标签中，通过$('iframe').contents().find('body').text()

从后台利用HttpResponse()返回数据

html部分：

<form id="form" action="/cmdb/iframe" enctype="multipart/form-data"  method="post" target="ifr">
    <iframe id="ifm" name="ifr" style="display: none"></iframe>
    <input name="picture" type="file" onchange="btn()"/>
</form>
<div id="preview"></div>
<script src="/static/jquery.js"></script>
<script >
    function btn() {
          $('#ifm').load(function(){
                var text = $('#ifm').contents().find('body').text();
                var obj = JSON.parse(text);
                $('#preview').empty();
                var imgTag = document.createElement('img');
                imgTag.src = '/'+obj.file_path;
                $('#preview').append(imgTag);
            });
            $('#form').submit();
    }
</script>

总结：

         这三种ajax提交方式在不同的情况下，选择不同的方式

        情况一：如果发送普通数据：JQuery>原生ajax>伪造ajax

        情况二：如果发送文件类型数据：伪造ajax>JQuery>原生ajax