原生XMLHTTPResponse，jQuery-Ajax 上传文件；iframe上传图片&预览；图片验证码小案例

原生AJAX

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

1、XmlHttpRequest对象介绍 (不兼容IE老版本)

x = new 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()

    终止请求

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

测试

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="/static/jquery-2.2.3.min.js"></script>

    <script src="/static/jquery.cookie.js"></script>

</head>

<body>

    <div>

        <button value="XML_SEND" onclick="xmlSend();">XMLHttpRequest()</button>

    </div>

    <script>

        function xmlSend(){

            let xml = new XMLHttpRequest();                            //创建XMLHttpResquest对象

            xml.open('POST','/ajax_original/');                         //设置请求地址

            xml.setRequestHeader('X-CSRFtoken',$.cookie('csrftoken') ); //设置请求头

            {#xml.send();                                                 //发起请求#}

            xml.onreadystatechange = function () {                     //状态改变

                console.log('xml 实例readyState状态改变：',xml.readyState);

                if (xml.readyState === 4) {

                    console.log('收到返回值字符串：',xml.responseText);

                    console.log('转换为对象：',JSON.parse(xml.responseText));

                    console.log('服务端返回status状态码：',xml.status);

                    console.log('服务端返回statusText文本：',xml.statusText);

                }

            };

            //测试发送body数据,需要设置请求头Content-Type(告知服务器数据格式，服务器用对应的方式解析)

            xml.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");

            xml.send('name=name1; pwd=123');

        }

    </script>

</body>

</html>

django-views.py函数处理

from django.shortcuts import HttpResponse

from django.views import View

import json

# Create your views here.

class AjaxOrnginal(View):

    def get(self,request):

        return render(request, 'ajax_templates/original_xmlHttpRequest.html')

    def post(self, request):

        print(request.POST)

        ret = {'code': True, 'data': None}

        # return HttpResponse(json.dumps(ret))

        return HttpResponse(json.dumps(ret),status=404, reason="Oh Fuck ! EveryThing is None")

2、兼容IE老版本XmlHttpRequest对象

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

"伪"AJAX

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

        <form action="/ajax_original/" method="post" target="ifra">

            <iframe name="ifra" src="https://www.baidu.com"></iframe>

            <input type="text" name="username">

            <input type="text" name="email">

            <input type="submit" value="伪Ajax提交">

        </form>

ifram对象为一个小的新html标签窗口，获取ifram对象的内容需要从这个子窗口document对象

$("#ifra").contents().find('body').text()

试用场景：

　　普通字符串、字典数据：优先使用用Ajax，其次XMLHttpRequest，再次考虑iframe

上传文件的三种方法

1、原生XMLHttpRequest ---- 上传文件

　　依赖：new FormData(); 对象，

html前端：XMLHttpRequest()

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

        <script src="/static/jquery-2.2.3.min.js"></script>

    <script src="/static/jquery.cookie.js"></script>

</head>

<body>

    <div class="upload_div">

            <input type="file" value="上传" class="file" id="original_upload_input" name="file1">

    </div>

    <div>

        <input type="button" onclick="upLoadFile();" value="上传">

    </div>

    <script>

        function upLoadFile(){

            let file_obj = document.getElementById('original_upload_input').files[0];

            let fd = new FormData();

            fd.append('username', 'root');

            fd.append('file1', file_obj);

            let xhr = new XMLHttpRequest();

            xhr.open('post', '/xhr_upload/');

            xhr.setRequestHeader('X-CSRFtoken',$.cookie('csrftoken') ); //设置请求头

            xhr.onreadystatechange = function () {                     //状态改变

                console.log('xml 实例readyState状态改变：',xhr.readyState);

                if (xhr.readyState === 4) {

                    console.log('收到返回值字符串：',xhr.responseText);

                }

            };

            xhr.send(fd);

        }

    </script>

</body>

</html>

　　django views函数后台处理

from django.shortcuts import render

from django.shortcuts import HttpResponse

from django.views import View

import json

# Create your views here.

class XhrUpload(View):

    def get(self,request):

        return render(request, 'ajax_templates/original_upload.html')

    def post(self, request):

        file = request.FILES.get('file1')

        with open(file.name, 'wb') as f:

            for item in file.chunks():

                f.write(item)

        return HttpResponse('upload ok')

2、jQuery ---- 上传文件

　　仍然使用new FormData(); 对象

需增加特殊设置：

 processData:false,  // tell jQuery not to process the data：不要转义数据
 contentType:false,  // tell jQuery not to set contentType：不要设置请求头

            let file_obj = document.getElementById('original_upload_input').files[0];

            // 仍然要依赖于FormData()对象，并且要设置processData和contentType参数

            let fd = new FormData();

            fd.append('username', 'root');

            fd.append('file1', file_obj);

            //使用ajax 上传数据

            $.ajax({

                url:'/xhr_upload/',

                type: 'POST',

                data:fd,

                headers:{'X-CSRFtoken': $.cookie('csrftoken')},

                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);    //XHR对象

                }

            })

        }

3、ifram 上传文件

　　优势：可以将上传后的返回值信息做成图片预览等功能。

　　html

<form action="/xhr_upload/" method="post" enctype="multipart/form-data" target="ifram1">

     {% csrf_token %}

<iframe id="ifram1" name="ifram1"></iframe>

<input type="file" name="file1">

<input type="submit" onclick="iframSubmit();" value="Form提交(target=ifram1)">

</form>

ajax 从iframe 加载成功后获取返回值：$('#iframe标签').load(function(){xxxxxx; ......; })

        function iframSubmit() {

            //上传成功，iframe标签加载返回值成功，从标签中获取元素

            $('#ifram1').load(function () {

                //获取返回值，

                let recv = $('#ifram1').contents().find('body').text();

                console.log(recv);

            })

        }

　　django views.py函数处理

class XhrUpload(View):

    def get(self,request):

        return render(request, 'ajax_templates/original_upload.html')

    def post(self, request):

        file = request.FILES.get('file1')

        with open(file.name, 'wb') as f:

            for item in file.chunks():

                f.write(item)

        ret = HttpResponse('upload ok')

        ret['X-Frame-Options'] = 'ALLOW'

        return ret

　　图片预览版本iframe：

步骤说明：当iframe标签加载成功.onload(function(){})时，获取iframe标签中的返回值。返回值中包含图片uri, 通过组合'/' + uri 获取图片路径，创建img标签，在浏览器中增加此标签实现图片自动get展示

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="/static/jquery-2.2.3.min.js"></script>

    <script src="/static/jquery.cookie.js"></script>

    <style>

        .hide{

            display: block;}

    </style>

</head>

<body>

    <div>

        <form action="/iframe_upload/" method="post" enctype="multipart/form-data" target="ifram1">

            {% csrf_token %}

            <iframe id="ifram1" name="ifram1" class="hide"></iframe>

            <input type="file" name="file1">

            <input type="submit" onclick="iframSubmit();" value="Form提交(target=ifram1)">

        </form>

    </div>

    <div id="preview_div"></div>

    <script>

            //上传成功，iframe标签加载返回值成功，从标签中获取元素

            $('#ifram1').load(function () {

                //获取返回值，返回的是json.dumps()序列化的字符串也可以获取

                let recv = $('#ifram1').contents().find('body').text();

                let data = JSON.parse(recv);

                console.log(data);

                //获取返回的图片URI,并生成图片标签

                let imgTag = document.createElement('img');

                imgTag.src = "/" + data.uri;

                //清空已有img图片标签

                $('#preview_div').empty();

                //添加dom元素

                $('#preview_div').append(imgTag);

            });

    </script>

</body>

</html>

　　如需选择文件后自动上传，js绑定onchange事件实现上传：

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="/static/jquery-2.2.3.min.js"></script>

    <script src="/static/jquery.cookie.js"></script>

    <style>

        .hide{

            display: none;}

    </style>

</head>

<body>

    <div>

        <form id="upload_form" action="/iframe_upload/" method="post" enctype="multipart/form-data" target="ifram1">

            {% csrf_token %}

            <iframe id="ifram1" name="ifram1" class="hide"></iframe>

            <input type="file" name="file1" onchange="upLoadFile()">

            <input type="submit" onclick="iframSubmit();" value="Form提交(target=ifram1)">

        </form>

    </div>

    <div id="preview_div"></div>

    <script>

        //选择文件后自动上传

        function upLoadFile(){

            $('#upload_form').submit()

        }

        //上传成功，iframe标签加载返回值成功，从标签中获取元素

        $('#ifram1').load(function () {

            //获取返回值，返回的是json.dumps()序列化的字符串也可以获取

            let recv = $('#ifram1').contents().find('body').text();

            let data = JSON.parse(recv);

            console.log(data);

            //获取返回的图片URI,并生成图片标签

            let imgTag = document.createElement('img');

            imgTag.src = "/" + data.uri;

            //清空已有img图片标签

            $('#preview_div').empty();

            //添加dom元素

            $('#preview_div').append(imgTag);

        });

    </script>

</body>

input 标签绑定onchange事件;选择文件后自动上传

　　ifram 优势：在所有浏览器都支持，不存在兼容性问题。而XMLHTTPRequest低版本IE浏览器不支持。

　　应用案例(点击更换头像)：

说明：input标签属性title='xxxx' 为设置鼠标移入的时候显示的提示语设置

原理：input标签100%占用div；并且透明度为0 即肉眼不可见。img标签和<input type="file">标签重叠在底层显示。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="/static/jquery-2.2.3.min.js"></script>

    <script src="/static/jquery.cookie.js"></script>

    <style>

        .hide{

            display: none;}

        .preview_div{

            position: relative;

            overflow: hidden;

            display: inline-block;

        }

        .head_portrait{

            width: 108px;

        }

        .head_img {

            position: absolute;

            top: 0;

            bottom: 0;

            width: 100%;

            opacity: 0;

            z-index: 2;

        }

    </style>

</head>

<body>

    <div>

        <form id="upload_form" action="/iframe_upload/" method="post" enctype="multipart/form-data" target="ifram1">

            {% csrf_token %}

            <iframe id="ifram1" name="ifram1" class="hide"></iframe>

            <div id="preview_div" class="preview_div">

                <img id="head_portrait" class="head_portrait" src="/static/images/default.jpg" >

                <input class="head_img" type="file" name="file1" title="点击上传头像" onchange="upLoadFile()" >

            </div>

            <input type="submit" onclick="iframSubmit();" value="Form提交(target=ifram1)">

        </form>

    </div>

    <script>

        //选择文件后自动上传

        function upLoadFile(){

            $('#upload_form').submit()

        }

        //上传成功，iframe标签加载返回值成功，从标签中获取元素

        $('#ifram1').load(function () {

            //获取返回值，返回的是json.dumps()序列化的字符串也可以获取

            let recv = $('#ifram1').contents().find('body').text();

            let data = JSON.parse(recv);

            console.log(data);

            // 在原有图片上面更新

            let uri = "/" + data.uri;

            $('#head_portrait').attr('src', uri);

    </script>

</body>

</html>

　　-----------------------------------------------------------

图片验证码案例

　　验证码图片生成

　　工具：pip3 install pillow

utils/check_code.py

#!/usr/bin/env python

# -*- coding:utf-8 -*-

import random

# pip3 install pillow

from PIL import Image, ImageDraw, ImageFont, ImageFilter

_letter_cases = "abcdefghjkmnpqrstuvwxy"  # 小写字母，去除可能干扰的i，l，o，z

_upper_cases = _letter_cases.upper()  # 大写字母

_numbers = ''.join(map(str, range(3, 10)))  # 数字

init_chars = ''.join((_letter_cases, _upper_cases, _numbers))

def create_validate_code(size=(120, 30),

                         chars=init_chars,

                         img_type="GIF",

                         mode="RGB",

                         bg_color=(255, 255, 255),

                         fg_color=(0, 0, 255),

                         font_size=18,

                         font_type="Monaco.ttf",

                         length=4,

                         draw_lines=True,

                         n_line=(1, 2),

                         draw_points=True,

                         point_chance=2):

    """

    @todo: 生成验证码图片

    @param size: 图片的大小，格式（宽，高），默认为(120, 30)

    @param chars: 允许的字符集合，格式字符串

    @param img_type: 图片保存的格式，默认为GIF，可选的为GIF，JPEG，TIFF，PNG

    @param mode: 图片模式，默认为RGB

    @param bg_color: 背景颜色，默认为白色

    @param fg_color: 前景色，验证码字符颜色，默认为蓝色#0000FF

    @param font_size: 验证码字体大小

    @param font_type: 验证码字体，默认为 ae_AlArabiya.ttf

    @param length: 验证码字符个数

    @param draw_lines: 是否划干扰线

    @param n_lines: 干扰线的条数范围，格式元组，默认为(1, 2)，只有draw_lines为True时有效

    @param draw_points: 是否画干扰点

    @param point_chance: 干扰点出现的概率，大小范围[0, 100]

    @return: [0]: PIL Image实例

    @return: [1]: 验证码图片中的字符串

    """

    width, height = size  # 宽高

    # 创建图形

    img = Image.new(mode, size, bg_color)

    draw = ImageDraw.Draw(img)  # 创建画笔

    def get_chars():

        """生成给定长度的字符串，返回列表格式"""

        return random.sample(chars, length)

    def create_lines():

        """绘制干扰线"""

        line_num = random.randint(*n_line)  # 干扰线条数

        for i in range(line_num):

            # 起始点

            begin = (random.randint(0, size[0]), random.randint(0, size[1]))

            # 结束点

            end = (random.randint(0, size[0]), random.randint(0, size[1]))

            draw.line([begin, end], fill=(0, 0, 0))

    def create_points():

        """绘制干扰点"""

        chance = min(100, max(0, int(point_chance)))  # 大小限制在[0, 100]

        for w in range(width):

            for h in range(height):

                tmp = random.randint(0, 100)

                if tmp > 100 - chance:

                    draw.point((w, h), fill=(0, 0, 0))

    def create_strs():

        """绘制验证码字符"""

        c_chars = get_chars()

        strs = ' %s ' % ' '.join(c_chars)  # 每个字符前后以空格隔开

        font = ImageFont.truetype(font_type, font_size)

        font_width, font_height = font.getsize(strs)

        draw.text(((width - font_width) / 3, (height - font_height) / 3),

                  strs, font=font, fill=fg_color)

        return ''.join(c_chars)

    if draw_lines:

        create_lines()

    if draw_points:

        create_points()

    strs = create_strs()

    # 图形扭曲参数

    params = [1 - float(random.randint(1, 2)) / 100,

              0,

              0,

              0,

              1 - float(random.randint(1, 10)) / 100,

              float(random.randint(1, 2)) / 500,

              0.001,

              float(random.randint(1, 2)) / 500

              ]

    img = img.transform(size, Image.PERSPECTIVE, params)  # 创建扭曲

    img = img.filter(ImageFilter.EDGE_ENHANCE_MORE)  # 滤镜，边界加强（阈值更大）

    return img, strs

　　django views.py 后端使用如上check_code.py 生成图片

from django.shortcuts import render

from django.shortcuts import HttpResponse

from django.views import View

import json

import os

from io import BytesIO

from utils.check_code import create_validate_code

# Create your views here.

# 生成图片验证码并将对应字符串存储到session中

class CheckCodeImage(View):

    def get(self, request):

        # from io import BytesIO ,开辟内存空间,用来存储字节流

        stream = BytesIO()

        # 使用自定义函数创建验证码图片&字符串

        img, code_str = create_validate_code()

        # 将图片保存到内存的字节流中

        img.save(stream, 'PNG')

        # 将验证码字符串保存到session中

        request.session['CheckCode'] = code_str

        # 将图片字节流返回给客户端：HttpResponse()可以返回字节

        return HttpResponse(stream.getvalue())

# 登录请求校验验证码

class LoginCaptch(View):

    def get(self, request):

        return render(request, 'ajax_templates/login_iframe_captcha.html')

    def post(self, request):

        if request.session['CheckCode'] == request.POST.get('CheckCode'):

            print('验证码正确')

        else:

            print('验证码错误:',request.session['CheckCode'].upper(),request.POST.get('CheckCode'))

        return render(request, 'ajax_templates/login_iframe_captcha.html')

　　urls.py

    url(r'iframe_login_captch/', ajax_views.LoginCaptch.as_view()),

    url(r'^check_code.html$', ajax_views.CheckCodeImage.as_view()),

　　login_iframe_captcha.html 前端展示验证码图片

　　点击图片本身，自动刷新验证码：请求url增加? 浏览器检测到url变化，重新发起请求，后端处理不变。

　　login_iframe_captcha.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .login{

            display: inline-block;

        }

    </style>

</head>

<body>

    <form action="/iframe_login_captch/" method="post">

        {% csrf_token %}

        <div class="login">

            <div class="form-group">

                <label for="username">用户名</label>

                <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名" >

            </div>

            <div class="form-group">

                <label for="password">密码</label>

                <input type="password" class="form-control" id="password" name="pwd" placeholder="请输入密码" >

            </div>

            <div class="form-group">

                <label for="captcha">验证码</label>

                <input type="text" class="form-control" id="captcha"  name="CheckCode" placeholder="验证码" >

            </div>

            <button type="submit">登 陆</button>

        </div>

    </form>

    <div>

        <img src="/check_code.html" onclick="changeCheckCode(this)">

    </div>

    <script>

        //点击图片改变图片验证码: 请求url增加? 浏览器检测到url变化，重新发起请求，后端处理不变。

        function changeCheckCode(ths) {

            ths.src = ths.src + "?";

        }

    </script>

</body>

</html>

---------------------------------------------------------------------