溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

ajax的原生，偽造和jquery講解

發(fā)布時間：2020-07-19 17:38:31 來源：網(wǎng)絡(luò) 閱讀：2415 作者：kesungang 欄目：web開發(fā)

jquery是對Ajax的一個封裝，真正的操作是封裝里面的內(nèi)容（基于內(nèi)部調(diào)用原生的Ajax的XMLHTTPRequest）
Ajax還有一種是偽造ajax，所為偽造就是不用XMLHTTPRequest，利用的瀏覽器的一種技術(shù)實(shí)現(xiàn)的

XmlHttpRequest對象介紹

XmlHttpRequest對象的主要方法：

 void open(String method,String url,Boolen async)
   用于創(chuàng)建請求

   參數(shù)：
       method： 請求方式（字符串類型），如：POST、GET、DELETE...
       url：    要請求的地址（字符串類型）
       async：  是否異步（布爾類型）

b. void send(String body)
    用于發(fā)送請求

    參數(shù)：
        body： 要發(fā)送的數(shù)據(jù)（字符串類型）

c. void setRequestHeader(String header,String value)
    用于設(shè)置請求頭

    參數(shù)：
        header： 請求頭的key（字符串類型）
        vlaue：  請求頭的value（字符串類型）

d. String getAllResponseHeaders()
    獲取所有響應(yīng)頭

    返回值：
        響應(yīng)頭數(shù)據(jù)（字符串類型）

e. String getResponseHeader(String header)
    獲取響應(yīng)頭中指定header的值

    參數(shù)：
        header： 響應(yīng)頭的key（字符串類型）

    返回值：
        響應(yīng)頭中指定的header對應(yīng)的值

f. void abort()

    終止請求

發(fā)送
ajax的原生，偽造和jquery講解
監(jiān)聽狀態(tài)
ajax的原生，偽造和jquery講解
ajax的原生，偽造和jquery講解
ajax的原生，偽造和jquery講解

<body>
<input type="text" id="i1"> + <input type="text" id="i2"> = <input type="text" id="i3">
<input type="button" value="原生提交ajax" onclick="addajax();">
<script>
    function addajax() {
        var xhr = new XMLHttpRequest();

        xhr.onreadystatechange=function () {
            if(xhr.readyState==4){
                alert(xhr.responseText)
            }
        }
         xhr.open('GET','/add/?i1=11&i2=13');
        xhr.send();
    }
</script>
</body>

ajax的原生，偽造和jquery講解
上面的內(nèi)容是在body里面，后臺request.post里面是沒有數(shù)據(jù)的，要有需要添加請求頭如下圖：
ajax的原生，偽造和jquery講解

XmlHttpRequest對象的主要屬性：

a. Number readyState
   狀態(tài)值（整數(shù)）

   詳細(xì)：
      0-未初始化，尚未調(diào)用open()方法；
      1-啟動，調(diào)用了open()方法，未調(diào)用send()方法；
      2-發(fā)送，已經(jīng)調(diào)用了send()方法，未接收到響應(yīng)；
      3-接收，已經(jīng)接收到部分響應(yīng)數(shù)據(jù)；
      4-完成，已經(jīng)接收到全部響應(yīng)數(shù)據(jù)；

b. Function onreadystatechange
   當(dāng)readyState的值改變時自動觸發(fā)執(zhí)行其對應(yīng)的函數(shù)（回調(diào)函數(shù)）

c. String responseText
   服務(wù)器返回的數(shù)據(jù)（字符串類型）

d. XmlDocument responseXML
   服務(wù)器返回的數(shù)據(jù)（Xml對象）

e. Number states
   狀態(tài)碼（整數(shù)），如：200、404...

f. String statesText
   狀態(tài)文本（字符串），如：OK、NotFound...

偽Ajax

iframe是可以偽造的，不會刷新。結(jié)合form來提交數(shù)據(jù)
ajax的原生，偽造和jquery講解

填寫回調(diào)函數(shù)
返回來的是放在了iframe里面。如果iframe里面有內(nèi)容了，說明有返回了。通過onload函數(shù)來加載
ajax的原生，偽造和jquery講解
取值是不一樣的，因?yàn)橛袃蓚€document，需要進(jìn)入這個對象里面
ajax的原生，偽造和jquery講解
ajax的原生，偽造和jquery講解
最終的偽造ajax
ajax的原生，偽造和jquery講解

原生ajax上傳文件

views代碼

def upload(request):
    if request.method == "GET":
        return render(request,'upload.html')
    else:
        import os
        file_obj = request.FILES.get('wenjian')
        print(file_obj.name)
        file_path = os.path.join('static',file_obj.name)
        with open(file_path,'wb') as f:
            for chun in file_obj.chunks():
                f.write(chun)
        return HttpResponse(file_path)

html代碼

<body>
<input type="file" id="i1">
<a onclick="uploadajax();">上傳</a>
<div id="con"></div>
<script>
    function uploadajax() {
        var formData = new FormData();//依賴formData這個對象
        formData.append('k1','v1');//通過append來給formData添加數(shù)據(jù)
        formData.append('wenjian',document.getElementById('i1').files[0]);//這里通過id得到的結(jié)果是一個列表，所以可以通過0位置來取第一個值

        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange=function () {
            if(xhr.readyState == 4){
                var file_path = xhr.responseText;
                console.log(file_path)
                var tag = document.createElement('img');
                tag.src = "/" + file_path;
                document.getElementById('con').appendChild(tag);
            }
        };
        xhr.open('POST','/upload/');
        xhr.send(formData)
    }
</script>
</body>

結(jié)果：
ajax的原生，偽造和jquery講解

       function upload2(){
            var formData = new FormData();
            formData.append('k1','v1');
            // formData.append('fafafa',document.getElementById('i1').files[0]);
            formData.append('fafafa',$('#i2')[0].files[0]);
            // $('#i2') -> $('#i2')[0]
            // document.getElementById('i1') -> $(document.getElementById('i1'))

            $.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);
                }
            })
        }

#偽造的方法是下面

    <h2>偽 Ajax上傳文件</h2>
    <form id="f1" method="POST" action="/upload/" target="ifr" enctype="multipart/form-data">
        <iframe id="ifr" name="ifr" ></iframe>
        <input type="file" name="fafafa" />
        <a onclick="upload3();">上傳</a>
    </form>
    <div id="container3"></div>

         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').append(tag);
        }

上傳的按鈕好看是吧input type=file這個通過opcity來設(shè)置為透明度為0

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手