Ajax：原生Ajax ,XMLHttpRequest对象主要方法、属性。Jquery Ajax：内部基于原生Ajax。伪 Ajax、iframe标签：非XMLHttpRequest。基于 Ajax 上传文件:原生、Jquery、伪Ajax。

1、原生 Ajax XMLHttpRequest 对象

XMLHttpRquest 对象的主要方法：

# void open(string method,string url,Boolen async) 用于创建请求
#   参数：
#       method: 请求方式(字符串类型) ，如：POST,GET,DELETE
#       url: 要请求的地址(字符串类型)
#       async: 是否异步(布尔类型)

# void send(string body) 用于发送请求(请求体数据)
#   参数：
#       body: 要发送的数据(字符串类型)

# void setRequestHeader(string header,string value) 用于设置请求头
#   参数：
#       header: 请求头的key(字符串类型)
#       value: 请求头的value(字符串类型)
#   例子：
#       xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')



# string getAllResponseHeaders() 获取所有响应头
#   返回值：
#       响应头数据(字符串类型)

# string getResponseHeader(string header)
#   参数：
#       header: 响应头的key(字符串类型)
#   返回值：
#       响应头中指定的header对应的值

# void abort() 终止请求


# XmlHttpRequest 对象的主要属性
# Number readyState  状态值(整数)
#   详细：
#       0-未初始化，尚未调用open()方法
#       1-启动，调用了open()方法，未调用send()方法
#       3-发送，已经调用了send()方法，未接收到响应
#       4-接收，已接收到部分响应数据
#       5-完成，已接收到全部响应数据

# Function onreadystatechange  当readyState的值改变时自动触发执行其对应的函数(回调函数)

# String responseText  服务器返回的数据(字符串类型)

# XmlDocument responseXML  服务器返回的数据(XML对象)

# Number states  状态码(整数)，如：200,404

# String statesText  状态文本(字符串)，如OK，NotFound

2、Jquery Ajax 内部基于原生Ajax

       $.ajax({
           url:
           type:
           success:
   })

Jquery Ajax 和原生 Ajax 实例：

def index(request)

    return render(request,'index.html')

def add1(request): # Jquery Ajax

    a1 = int(request.POST.get('i1'))
    a2 = int(request.POST.get('i2'))
    a3 = a2 + a1

    return HttpResponse(a3)

def add2(request): # 原生 Ajax
    if request.method == 'GET':
        a1 = int(request.POST.get('i1'))
        a2 = int(request.POST.get('i2'))
        a3 = a2 + a1
        return HttpResponse('okok')
    else:
        print(request.POST)
        print(request.body)

        return HttpResponse('...')

<body>
<h1>首页</h1>
<input type="text" id="i1">
+
<input type="text" id="i2">
=
<input type="text" id="i3">

<input type="button" id="btn1" value="JQuery Ajax" onclick="add1()">
<input type="button" id="btn2" value="原生 Ajax" onclick="add2()">


<script src="/static/jquery-3.3.1.js"></script>
<script>
    function add1() {
        $.ajax({
            url:'/add1/',
            type:'POST',
            data:{'i1':$("#i1").val(),'i2':$("#i2").val()},
            success:function (arg) {
                $("#i3").val(arg)
            }
        })
        
    }
    
    function add2() {
        /* GET 请求
        var xhr =  new XMLHttpRequest()
        xhr.onreadystatechange = function () {
            if(xhr.readyState == 4){
                alert(xhr.responseText)
            }
        }
        xhr.open('GET','/add2/?i1=12&i2=19')
        xhr.send()

        */

        /* POST 请求 */
        var xhr =  new XMLHttpRequest()
        xhr.onreadystatechange = function () {
            if(xhr.readyState == 4){
                alert(xhr.responseText)
            }
        }
        xhr.open('POST','/add2/')
        /* 如果请求头设置下面类型，才会自动把 request.body 里的数据转换成字典格式放到 request.POST */
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
        xhr.send("i1=12&i2=19")

    }
</script>
</body>

3、伪 Ajax 非 XMLHttpRequest iframe+form 标签

 iframe 标签: 不刷新 发送http请求
 form 标签：具有打包input功能： 参数：target='ifr(ifr为iframe的name名)' 可修改默认提交方式，而是提交给 iframe，由iframe提交后台
 伪 Ajax无法写回调函数，但会把后台返回值放到 iframe 里。如果 iframe 里有内容，可以写上onload属性 函数会自动加载时执行

def autohome(request):  # 可克隆页面

    return render(request,'autohome.html')

def fake_ajax(request): # 伪 Ajax 提交  iframe+form
    if request.method == 'GET':

        return render(request,'fake_ajax.html')
    else:
        print('POST')
        return HttpResponse('....')

# 可克隆页面

<body>
<div>
<input type="text" id="txt1"><input type="button" value="查看" onclick="changeScr()">
</div>
    <iframe id="ifr" style="width: 1000px;height: 2000px" src="http://www.autohome.com.cn"></iframe>


<script>
    function changeScr() {
        var inp = document.getElementById('txt1').value
        alert(inp)
        document.getElementById('ifr').src = inp
    }

</script>


</body>

# 伪 Ajax 提交  iframe+form

<body>
<input type="text">
<form id="f1" method="POST" action="/fake_ajax/" target="ifr">
    <iframe id="ifr" name="ifr"></iframe>
    <input type="text" name="user">
    <a onclick="submitForm()">提交</a>
</form>

<script>
    function submitForm() {
        document.getElementById('ifr').onload = loadiframe
        document.getElementById('f1').submit()


    }
    function loadiframe() {
        var conten = document.getElementById('ifr').contentWindow.document.body.innerText
        alert(conten+'okok')
    }
    
</script>

</body>

4、基于 Ajax 上传文件

原生 Ajax 上传文件依赖于 FormData

Jquery Ajax 上传文件依赖于 FormData

伪 Ajax 上传文件

例子:

def upload(request):
    if request.method == 'GET':

        return render(request,'upload.html')

    else:
        import os
        print(request.POST,request.FILES)
        file_obj = request.FILES.get('fafafa')
        file_path = os.path.join("static",file_obj.name)
        print(file_path)
        with open(file_path,'wb') as f:
            for chunk in file_obj.chunks():
                f.write(chunk)

        return HttpResponse(file_path)

<body>
<h1>原生 Ajax 上传文件</h1>
<input type="file" id="i1">
<a onclick="upload1()">上传</a>
<div id="container1"></div>

<h1>Jquery Ajax 上传文件</h1>
<input type="file" id="i2">
<a onclick="upload2()">上传</a>
<div id="container2"></div>

<h1>伪 Ajax 上传文件</h1>
<form id="f1" method="POST" action="/upload/" target="ifr" enctype="multipart/form-data">
    <iframe id="ifr" name="ifr" style="display: none"></iframe>
    <input type="file" name="fafafa">
    <a onclick="upload3()">上传</a>
</form>
<div id="container3"></div>


<script src="/static/jquery-3.3.1.js"></script>
<script>
    function upload1() {

        var formData = new FormData()
        formData.append('k1','v1')
        formData.append('fafafa',document.getElementById('i1').files[0])

        var xhr = new XMLHttpRequest()

        xhr.onreadystatechange = function () {
            if(xhr.readyState == 4){
                var file_path = xhr.responseText
                var tag = document.createElement('img')
                tag.src = "/"+file_path
                document.getElementById('container1').appendChild(tag)

            }
        }

        xhr.open('POST','/upload/')

        // 使用formdata 就不需要加如下类型
{#        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')#}
        xhr.send(formData)
    }
    
    
    
    function upload2() {
        var formData = new FormData()
        formData.append('k1','v1')
        formData.append('fafafa',$('#i2')[0].files[0])

        $.ajax({
            url:'/upload/',
            type:'POST',
            data:formData,
            contentType:false,
            processData:false,
            success:function (arg) {
                var tag = document.createElement('img')
                tag.src = '/'+arg
                $('#container2').append(tag)
            }
        })

    }


    function upload3() {
        document.getElementById('ifr').onload = loadiframe
        document.getElementById('f1').submit()
    }
    function loadiframe() {
        var content = document.getElementById('ifr').contentWindow.document.body.innerText
        var tag = document.createElement('img')
        tag.src = "/"+content
        $("#container3")[0].append(tag)

    }

</script>
</body>

5、总结

上传文件： 推荐用伪造 Ajax : iframe + form 兼容性
数据  ：  Jquery  简单，方便

posted @ 2018-05-22 10:40 G500 阅读(206) 评论(0) 收藏举报

刷新页面返回顶部

G500

Ajax：原生Ajax ,XMLHttpRequest对象主要方法、属性。Jquery Ajax：内部基于 原生Ajax。伪 Ajax、iframe标签：非XMLHttpRequest。基于 Ajax 上传文件:原生、Jquery、伪Ajax。

公告

Ajax：原生Ajax ,XMLHttpRequest对象主要方法、属性。Jquery Ajax：内部基于原生Ajax。伪 Ajax、iframe标签：非XMLHttpRequest。基于 Ajax 上传文件:原生、Jquery、伪Ajax。