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讲解_第1张图片
监听状态
ajax的原生,伪造和jquery讲解_第2张图片
ajax的原生,伪造和jquery讲解_第3张图片
ajax的原生,伪造和jquery讲解_第4张图片


 +  = 


ajax的原生,伪造和jquery讲解_第5张图片
上面的内容是在body里面,后台request.post里面是没有数据的,要有需要添加请求头如下图:
ajax的原生,伪造和jquery讲解_第6张图片

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讲解_第7张图片

填写回调函数
返回来的是放在了iframe里面。如果iframe里面有内容了,说明有返回了。通过onload函数来加载
ajax的原生,伪造和jquery讲解_第8张图片
取值是不一样的,因为有两个document,需要进入这个对象里面
ajax的原生,伪造和jquery讲解_第9张图片
ajax的原生,伪造和jquery讲解_第10张图片
最终的伪造ajax
ajax的原生,伪造和jquery讲解_第11张图片

原生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代码



上传

结果:
ajax的原生,伪造和jquery讲解_第12张图片

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

#伪造的方法是下面

    

伪 Ajax上传文件

上传
         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