七、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数据

  1. '''
  2. Supports the following objects and types by default:
  4.     +-------------------+---------------+
  5.     | Python            | JSON          |
  6.     +===================+===============+
  7.     | dict              | object        |
  8.     +-------------------+---------------+
  9.     | list, tuple       | array         |
  10.     +-------------------+---------------+
  11.     | str               | string        |
  12.     +-------------------+---------------+
  13.     | int, float        | number        |
  14.     +-------------------+---------------+
  15.     | True              | true          |
  16.     +-------------------+---------------+
  17.     | False             | false         |
  18.     +-------------------+---------------+
  19.     | None              | null          |
  20.     +-------------------+---------------+
  22. '''

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

  1. import json
  3. dic = {"name": "summer"}
  4. dic_json = json.dumps(dic)
  5. dic = json.dumps(dic_json)

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

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

  1. # 序列化响应类
  2. from django.http import JsonResponse
  3. JsonResponse({})
  4. # 序列化queryset
  5. from django.core import serializers
  6. ret = models.Book.objects.all()
  7. data = serializers.serialize("json", ret)

(1) 视图

  1. # Create your views here.
  2. def reg(request):
  3.     return render(request, "reg.html")
  5. def reg_user(request):
  6.     data = {"msg": "", "state": "success"}
  7.     user = request.POST.get("user")
  8.     if user == "summer":
  9.         data["state"] = "error"
  10.         data["msg"] = "该用户已存在！"
  12.     return JsonResponse(data)

(2) 模板：reg.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  9. <p>用户名：<input type="text"><span class="error" style="color: red"></span></p>
  11. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  12. <script>
  14.     $(":text").blur(function () {
  15.         // 发送Ajax请求
  16.         $.ajax({
  17.             url: "http://127.0.0.1:8008/reg_user/",
  18.             type: "post",
  19.             data: {
  20.                 user: $(":text").val(),
  21.             },
  22.             success: function (response) {
  23.                 console.log(response);
  24.                 $(".error").html(response.msg);
  25.             }
  26.         })
  27.     })
  29. </script>
  31. </body>
  32. </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接口，就可以跨源通信。

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

  1. response = JsonResponse(data)
  2. response["Access-Control-Allow-Origin"] = "*"

7.4.2、cors

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

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

  1. （1) 请求方法是以下三种方法之一：
  2. HEAD
  3. GET
  4. POST
  5. （2）HTTP的头信息不超出以下几种字段：
  6. Accept
  7. Accept-Language
  8. Content-Language
  9. Last-Event-ID
  10. Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

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

简单请求:一次请求

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

  1. - 请求方式：OPTIONS
  2. - “预检”其实做检查，检查如果通过则允许传输数据，检查不通过则不再发送真正想要发送的消息
  3. - 如何“预检”
  4.      => 如果复杂请求是PUT等请求，则服务端需要设置允许某请求，否则“预检”不通过
  5.         Access-Control-Request-Method
  6.      => 如果复杂请求设置了请求头，则服务端需要设置允许某请求头，否则“预检”不通过
  7.         Access-Control-Request-Headers

支持跨域,简单请求:

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

支持跨域复杂请求:

  1. 由于复杂请求时，首先会发送“预检”请求，如果“预检”成功，则发送真实数据。
  2. “预检”请求时，允许请求方式则需服务器设置响应头：Access-Control-Request-Method
  3. “预检”请求时，允许请求头则需服务器设置响应头：Access-Control-Request-Headers

cors在Django中的实现：

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

  1. from django.utils.deprecation import MiddlewareMixin
  2. class MyCorsMiddle(MiddlewareMixin):
  3.     def process_response(self, request, response):
  4.         # 简单请求:
  5.         # 允许http://127.0.0.1:8001域向我发请求
  6.         # ret['Access-Control-Allow-Origin']='http://127.0.0.1:8001'
  7.         # 允许所有人向我发请求
  8.         response['Access-Control-Allow-Origin'] = '*'
  9.         if request.method == 'OPTIONS':
  10.             # 所有的头信息都允许
  11.             response['Access-Control-Allow-Headers'] = '*'
  12.         return response

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

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

  1. # (1)
  2. pip install django-cors-headers
  4. # (2)
  5.  INSTALLED_APPS = (
  6.  'corsheaders',
  7. )
  9. # (3)
  10.  1 MIDDLEWARE = [
  11.  2     'django.middleware.security.SecurityMiddleware',
  12.  3     'django.contrib.sessions.middleware.SessionMiddleware',
  13.  4     'django.middleware.csrf.CsrfViewMiddleware',
  14.  5     'django.contrib.auth.middleware.AuthenticationMiddleware',
  15.  6     'django.contrib.messages.middleware.MessageMiddleware',
  16.  7     'django.middleware.clickjacking.XFrameOptionsMiddleware',
  17.  8     'corsheaders.middleware.CorsMiddleware',  # 按顺序
  18.  9     'django.middleware.common.CommonMiddleware',  # 按顺序
  19. 10 ]
  21.   # 配置白名单
  22.  1 CORS_ALLOW_CREDENTIALS = True#允许携带cookie
  23.  2 CORS_ORIGIN_ALLOW_ALL = True
  24.  3 CORS_ORIGIN_WHITELIST = ( '*')#跨域增加忽略
  25.  4 CORS_ALLOW_METHODS = ( 'DELETE', 'GET', 'OPTIONS', 'PATCH', 'POST', 'PUT', 'VIEW', )
  26.  5 #允许的请求头
  27.  6 CORS_ALLOW_HEADERS = (
  28.  7     'XMLHttpRequest',
  29.  8     'X_FILENAME',
  30.  9     'accept-encoding',
  31. 10     'authorization',
  32. 11     'content-type',
  33. 12     'dnt',
  34. 13     'origin',
  35. 14     'user-agent',
  36. 15     'x-csrftoken',
  37. 16     'x-requested-with',
  38. 17     'Pragma',
  39. 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. Dart 导包时类名冲突

    import 'package:qingyuo_mobile/pages/slices/home_page/tech_slice.dart'; import 'package:qingyuo_mobi ...

  2. 小技巧---eclipse 全选lib jar包

    按住shift键,点击第一个jar包,然后点击最后一个jar包,就全选了所有jar包,然后添加build path 添加到类路径

  3. [HNOI2016]最小公倍数 （可回退并查集，回滚莫队）

    题面 题目链接 题目描述 给定一张 N N N 个顶点 M M M 条边的无向图(顶点编号为 1 , 2 , - , n 1,2,\ldots,n 1,2,-,n),每条边上带有权值.所有权值都可以分 ...

  4. [CF1386C] Joker （IOI 赛制，分治，整体二分+可回退并查集）

    题面 给一个 N N N 点 M M M 边的简单无向图,询问 Q Q Q 次,每次问你把编号在 [ l i , r i ] [l_i,r_i] [li​,ri​] 之间的边删掉后,该图是否存在奇数环 ...

  5. 3-14 Python处理XML文件

    xml文件处理 什么是xml文件? xml即可扩展标记语言,它可以用来标记数据.定义数据类型,是一种允许用户对自己的标记语言进行定义的源语言. 从结构上,很像HTML超文本标记语言.但他们被设计的目的 ...

  6. 【JavaWeb】学习路径1-背景

    JavaWeb系列也是一个非常庞大的系列,主要分为五个部分讲解: HTML JSP和Servlet CSS的讲解 JavaScrip的讲解 jQuery框架的讲解 学习完上述内容后,就能够基本了解一个 ...

  7. JDBC连接池&JDBCTemplate

    今日内容 1. 数据库连接池 2. Spring JDBC : JDBC Template 数据库连接池 1. 概念:其实就是一个容器(集合),存放数据库连接的容器. 当系统初始化好后,容器被创建,容 ...

  8. linux中awk命令详解(最全面秒懂）

    一:linux中awk命令 1.awk命令简介 AWK 是一种处理文本文件的语言,是一个强大的文本分析工具. 之所以叫 AWK 是因为其取了三位创始人 Alfred Aho,Peter Weinber ...

  9. ESP8266 RTOS SDK开发

    ESP8266 RTOS SDK开发 目录 ESP8266 RTOS SDK开发 一.源码RTOS SDK包的下载和编译 二.固件烧录 1.管脚定义 三.程序例程 ## 1.PWM设置 连接MQTT ...

  10. Java 热更新 Groovy 实践及踩坑指南

    Groovy 是什么? Apache的Groovy是Java平台上设计的面向对象编程语言.这门动态语言拥有类似Python.Ruby和Smalltalk中的一些特性,可以作为Java平台的脚本语言使用 ...