Python Ajax

一原生AJAX

Ajax主要就是使用 【XmlHttpRequest】对象来完成请求的操作，该对象在主流浏览器中均存在(除早起的IE)，Ajax首次出现IE5.5中存在（ActiveX控件）

XMLHttpRequest对象的主要方法：

1.void open(String method,String url,Boolen async)用于创建请求
  参数： method： 请求方式（字符串类型），如：POST、GET、DELETE...
        url：    要请求的地址（字符串类型）
        async：  是否异步（布尔类型）
2.void send(String body)   用于发送请求
   参数:body： 要发送的数据（字符串类型）
3.void setRequsetHeader(String header,String value)用于设置请求头
   参数：header： 请求头的key（字符串类型）
        vlaue：  请求头的value（字符串类型）

4. getAllResponseHeaders()获取所有响应头
    返回值：响应头数据（字符串类型）
5. getResponseHeader(String header) 获取响应头中指定header的值
    参数： header： 响应头的key（字符串类型）
    返回值：响应头中指定的header对应的值
6.void abort() 终止请求

XmlHttpRequest对象的主要属性：

1.readyState 状态值 (整数)
   详细：
      0-未初始化，尚未调用open()方法；
      1-启动，调用了open()方法，未调用send()方法；
      2-发送，已经调用了send()方法，未接收到响应；
      3-接收，已经接收到部分响应数据；
      4-完成，已经接收到全部响应数据；
2.inreadystatechange 当 前readyState的值改变时自动触发执行其对应的函数（回调函数）
3.responseText     服务器返回的数据（字符串类型）
4.responseXML  服务器返回的数据（Xml对象）
5.states   状态码（整数），如：200、404...
6.statesText  状态文本（字符串），如：OK、NotFound...　　

实例一

 Ajax发送GET请求  

<h3>1.Ajax发送GET请求</h3>
    <div>
        <a class="btn" onclick="AjaxSubmit1();">点我</a>
        <a class="btn" onclick="AjaxSubmit2();">点我</a>
    </div>


<script>
     function AjaxSubmit1(){
        $.ajax({
            url:'ajax1',
            type:'GET',
            data:{"ew":"123"},
            success:function(arg){
                console.log(arg)
            }
        })
    }
    function AjaxSubmit2(){
        var xhr =new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            //接收完毕服务器返回的数据
            if(xhr.readyState ==4){
                //通过responseText拿到响应的文本
                console.log(xhr.responseText);
            }
        };
        xhr.open("GET",'ajax1?p=123');
        xhr.send(null);
    }
</script>

服务端

def index(request):
    return render(request,'index.html')
def ajax1(request):
    import time
    print(request.GET)
    print(request.POST)
    print(request.FILES)
    ret = {'static':True,'message':'iiii'}
    import json
    return HttpResponse(json.dumps(ret))


Ajax 发送POST请求

<h3>2.Ajax发送POST请求</h3>
<div>
    <a class="btn" onclick="AjaxSubmit3();">点我</a>
    <a class="btn" onclick="AjaxSubmit4();">点我</a>
</div>

function AjaxSubmit3(){
    $.ajax({
        url:'ajax1',
        type: 'POST',
        data:{'o':132},
        succession:function (arg) {
            console.log(arg)
        }
    })
}
    function AjaxSubmit4(){
    var xhr =new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        //接收完毕服务器返回的数据
        if(xhr.readyState ==4){
            //通过responseText拿到响应的文本
            console.log(xhr.responseText);
        }
    };
    xhr.open("POST",'ajax1');
    //设置请求头
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8')
    //发送请求
    xhr.send("p=23");
}

二 伪“Ajax”

iframe

<h4>iframe</h4>
    <input type="text" id="url" />
    <input type="button" value="发送Iframe请求" onclick="iframeRquest()">
    <div>
        <iframe id="ifm" src="http://www.baidu.com" style="height:500px; 600px;"></iframe>
    </div>

<!--

1.该iframe相当于是嵌套的html 页面显示百度该网站
2.上面的代码是我们在input输入框输入一个网址如www.qq.com
3.点击按钮(发送iframe请求)，触发函数iframeRequest()
4.函数内部假如我们进行获取输入的网址www.qq.com然后赋值到iframe的src
5最终ifname  -->

<script>

    function iframeRquest(){
        var url = $('#url').val();
        $('#ifm').attr('src',url);
    }

</script>


通过form结合iframe伪造ajax

原理：

1.form的target该内部属性指定到iframe ：相当于form进行submit交由iframe去提交数据
2.后台如果有响应数据，那么会响应的数据返回给iframe，iframe进行应用到标签的text（内容)
3.ifname接收到响应数据以后，会触发一个onload事件，
4.事件函数内部我们可以进行获取iframe得到的响应数据进行应用

<h5>form+iframe</h5>
<form action="ajax1" method="post" target="ifm1">
    <iframe id="ifm1" name="ifm1"></iframe>
    <input type="text" name="username">
    <input type="text" name="email">
    <input type="submit" onclick="sumitForm(this)" value="提交">
</form>

<script>function sumitForm(){

    $('#ifm1').load(function(){
        #console.log(this)
        #console.log(ths.contentWindow)
        #console.log(this.contentWindow.document.body.innerHTML);
        #console.log($(this).contens().find('body').html());
       // 获取ifml嵌套HTML里面的body下的内容
        var text = $('#ifm1').contents().find('body').text();
        var obj = JSON.parse(text); //进行反序列化
        alert(text);
        console.log(obj)
    })
}

</script>

服务端

def index(request):
    return render(request,'index.html')
def ajax1(request):
    import time
    print(request.GET)
    print(request.POST)
    print(request.FILES)
    ret = {'static':True,'message':'iiii'}
    import json
    return HttpResponse(json.dumps(ret))

iframe 结合form  文件上传

<form action="upload_img" method="post" enctype="multipart/form-data" target="iframe">
    <iframe style="display: none" id="ifrm" name="iframe"></iframe>
    <input type="file" name="files">
    <input type="submit" value="提交" onchange="upload_img()">
</form>
<h3>预览</h3>
<div id="preview"></div>
<script>
    function upload_img(){
        $("#ifrm").onload(function(){
            //var conent = $('#ifrm').contents().find('body').text()
            var conent =this.contentWindow.document.body.innerHTML;
            var obj = JSON.parse(conent);
             //清空匹配标签下的所有标签
            $('#preview').empty()
            var imgTag = document.createElement("img");
            imgTag.src = obj.data;
            $('#preview').append(imgTag);
        })
    }
</script>

def upload_img(request):
    import os
    import uuid
    if request.method == 'POST':
        file_obj = request.FILES.get('files')
        nid = str(uuid.uuid4())
        img_path = os.path.join('static/image/',nid+file_obj)
        print(img_path)
        with open(img_path,'wb') as f:
            for item in file_obj.chunks():
                f.write(item)
        ret = {'code':True,'data':img_path}
        import json

        return HttpResponse(json.dumps(ret))
    else:
        request.method =='GET'
        return render(request,'upload.html')