七、Ajax请求

客户端（浏览器）向服务端发起请求的形式：

  1. 地址栏：GET
  2. 超链接标签：GET
  3. form表单：GET或POST
  4. Ajax（重要）：GET或POST或PUT或DELETE

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML,现在更多使用json数据）。

AJAX的特点和优点：

  • 异步
  • 局部刷新

应用：

7.2、json数据

'''

Supports the following objects and types by default:

    +-------------------+---------------+

    | Python            | JSON          |

    +===================+===============+

    | dict              | object        |

    +-------------------+---------------+

    | list, tuple       | array         |

    +-------------------+---------------+

    | str               | string        |

    +-------------------+---------------+

    | int, float        | number        |

    +-------------------+---------------+

    | True              | true          |

    +-------------------+---------------+

    | False             | false         |

    +-------------------+---------------+

    | None              | null          |

    +-------------------+---------------+

'''

（1）python的序列化和反序列化方法

import json

dic = {"name": "summer"}

dic_json = json.dumps(dic)

dic = json.dumps(dic_json)

（2）Django支持的序列化方法

关于Django中的序列化主要应用在将数据库中检索的数据返回给客户端用户，特别的Ajax请求一般返回的为Json格式。

# 序列化响应类

from django.http import JsonResponse

JsonResponse({})

# 序列化queryset

from django.core import serializers

ret = models.Book.objects.all()

data = serializers.serialize("json", ret)

(1) 视图

# Create your views here.

def reg(request):

    return render(request, "reg.html")

def reg_user(request):

    data = {"msg": "", "state": "success"}

    user = request.POST.get("user")

    if user == "summer":

        data["state"] = "error"

        data["msg"] = "该用户已存在！"

    return JsonResponse(data)

(2) 模板：reg.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<p>用户名：<input type="text"><span class="error" style="color: red"></span></p>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

<script>

    $(":text").blur(function () {

        // 发送Ajax请求

        $.ajax({

            url: "http://127.0.0.1:8008/reg_user/",

            type: "post",

            data: {

                user: $(":text").val(),

            },

            success: function (response) {

                console.log(response);

                $(".error").html(response.msg);

            }

        })

    })

</script>

</body>

</html>

(3) 流程图

7.4、同源策略

7.4.1、同源策略和跨域

现在我们将reg.html单独放在客户端，用浏览器打开，再触发事件，会发现报错：

这是因为浏览器的同源策略导致的。

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。

那么如何解决这种跨域问题呢，我们主要由三个思路：

  1. jsonp
  2. cors
  3. 前端代理

这里主要给大家介绍第二个：cors

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

所以，服务器方面只要添加一个响应头，同意跨域请求，浏览器也就不再拦截：

response = JsonResponse(data)

response["Access-Control-Allow-Origin"] = "*"

7.4.2、cors

cors有两种请求：简单请求和非简单请求

只要同时满足以下两大条件,就属于简单的请求

（1) 请求方法是以下三种方法之一：

HEAD

GET

POST

（2）HTTP的头信息不超出以下几种字段：

Accept

Accept-Language

Content-Language

Last-Event-ID

Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

凡是不同时满足上面两个条件，就属于非简单请求。浏览器对这两种请求的处理，是不一样的。

简单请求:一次请求

非简单请求:两次请求，在发送数据之前会先发一次请求用于做“预检”，只有“预检”通过后才再发送一次请求用于数据传输。

- 请求方式：OPTIONS

- “预检”其实做检查，检查如果通过则允许传输数据，检查不通过则不再发送真正想要发送的消息

- 如何“预检”

     => 如果复杂请求是PUT等请求，则服务端需要设置允许某请求，否则“预检”不通过

        Access-Control-Request-Method

     => 如果复杂请求设置了请求头，则服务端需要设置允许某请求头，否则“预检”不通过

        Access-Control-Request-Headers

支持跨域,简单请求:

服务器设置响应头：Access-Control-Allow-Origin = '域名' 或 '*'

支持跨域复杂请求:

由于复杂请求时，首先会发送“预检”请求，如果“预检”成功，则发送真实数据。

“预检”请求时，允许请求方式则需服务器设置响应头：Access-Control-Request-Method

“预检”请求时，允许请求头则需服务器设置响应头：Access-Control-Request-Headers

cors在Django中的实现：

在返回结果中加入允许信息(简单请求):

from django.utils.deprecation import MiddlewareMixin

class MyCorsMiddle(MiddlewareMixin):

    def process_response(self, request, response):

        # 简单请求:

        # 允许http://127.0.0.1:8001域向我发请求

        # ret['Access-Control-Allow-Origin']='http://127.0.0.1:8001'

        # 允许所有人向我发请求

        response['Access-Control-Allow-Origin'] = '*'

        if request.method == 'OPTIONS':

            # 所有的头信息都允许

            response['Access-Control-Allow-Headers'] = '*'

        return response

在settings中配置即可,在中间件中的位置可以随意放置.

也可以通过第三方组件：pip install django-cors-headers

# (1)

pip install django-cors-headers

# (2)

 INSTALLED_APPS = (

 'corsheaders',

)

# (3)

 1 MIDDLEWARE = [

 2     'django.middleware.security.SecurityMiddleware',

 3     'django.contrib.sessions.middleware.SessionMiddleware',

 4     'django.middleware.csrf.CsrfViewMiddleware',

 5     'django.contrib.auth.middleware.AuthenticationMiddleware',

 6     'django.contrib.messages.middleware.MessageMiddleware',

 7     'django.middleware.clickjacking.XFrameOptionsMiddleware',

 8     'corsheaders.middleware.CorsMiddleware',  # 按顺序

 9     'django.middleware.common.CommonMiddleware',  # 按顺序

10 ]

  # 配置白名单

 1 CORS_ALLOW_CREDENTIALS = True#允许携带cookie

 2 CORS_ORIGIN_ALLOW_ALL = True

 3 CORS_ORIGIN_WHITELIST = ( '*')#跨域增加忽略

 4 CORS_ALLOW_METHODS = ( 'DELETE', 'GET', 'OPTIONS', 'PATCH', 'POST', 'PUT', 'VIEW', )

 5 #允许的请求头

 6 CORS_ALLOW_HEADERS = (

 7     'XMLHttpRequest',

 8     'X_FILENAME',

 9     'accept-encoding',

10     'authorization',

11     'content-type',

12     'dnt',

13     'origin',

14     'user-agent',

15     'x-csrftoken',

16     'x-requested-with',

17     'Pragma',

18 )

前端项目设置请求头记得添加到CORS_ALLOW_HEADERS

七、Ajax请求的更多相关文章

  1. {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)

    Django基础七之Ajax 本节目录 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解) 一 Ajax简介 ...

  2. 【React自制全家桶】七、React实现ajax请求以及本地数据mock

    一.下载axios插件 yarn add axios 二.React的ajax请求代码如何放置 建议放置在生命周期函数之componentDidMount()中 三.ajax之get请求 axios. ...

  3. {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)

    {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)   Django基础七之 ...

  4. Vue（七）发送Ajax请求

    发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue ...

  5. python爬虫之分析Ajax请求抓取抓取今日头条街拍美图（七）

    python爬虫之分析Ajax请求抓取抓取今日头条街拍美图 一.分析网站 1.进入浏览器,搜索今日头条,在搜索栏搜索街拍,然后选择图集这一栏. 2.按F12打开开发者工具,刷新网页,这时网页回弹到综合 ...

  6. Ajax请求内嵌套Ajax请求的方法

    前段时间做项目,需要把全国省市的两个XML文件整合成一个JSON格式的数据,手写的话觉得数据太多了,而且容易出错,于是就想到了用Ajax嵌套的方法来解决,就想平时用Ajax的方法直接嵌套,都会先读出外 ...

  7. 省市区联动，非ajax请求。

    需求 不允许用 ajax 请求的方式加载数据,所以把所有的省市区写在数组里,用js动态加载. 数据源 民政部门户网站:http://www.mca.gov.cn/article/sj/xzqh/201 ...

  8. 前台返回json数据的常用方式+常用的AJAX请求后台数据方式

    我个人开发常用的如下所示: 之所以像下面这样下,一是前台Ajax,二是为安卓提供接口数据 现在常用的是返回JSON数据,XML的时代一去不复返 JSON相对于XML要轻量级的多 对JSON不是十分熟悉 ...

  9. 使用ajax请求后返回数据显示undefinded解决办法

    今天在使用七牛的sdk做断点续传时候,当文件过大,本地没有存储时候,想要通过ajax将本地信息存到服务器缓存,之后通过读取缓存的方式来完成文件过大断点续传无法使用问题. 但是在使用ajax请求的时候, ...

随机推荐

  1. SiteSucker Pro for Mac 专业的网站下载工具

    SiteSucker Mac版是Mac os平台上的一款帮助用户下载数据的mac下载工具,SiteSucker绝对是一扒网站的利器,不仅仅是下载网站的HTML源文件,他连网站整体架构以及下面的所有文本 ...

  2. SpringMVC完整版详解

    1.回顾MVC 1.1什么是MVC MVC是模型(Model).视图(View).控制器(Controller)的简写,是一种软件设计规范. 是将业务逻辑.数据.显示分离的方法来组织代码. MVC主要 ...

  3. python使用pickle序列化对象读取输出二进制文件

    import pickle class tick: name = '牛牛牛' age = 10 samp = [1,2,3,'aaa',[12,3],tick()] with open('te.xxx ...

  4. Mac系统下Datagrip打不开、点击没反应？

    有没有可能是因为你从网上下载了一些破解软件导致的? 背景 Mac系统下JB公司家的IDEA. Datagrip.PyCharm 或 Goland 打不开点击没反应-- 分析 大概率是之前安装过 汉化插 ...

  5. HBase集群部署与基础命令

    HBase 集群部署 安装 hbase 之前需要先搭建好 hadoop 集群和 zookeeper 集群.hadoop 集群搭建可以参考:https://www.cnblogs.com/javammc ...

  6. KingbaseES 与Oracle 函数稳定性对于性能影响差异比较

    一.函数的属性 KingbaseES 函数在定义时有三种稳定性级别:volatile.stable 和 immutable.默认情况下,创建函数的稳定性为volatile.以下是这三种函数的区别: V ...

  7. The 19th Zhejiang Provincial Collegiate Programming Contest

    目录 A.JB Loves Math B.JB Loves Comma C. JB Wants to Earn Big Money G. Easy Glide I. Barbecue L. Candy ...

  8. Windows 2019通过网页修改域用户密码

    对于域用户来说,定期修改密码是必须的.对于没有Exchange的组织,而且经常出差在外的人员,能及时修改密码就变得很重要了. 在Windows 2003的时候有iisadmpwd可以修改.但是这个页面 ...

  9. std:move() 作用 和 移动语义后 右值行为，unique_ptr的"移动"操作问题

    unique_ptr 不能进行赋值操作,但是可以有返回unique_ptr的函数,由此产生的问题: 结论1:std:move() 只是将一个实参强行转换为右值引用. 我们知道对象初始化时有 构造函数, ...

  10. 使用yum方式安装的openresty参数

    nginx version: openresty/1.19.3.1 built by gcc 8.3.1 20190311 (Red Hat 8.3.1-3) (GCC) built with Ope ...