34.Ajax

zhang_derek

发布于 2018-04-11 14:49:32

1.9K0

发布于 2018-04-11 14:49:32

文章被收录于专栏：有趣的django

优先级

如果发送的是【普通数据】

jQuery
XMLHttpRequest
iframe

如果发送的是【文件】

iframe
jQuery(FormData)
XMLHttpRequest(FormData)

原生Ajax

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

1、XmlHttpRequest对象介绍

XmlHttpRequest对象的主要方法：

a. void open(String method,String url,Boolen async)
   用于创建请求
    
   参数：
       method： 请求方式（字符串类型），如：POST、GET、DELETE...
       url：    要请求的地址（字符串类型）
       async：  是否异步（布尔类型）
 
b. void send(String body)
    用于发送请求
 
    参数：
        body： 要发送的数据（字符串类型）
 
c. void setRequestHeader(String header,String value)
    用于设置请求头
 
    参数：
        header： 请求头的key（字符串类型）
        vlaue：  请求头的value（字符串类型）
 
d. String getAllResponseHeaders()
    获取所有响应头
 
    返回值：
        响应头数据（字符串类型）
 
e. String getResponseHeader(String header)
    获取响应头中指定header的值
 
    参数：
        header： 响应头的key（字符串类型）
 
    返回值：
        响应头中指定的header对应的值
 
f. void abort()
 
    终止请求

主要方法

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

主要属性

2.用原生Ajax做个请求

ajax.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="text"/>
    <input type="button" value="Ajax1" onclick="Ajax1();" />
 
    <script>
        function Ajax1(){
            var xhr = new XMLHttpRequest();
            xhr.open('POST', '/ajax_json/',true);
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    // 接收完毕
                    var obj = JSON.parse(xhr.responseText);
                    console.log(obj);
                }
            };
            xhr.setRequestHeader('k1','v1');
            // post请求必须加下面这句请求头 不然后台数据拿不到
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
            xhr.send("name=root;pwd=123");
        }
    </script>
</body>
</html>

views.py

def ajax(request):
    return render(request,'ajax.html')
 
def ajax_json(request):
    print(request.POST)
    ret = {'code':True,'data':None}
    import json
    return HttpResponse(json.dumps(ret))

3.跨浏览器支持

XmlHttpRequest

IE7+, Firefox, Chrome, Opera, etc.

ActiveXObject("Microsoft.XMLHTTP")

IE6, IE5

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <h1>XMLHttpRequest - Ajax请求</h1>
    <input type="button" onclick="XmlGetRequest();" value="Get发送请求" />
    <input type="button" onclick="XmlPostRequest();" value="Post发送请求" />

    <script src="/statics/jquery-1.12.4.js"></script>
    <script type="text/javascript">

        function GetXHR(){
            var xhr = null;
            if(XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else{
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            return xhr;

        }

        function XhrPostRequest(){
            var xhr = GetXHR();
            // 定义回调函数
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    // 已经接收到全部响应数据，执行以下操作
                    var data = xhr.responseText;
                    console.log(data);
                }
            };
            // 指定连接方式和地址----文件方式
            xhr.open('POST', "/test/", true);
            // 设置请求头
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
            // 发送请求
            xhr.send('n1=1;n2=2;');
        }

        function XhrGetRequest(){
            var xhr = GetXHR();
            // 定义回调函数
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    // 已经接收到全部响应数据，执行以下操作
                    var data = xhr.responseText;
                    console.log(data);
                }
            };
            // 指定连接方式和地址----文件方式
            xhr.open('get', "/test/", true);
            // 发送请求
            xhr.send();
        }

    </script>

</body>
</html>

伪Ajax

由于HTML标签的iframe标签具有局部加载内容的特性，所以可以使用其来伪造Ajax请求,进行偷偷的发送请求

views.py

def ajax(request):
    return render(request,'ajax.html')

def ajax_json(request):
    print(request.POST)
    ret = {'code':True,'data':None}
    import json
    return HttpResponse(json.dumps(ret))

1.Form表单提交到iframe中，页面不刷新

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="text"/>
    <input type="button" value="Ajax1" onclick="Ajax1();" />
 
    <form action="/ajax_json/" method="POST" target="ifm1"> <!-- target跟iframe进行关联 -->
        <iframe id="ifm1" name="ifm1" ></iframe>
        <input type="text" name="username" />
        <input type="text" name="email" />
        <input type="submit" value="Form提交"/>
    </form>
</body>
</html>

2.Ajax提交到iframe中，页面不刷新

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="text"/>
    <input type="button" value="Ajax1" onclick="Ajax1();" />
 
    <input type='text' id="url" />
    <input type="button" value="发送Iframe请求" onclick="iframeRequest();" />
    <iframe id="ifm" src="http://www.baidu.com"></iframe>
 
    <script src="/static/jquery-1.12.4.js"></script>
    <script>
 
        function iframeRequest(){
            var url = $('#url').val();
            $('#ifm').attr('src',url);
        }
    </script>
</body>
</html>

3.Form表单提交到iframe中,并拿到iframe中的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="text"/>
    <input type="button" value="Ajax1" onclick="Ajax1();" />
 
    <form action="/ajax_json/" 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();" value="Form提交"/>
    </form>
 
    <script type="text/javascript" src="/static/jquery-1.12.4.js"></script>
    <script>
        function sumitForm(){
            $('#ifm1').load(function(){
                var text = $('#ifm1').contents().find('body').text();
                var obj = JSON.parse(text);
                console.log(obj)
            })
        }
    </script>
</body>
</html>

文件上传的三种方式

原生Ajax、Ajax、伪Ajax进行上传文件

views.py

from django.shortcuts import render,HttpResponse

def upload(request):
    return render(request,'upload.html')

def upload_file(request):
    username = request.POST.get(('username'))
    fafafa = request.FILES.get('fafafa')        #获取文件

    with open(fafafa.name,'wb') as f:
        for item in fafafa.chunks():
            f.write(item)
    print(username,fafafa)
    ret = {'code': True, 'data': request.POST.get('username')}
    import json

    return HttpResponse(json.dumps(ret))

1.原生Ajax（XmlHttpRequest）上传文件+定制好看的上传按钮：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .upload{
            display: inline-block;padding: 10px;
            background-color: brown;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            z-index: 90;
        }
        .file{
            width: 100px;height: 50px;opacity: 0;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            z-index: 100;
        }
    </style>
</head>
<body>
    <div style="position: relative;width: 100px;height: 50px;">
        <input class="file" type="file" id="fafafa" name="afafaf" />
        <a class="upload">上传</a>
    </div>
    <input type="button" value="提交XHR" onclick="xhrSubmit();" />
     
    <script>
        function xhrSubmit(){
            // $('#fafafa')[0]
            var file_obj = document.getElementById('fafafa').files[0];  //获取文件对象
 
            var fd = new FormData();       
            fd.append('username','root');
            fd.append('fafafa',file_obj);
 
            var xhr = new XMLHttpRequest();
            xhr.open('POST', '/upload_file/',true);
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    // 接收完毕
                    var obj = JSON.parse(xhr.responseText);
                    console.log(obj);
                }
            };
            xhr.send(fd);
        }
    </script>
</body>
</html>

2.JQuery进行文件的上传：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .upload{
            display: inline-block;padding: 10px;
            background-color: brown;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            z-index: 90;
        }
        .file{
            width: 100px;height: 50px;opacity: 0;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            z-index: 100;
        }
    </style>
</head>
<body>
    <div style="position: relative;width: 100px;height: 50px;">
        <input class="file" type="file" id="fafafa" name="afafaf" />
        <a class="upload">上传</a>
    </div>
{#    <input type="button" value="提交XHR" onclick="xhrSubmit();" />#}
    <input type="button" value="提交jQuery" onclick="jqSubmit();" />
    <div id="preview"></div>
     
    <script src="/static/jquery-1.12.4.js"></script>
    <script>
        function jqSubmit(){
            // $('#fafafa')[0]
            var file_obj = document.getElementById('fafafa').files[0];
 
            var fd = new FormData();
            fd.append('username','root');
            fd.append('fafafa',file_obj);
 
            $.ajax({
                url: '/upload_file/',
                type: 'POST',
                data: fd,
                processData: false,  // tell jQuery not to process the data
                contentType: false,  // tell jQuery not to set contentType
                success:function(arg,a1,a2){
                    console.log(arg);
                    console.log(a1);
                    console.log(a2);
// Object {readyState: 4, responseText: "{"data": "root", "code": true}", status: 200, statusText: "OK"}
                }
            })
        }
    </script>
</body>
</html>

上面两种方式都用到FormData()，但是如果是IE浏览器的话是不支持FormData()，所以就得用到下面这种方式

3.Iframe进行文件的上传：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form id="form1" action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifm1">
        <iframe id="ifm1" name="ifm1" style="display: none;"></iframe>
        <input type="file" name="fafafa"  />
        <input type="submit" onclick="iframeSubmit();" value="Form提交"/>
    </form>
    <script src="/static/jquery-1.12.4.js"></script>
    <script>
        function iframeSubmit(){
            $('#ifm1').load(function(){
                var text = $('#ifm1').contents().find('body').text();
                var obj = JSON.parse(text);
                console.log(obj)
            })
        }
    </script>
</body>
</html>

上传文件时预览

1.预览

views.py

def upload(request):
    return render(request,'upload.html')
 
 
def upload_file(request):
    username = request.POST.get(('username'))
    fafafa = request.FILES.get('fafafa')        #获取文件
    import os
    img_path = os.path.join('static/imgs/',fafafa.name)     #static下创建imgs目录
    with open(img_path,'wb') as f:
        for item in fafafa.chunks():
            f.write(item)
    print(username,fafafa)
    ret = {'code': True, 'data': img_path}
    import json
 
    return HttpResponse(json.dumps(ret))

upload.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form id="form1" action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifm1">
        <iframe id="ifm1" name="ifm1" style="display: none;"></iframe>
        <input type="file" name="fafafa"  />
        <input type="submit" onclick="iframeSubmit();" value="Form提交"/>
    </form>
    <div id="preview"></div>
    <script src="/static/jquery-1.12.4.js"></script>
    <script>
        function iframeSubmit(){
            $('#ifm1').load(function(){
                var text = $('#ifm1').contents().find('body').text();
                var obj = JSON.parse(text);
                console.log(obj)
 
                 $('#preview').empty();
                var imgTag = document.createElement('img');
                imgTag.src = "/" + obj.data;
                $('#preview').append(imgTag);
            })
        }
    </script>
</body>
</html>

2.选择文件后直接上传

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form id="form1" action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifm1">
        <iframe id="ifm1" name="ifm1" style="display: none;"></iframe>
        <input type="file" name="fafafa" onchange="changeUpalod();" />    //onchange 选中文件时触发
{#        <input type="submit" onclick="iframeSubmit();" value="Form提交"/>#}
    </form>
    <div id="preview"></div>
    <script src="/static/jquery-1.12.4.js"></script>
    <script>
        function changeUpalod(){
            $('#ifm1').load(function(){　　　　　　　　　　　　　　　　//load  绑定load事件，有数据时执行
                var text = $('#ifm1').contents().find('body').text();
                var obj = JSON.parse(text);
 
                $('#preview').empty();
                var imgTag = document.createElement('img');
                imgTag.src = "/" + obj.data;
                $('#preview').append(imgTag);
            });
            $('#form1').submit();
        }
    </script>
</body>
</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018-02-13 ，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度

34.Ajax

34.Ajax

优先级

原生Ajax

伪Ajax

文件上传的三种方式

上传文件时预览

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐