ajax的使用

何时使用ajax

我理解是ajax是当不想让页面进行跳转，这里对比的是form表单，当点击subnmit时就会向form标签的action的url跳转，如果想”偷偷的”向服务器发送数据可以选择使用ajax，ajax可以发送GET,POST的类型，ajax也可以发送字典，文件等数据类型。

ajax的原理

ajax就时依靠的是XMLHttpRequest对象，用onreadystatechange感知readyState状态码来判断，并open一个url，send数据，执行回调函数

ajax的实现方法

1. 原生js
2. jqery
3. 用iframe和form

原生js实现POST

function AjaxSubmit1_POST(){
    var data = new FormDate();//这里是创建传送的数据对象
    data.append('key','value');//这里可以看成字典的传入，
    //添加数据用append(),这里还可以传入图片类型img
    data.append('imgs',document.getElementById('img'));
    data.append('csrfmiddlewaretoken','{{csrf_token}}');
    //这里是django的csrf防止跨站攻击，可以换成其他语言的检测
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            console.log(xhr.responseText);
        }
    }
    xhr.open('POST','/ajax1.html');
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');//当数据发送不了，加这
    xhr.send(data);
}

注意：在上传文件的时候要在form表单中加入< enctype=”multipart/form-data”>

原生js实现GET

function AjaxSubmit1_GET(){
    var xhr = new XMLHttpResquest();
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            console.log(xhr.responseText);
        }
    }
    xhr.open('GET','/ajax1/html?p=666');
    xhr.send(null);
}

jquery实现POST

function AjaxSunmit2_POST(){
    var data = new FormDate();//这里是创建传送的数据对象
    data.append('key','value');//这里可以看成字典的传入，
    //添加数据用append(),这里还可以传入图片类型img
    data.append('imgs',document.getElementById('img'));
    data.append('csrfmiddlewaretoken','{{csrf_token}}');
    //这里是django的csrf防止跨站攻击，可以换成其他语言的检测
    $.ajax({
        url:'/ajax1.html',
        type:'POST',
        data:data,
        success:function(arg){
            console.log(arg);
        },
        processDate:false,//这两个是不让数据序列化
        contentType:flase
})

jquery实现GET

function AjaxSunmit2_POST() {
   $.ajax({
        url: '/ajax1.html',
        type: 'GET',
        data: {'p': 123},
        success: function (arg) {
            console.log(arg);
         }
     })
}

用iframe和form实现（这里只能传GET）

这里用的iframe标签的属性特点

<iframe style="display: none;" id="iframe" name="ifra1"></iframe>
<form id="fm" action="/ajax1.html" method="POST" target="ifra1" enctype="multipart/form-data">
    <input name="k" value="上传" type="file">
    <a onclick="AjaxSubmit();">提交</a>
</form>

function AjaxSubmit(){
    document.getElementById('iframe').onload = reloads;
    document.getElementById('fm').submit();
};
function reloadiframe1() {
    var coN = this.contentWindow.document.body.innerHTML
        var obj = JSON.parse(con);
        console.log(obj);
    }