ajax的原生,伪造和jquery讲解

发布时间:2020-07-19 17:38:31 作者:kesungang
来源:网络 阅读:2416

jquery是对Ajax的一个封装,真正的操作是封装里面的内容(基于内部调用原生的Ajax的XMLHTTPRequest)
Ajax还有一种是伪造ajax,所为伪造就是不用XMLHTTPRequest,利用的浏览器的一种技术实现的

XmlHttpRequest对象介绍

XmlHttpRequest对象的主要方法:

 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()

    终止请求

发送
ajax的原生,伪造和jquery讲解
监听状态
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讲解
上面的内容是在body里面,后台request.post里面是没有数据的,要有需要添加请求头如下图:
ajax的原生,伪造和jquery讲解

XmlHttpRequest对象的主要属性:

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...

伪Ajax

iframe是可以伪造的,不会刷新。结合form来提交数据
ajax的原生,伪造和jquery讲解

填写回调函数
返回来的是放在了iframe里面。如果iframe里面有内容了,说明有返回了。通过onload函数来加载
ajax的原生,伪造和jquery讲解
取值是不一样的,因为有两个document,需要进入这个对象里面
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添加数据
        formData.append('wenjian',document.getElementById('i1').files[0]);//这里通过id得到的结果是一个列表,所以可以通过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>

结果:
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来设置为透明度为0

推荐阅读:
  1. 怎么写原生Ajax
  2. jQuery AJAX与jQuery事件的分析讲解

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

ajax y讲解 ue

上一篇:关于安装oracle 11G R2 for Windows X64问题

下一篇:ArrayList、LinkedList和Vector的源码解析,带你走近List的世界

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》