django上课笔记7-jQuery Ajax 和原生Ajax-伪造的Ajax-三种Ajax上传文件方法-JSONP和CORS跨域资源共享

一、jQuery Ajax 和原生Ajax

from django.conf.urls import url

from django.contrib import admin

from app01 import views

urlpatterns = [

    url(r'^admin/', admin.site.urls),

    url(r'^index/', views.index),

    url(r'^add1/', views.add1),

    url(r'^add2/', views.add2),

]

urls.py

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<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-1.12.4.js"></script>

    <script>

        function add1() {

            // jQuery Ajax

            $.ajax({

                url:'/add1/',

                type:'POST',

                data:{'i1':$('#i1').val(),'i2':$('#i2').val()},

                success:function (arg) {

                    $('#i3').val(arg)

                }

            })

        }

        function add2() {

            /*

            // 原生 Ajax 的 GET 方式

            var xhr = new XMLHttpRequest(); // 创建对象XMLHttpRequest

            xhr.onreadystatechange = function () {  // onreadystatechange方法是监控当有返回值时，自动执行回调函数

                if (xhr.readyState == 4){

                    // Number readyState 状态值（整数）

                       // 详细：

                          // 0-未初始化，尚未调用open()方法；

                          // 1-启动，调用了open()方法，未调用send()方法；

                          // 2-发送，已经调用了send()方法，未接收到响应；

                          // 3-接收，已经接收到部分响应数据；

                          // 4-完成，已经接收到全部响应数据；

                    document.getElementById('i3').value = xhr.responseText  // responseText 拿到返回值字符串并赋值给id='i3'的input框

                }

            };

            xhr.open('GET','/add2/?i1='+document.getElementById('i1').value+'&'+'i2='+document.getElementById('i2').value); // 以GET的形式向URL 为add2发送数据

            xhr.send()  // 发送数据

            */

            // 原生 Ajax 的 POST 方式

            var xhr = new XMLHttpRequest();

            xhr.onreadystatechange = function () {  // onreadystatechange方法是监控当有返回值时，自动执行回调函数

                if (xhr.readyState == 4){

                    // Number readyState 状态值（整数）

                       // 详细：

                          // 0-未初始化，尚未调用open()方法；

                          // 1-启动，调用了open()方法，未调用send()方法；

                          // 2-发送，已经调用了send()方法，未接收到响应；

                          // 3-接收，已经接收到部分响应数据；

                          // 4-完成，已经接收到全部响应数据；

                    document.getElementById('i3').value = xhr.responseText  // responseText 拿到返回值字符串并赋值给id='i3'的input框

                }

            };

            xhr.open('POST','/add2/');

            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');  // 设置请求头协议

            xhr.send('i1='+document.getElementById('i1').value+'&'+'i2='+document.getElementById('i2').value)  // 发送的数据格式

        }

    </script>

</body>

</html>

index.html

from django.shortcuts import render,HttpResponse,redirect

def index(request):

    return render(request,'index.html')

def add1(request):

    a1 = int(request.POST.get('i1'))

    a2 = int(request.POST.get('i2'))

    return HttpResponse(a1+a2)

def add2(request):

    if request.method == 'GET':

        a1 = int(request.GET.get('i1'))

        a2 = int(request.GET.get('i2'))

        return HttpResponse(a1+a2)

    else:

        a1 = int(request.POST.get('i1'))

        a2 = int(request.POST.get('i2'))

        return HttpResponse(a1+a2)

Views.py

二、伪造的Ajax

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <form id="f1" method="POST" action="/fake_ajax/" target="ifr">  {# target="ifr 表示不通过POST提交了，而是把数据交给iframe 由iframe提交#}

        <iframe id="ifr" name="ifr" style="display: none"></iframe>

        <input type="text" name="user"/>

        <a onclick="submiForm();">提交</a>

    </form>

    <script>

        function submiForm() {

            document.getElementById('ifr').onload = loadIframe;

            document.getElementById('f1').submit()

        }

        function loadIframe() {

            var content = document.getElementById('ifr').contentWindow.document.body.innerText;

        }

    </script>

</body>

</html>

fake_ajax.html

def fake_ajax(request):

    if request.method == 'GET':

        return render(request,'fake_ajax.html')

    else:

        print(request.POST)

        return HttpResponse('I am 返回值')

Views.py

三、三种Ajax上传文件方法

import os

def upload(request):

    if request.method == 'GET':

        return render(request,'upload.html')

    else:

        print(request.POST,request.FILES)

        file_obj = request.FILES.get('key')

        print(file_obj)

        print(file_obj.name)

        file_path = os.path.join('static',file_obj.name)

        with open(file_path,'wb') as f:

            for chunk in file_obj.chunks():

                f.write(chunk)

        return HttpResponse(file_path)

Views.py

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

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

    {# 伪Ajax上传一定要在from中加属性: enctype="multipart/form-data" #}

    <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="key">

        <a onclick="upload3()">上传</a>

    </form>

    <div id="container3"></div>

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

    <script>

        // 原生Ajax上传文件

        function upload1() {

            var forData = new FormData();

            {# forData.append('k1','v1'); k1 为键，v1 为字符串对象或者文件对象 #}

            {# 值为document对象，files为一个列表，[0]表示取第一个文件 #}

            forData.append('key',document.getElementById('i1').files[0]);

            var xhr = new XMLHttpRequest();

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

            xhr.send(forData);  {# 发送存在forData中的数据 #}

            xhr.onreadystatechange = function () {  {# 回调函数 #}

                if (xhr.readyState == 4){             {# 当返回值全部加载完成时 #}

                    var file_path = xhr.responseText; {# xhr.responseText取到返回值(返回值为文件路径) #}

                    var tag = document.createElement('img'); {# 创建img标签 #}

                    tag.src = '/' + file_path; {# 设置img标签的路径 #}

                    document.getElementById('container1').appendChild(tag);  {# 在页面中添加img标签到相应的位置 #}

                }

            };

        }

        // jQuery Ajax上传文件

        function upload2() {

            var forData = new FormData();

            forData.append('key',$('#i2')[0].files[0]);

            // jquery对象转为document对象时，在后边加[0]

            // $('#i2') -> $('#i2')[0]

            // document对象转为jquery对象时，直接给document对象加$

            // document.getElementById('i1') -> $(document.getElementById('i1'))

            $.ajax({

                url:'/upload/',

                type:'POST',

                data:forData,

                contentType:false,

                processData:false,

                success:function (arg) {   {# 回调函数 #}

                    var tag = document.createElement('img');  {# 创建img标签 #}

                    tag.src = '/' + arg;  {# 设置img标签的路径 #}

                    $('#container2').append(tag);   {# 在页面中添加img标签到相应的位置 #}

                }

            })

        }

        // 伪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);

        }

    </script>

</body>

</html>

upload.html

四、JSONP(解决浏览器的同源策略)和CORS跨域资源共享

- JSONP

    - 同源策略

        - 限制：Ajax(包括原生Ajax和jQuery Ajax)

        - 不限制：script 标签中的src属性链接到别的网址

    开发需求：向其他网站发Http请求

        - 浏览器直接发送请求【考虑同源】

        - 浏览器->服务端->发送请求【不考虑同源】

    浏览器直接发送请求【考虑同源】

        要求：

            1. 客户端

                - URL?callback=funcname

                - function funcname(arg){

                        console.log(arg)

                    }

            2. 服务端

                - 获取 funcname = request.GET.get(callback)

                - 返回：

                        funcname = request.GET.get('callback')    # 动态获取函数名

                        user_list = [

                            'alex','eric','egon'

                        ]

                        user_list_str = json.dumps(user_list)    # 转为json字符串

                        temp = "%s(%s)" %(funcname,user_list_str,) # 返回 "函数名(json字符串参数)"

                        return HttpResponse(temp)

    使用：

        1. 自己写动态创建script

            function getUsers(){

                var tag = document.createElement('script');

                tag.src = "http://www.s4.com:8001/users/?callback=funcname";

                document.head.appendChild(tag);

             }

            function funcname(arg){

                console.log(arg);

            }

        2. jQuery

            $.ajax({

                url: 'http://www.s4.com:8001/users/',

                type: 'GET',

                dataType: 'JSONP',         # 类型

                jsonp: 'callback',         # 后台通过request.GET.get(callback)获取到funcname函数名

                jsonpCallback: 'funcname'

            })

            function funcname(arg){

                console.log(arg);

            }

    其他：

        - 只能发GET请求

        - 约定

    JSONP是一种方式，目的解决跨域问题

- CORS 跨域资源共享

    简单请求：

        def new_users(request):

            obj = HttpResponse('返回内容')

            obj['Access-Control-Allow-Origin'] = "*"  #不限制任何请求

            return obj

    复杂请求：

        HTML:

        <script>

            function getUsers(){

                $.ajax({

                    url: 'http://www.s4.com:8001/new_users/',

                    type:"DELETE",

                    success:function(arg){

                        console.log(arg);

                    }

                })

            }

        </script>

        def new_users(request):

            if request.method == "OPTIONS":           #预检 复杂请求来了方法都是OPTIONS

                obj = HttpResponse()

                obj['Access-Control-Allow-Origin'] = "*"

                obj['Access-Control-Allow-Methods'] = "DELETE"

                return obj

            obj = HttpResponse('想要访问的数据')

            obj['Access-Control-Allow-Origin'] = "*"  #不限制任何请求

            return obj

    其他：

        - 任何请求

笔记

django上课笔记7-jQuery Ajax 和原生Ajax-伪造的Ajax-三种Ajax上传文件方法-JSONP和CORS跨域资源共享的更多相关文章

egg.js 通过 form 和 ajax 两种方式上传文件并自定义目录和文件名
egg.js 通过 form 和 ajax 两种方式上传文件并自定义目录和文件名评论:10 · 阅读:8437· 喜欢:0 一.需求二.CSRF 校验三.通过 form 表单上传文件四.通过 ...
4 伪ajax：jsonp、cors 跨域请求
一.同源策略 https://www.cnblogs.com/yuanchenqi/articles/7638956.html 同源策略(Same origin policy)是一种约定,它是浏览器最 ...
Django CORS跨域资源共享
1,什么是CORS 允许浏览器向跨源(协议 + 域名 + 端口)服务器发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制 2,特点 1,浏览器自动完成(在请求头中加入特 ...
ajax跨域原理和cors跨域资源共享
不需要设置前端太多,只需要在服务端是在请求头,使服务端的回复数据可以正常通过浏览器的限制,进入网站首先说下简单请求和非简单请求: 简单请求:必须满足下列条件 1.请求方式:head,get,post ...
三种ajax上传文件方法
1. XMLHttpRequest(原生ajax) <input class="file" type="file" id="fafafa&qu ...
ajax跨域通过 Cors跨域资源共享进行GetPost请求
using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Ne ...
工作笔记4.struts2上传文件到server
本文介绍两种:上传文件到server的方式一种是提交Form表单:还有一种是ajaxfileupload异步上传. 一.JSP中: 1.提交Form表单为了能完毕文件上传,我们应该将这 ...
jQuery.form 上传文件
今年大部分是都在完善产品,这几天遇到了一个问题,原来的flash组件不支持苹果浏览器,需要改.在网上搜了下,看到一个jQuery.form插件可以上传文件,并且兼容性很好,主要浏览器大部分都兼容,插件 ...
python笔记-20 django进阶（model与form、modelform对比，三种ajax方式的对比，随机验证码，kindeditor）
一.model深入 1.model的功能 1.1 创建数据库表 1.2 操作数据库表 1.3 数据库的增删改查操作 2.创建数据库表的单表操作 2.1 定义表对象 class xxx(models.M ...

随机推荐

UICollectionView 讲解
什么是UICollectionView UICollectionView是一种新的数据展示方式,简单来说可以把他理解成多列的UITableView(请一定注意这是 UICollectionView的最 ...
MyReport报表引擎1.2.0.1新功能
一维码(Code128B)转换显示. 多联标题. 修正BugSum统计函数问题报表编辑器保存时没有生成新加入的单元格相关的xml数据相关链接MyReport演示.产品站点相关文章MyReport ...
Redhat常用指令
yum 部分常用的命令包括: 自动搜索最快镜像插件:yum install yum-fastestmirror 安装yum图形窗口插件:yum install yumex 查看可能批量安装的列表:yu ...
linux 状态与系统调优
什么样的cup 才算是负载高呢?才算忙呢?
java中简单字符替换
在网络编程中,假设URL含有特殊字符,如空格.'#'等,server将无法识别导致无法获得正确的參数值.我们须要将这些特殊字符转换成server能够识别的字符,比如将空格转换成'%20'.给定一个字符 ...
JAVA的WebService规范JAX-WS
JAX-WS的服务端.客户端双方传输数据使用的SOAP消息格式封装数据. 一.下载apache-cxf-3.1.4.zip. 二.编写服务端 1.编写一个Web Service用来传输参数的类 pac ...
iOS优化策略
之前写的一系列文章或者小经验一直没有时间去整理放在博客上,今天整理出来,之前是写在作业部落,语法是markdown,点击链接浏览,仅供参考,希望对你有帮助. https://www.zybuluo.c ...
java zip压缩优化版解决压缩后文件一直被占用无法删除
最近进行zip操作,从网上找到一个处理方法,但是经过试验存在一些bug,主要是文件流的申明存在问题,导致jvm一直占用文件而不释放,特意把自己修改的发出来,已备记录 import java.io.Bu ...
jQuery整理笔记九----功能性表格开发
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/hai_cheng001/article/details/27536965 演示样例中用到的一些图片. ...
ICMP协议广播以查询局域网内的所有主机
看到了很多局域网内的主机扫描工具,在想怎么去实现这样一个工具.前几天看了Ping源码--ICMP协议的实例,ICMP可以用来探测网联网内的任一主机,ICMP和广播地址结合来扫描局域网内的所有主机不是很 ...

django上课笔记7-jQuery Ajax 和 原生Ajax-伪造的Ajax-三种Ajax上传文件方法-JSONP和CORS跨域资源共享

一、jQuery Ajax 和 原生Ajax

二、伪造的Ajax

三、三种Ajax上传文件方法

四、JSONP(解决浏览器的同源策略)和CORS跨域资源共享

django上课笔记7-jQuery Ajax 和 原生Ajax-伪造的Ajax-三种Ajax上传文件方法-JSONP和CORS跨域资源共享的更多相关文章

随机推荐

热门专题

django上课笔记7-jQuery Ajax 和原生Ajax-伪造的Ajax-三种Ajax上传文件方法-JSONP和CORS跨域资源共享

一、jQuery Ajax 和原生Ajax

django上课笔记7-jQuery Ajax 和原生Ajax-伪造的Ajax-三种Ajax上传文件方法-JSONP和CORS跨域资源共享的更多相关文章