一、 基本内容

  1. 定义:AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步的Javascript和XML”,即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML)

  2. 作用:AJAX就是使用 js 技术发送请求和接收响应

  3. 优点:在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容

  4. 特点:

    • 异步交互

      • 同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求
      • 异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求
    • 局部刷新,无须刷新整个页面
    • 传输的数据量少,性能高
  5. 应用场景:

    • 搜索引擎根据用户输入的关键字,自动提示检索关键字
    • 注册时候的用户名的查重
  6. 普通示例:页面输入两个整数,通过AJAX传输到后端计算出结果并返回

    # urls.py
    urlpatterns = [
    url(r'^ajax_add/', views.ajax_add),
    url(r'^ajax_demo1/', views.ajax_demo1),
    ]
    # views.py
    def ajax_demo1(request):
    return render(request, "ajax_demo1.html") def ajax_add(request):
    i1 = int(request.GET.get("i1"))
    i2 = int(request.GET.get("i2"))
    ret = i1 + i2
    return JsonResponse(ret, safe=False)
    {# ajax_demo1.html #}
    <input type="text" id="i1">+
    <input type="text" id="i2">=
    <input type="text" id="i3">
    <input type="button" value="AJAX提交" id="b1"> <script src="/static/jquery-3.2.1.min.js"></script>
    <script>
    $("#b1").on("click", function () {
    $.ajax({
    url:"/ajax_add/",
    type:"GET",
    data:{"i1":$("#i1").val(),"i2":$("#i2").val()},
    success:function (data) {
    $("#i3").val(data);
    },
    error:function (error) {
    console.log(error)
    },
    })
    })
    </script>

二、 jQuery实现的AJAX

  • 最基本的jQuery发送AJAX请求示例

    # views.py
    def ajax_test(request):
    user_name = request.POST.get("username")
    password = request.POST.get("password")
    print(user_name, password)
    return HttpResponse("OK")
    <button id="ajaxTest">AJAX 测试</button>
    <script>
    $("#ajaxTest").click(function () {
    $.ajax({
    url: "/ajax_test/",
    type: "POST",
    data: {username: "Q1mi", password: 123456},
    success: function (data) {
    alert(data)
    }
    })
    })
    </script>
  • $.ajax参数

    • data参数中的键值对,如果值不为字符串,需要将其转换成字符串类型

三、 AJAX通过csrf的校验

  1. 前提条件:确保有csrftoken的cookie

    • 在页面中使用{% csrf_token %}
    • 加装饰器:ensure_csrf_cookie
    • 注意:
      • 如果使用从cookie中取csrftoken的方式,需要确保cookie存在csrftoken值
      • 如果你的视图渲染的HTML文件中没有包含 {% csrf_token %},Django可能不会设置CSRFtoken的cookie。
      • 这个时候需要使用ensure_csrf_cookie()装饰器强制设置Cookie
  2. AJAX请求如何设置csrf_token

    • 通过获取隐藏的input标签中的csrfmiddlewaretoken值,放置在data中发送
    $.ajax({
    url: "/cookie_ajax/",
    type: "POST",
    data: {
    "username": "Q1mi",
    "password": 123456,
    {# 使用jQuery取出csrfmiddlewaretoken的值,拼接到data中 #}
    "csrfmiddlewaretoken": $("[name = 'csrfmiddlewaretoken']").val()
    },
    success: function (data) {
    console.log(data);
    }
    })
    • 通过获取返回的cookie中的字符串,放置在请求头中发送

      • 注意:需要引入一个jquery.cookie.js插件
    $.ajax({
    url: "/cookie_ajax/",
    type: "POST",
    {# 从Cookie取csrftoken,并设置到请求头中 #}
    headers: {"X-CSRFToken": $("[name = 'csrfmiddlewaretoken']").val()},
    data: {"username": "Q1mi", "password": 123456},
    success: function (data) {
    console.log(data);
    }
    })
    • 使用文件:自己写一个getCookie方法

      • 粘贴在 static 下的 js 中的 一个js文件 ,比如:ajax_setup.js
    function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== '') {
    var cookies = document.cookie.split(';');
    for (var i = 0; i < cookies.length; i++) {
    var cookie = jQuery.trim(cookies[i]);
    if (cookie.substring(0, name.length + 1) === (name + '=')) {
    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
    break;
    }
    }
    }
    return cookieValue;
    }
    // 通过js获取csrftoken的值
    var csrftoken = getCookie('csrftoken'); // 使用$.ajaxSetup()方法为ajax请求统一设置
    function csrfSafeMethod(method) {
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    } $.ajaxSetup({
    beforeSend: function (xhr, settings) {
    // 不是 GET|HEAD|OPTIONS|TRACE 这些请求的话,就执行if后的操作
    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
    xhr.setRequestHeader("X-CSRFToken", csrftoken); // 设置请求头,本质同方法2
    }
    }
    });

AJAX小示例的更多相关文章

  1. 如何构建 MVC&AJax&JSon示例

    背景: 博客中将构建一个小示例,用于演示在ASP.NET MVC4项目中,如何使用JQuery Ajax. 直接查看JSon部分 步骤: 1,添加控制器(HomeController)和动作方法(In ...

  2. 如何构建ASP.NET MVC4&JQuery&AJax&JSon示例

    背景: 博客中将构建一个小示例,用于演示在ASP.NET MVC4项目中,如何使用JQuery Ajax. 步骤: 1,添加控制器(HomeController)和动作方法(Index),并为Inde ...

  3. ReactNative新手学习之路06滚动更新ListView数据的小示例

    本节带领大家学习使用ListView 做一个常用的滚动更新数据示例: 知识点: initialListSize={200} 第一次加载多少数据行 onEndReached={this.onEndRea ...

  4. MVC客户端验证的小示例

    MVC客户端验证的小示例 配置客户端验证的可用性: <configuration> <appSettings>  <add key="ClientValidat ...

  5. jquery Ajax请求示例,jquery Ajax基本请求方法示例

    jquery Ajax请求示例,jquery Ajax基本请求方法示例 ================================ ©Copyright 蕃薯耀 2018年5月7日 https: ...

  6. python 全栈开发,Day87(ajax登录示例,CSRF跨站请求伪造,Django的中间件,自定义分页)

    一.ajax登录示例 新建项目login_ajax 修改urls.py,增加路径 from app01 import views urlpatterns = [ path('admin/', admi ...

  7. 第一个ajax小demo

    第一个ajax小demo 文章来源:http://blog.csdn.net/magi1201/article/details/44569657

  8. 【.Net】Socket小示例

    引言 项目中用到了Socket,这里做个控制台小示例记录一下. Client 客户端的Receive用了异步方法,保持长连接,可以随时发送消息和响应服务端的消息,如下 static string Cl ...

  9. CentOS7 安装 RocketMQ 实践和小示例

    CentOS7 安装 RocketMQ 实践和小示例 1.通过 SSH 工具(比如 XShell)连接到 CentOS7 服务器上: 2.进入到 /usr/local 目录中: cd /usr/loc ...

随机推荐

  1. 区块链社交APP协议分析:Qbao

    - Qbao是什么 - Qbao报文情况 本节我们开始使用Qbao软件,并抓取其报文进行分析. 对APP进行协议分析抓包的一般过程是: 1.打开抓包APP进行抓包: 2.打开APP开始使用: 3.对每 ...

  2. 关于UIScollView中的contentOffset的理解

    大家对UIScollView 中的contentOffset 一直有疑问. 当时我也有好多疑问,后来在网上找了一下资料,发现没有找到合理的解释,因此自己就查看了一下官方文档,自己好好的研究了一番. 现 ...

  3. Android多module下重复jar包问题

    版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/166 Android多module下重复jar包问题 An ...

  4. Angular 学习笔记(四)

    作用域和控制器的交互情况: 1.控制器通过作用域对模板暴露一些方法供其调用 2.控制器中定义的一些方法可改变注册在作用域下的数据模型 3.控制器在某些场合可能需设置监听器来监听作用域中的数据模型:这些 ...

  5. MySQL 部署分布式架构 MyCAT (三)

    配置垂直分表 修改 schema.xml (db1) cd /data/mycat/conf cp schema.xml schema.xml.rwh # 修改配置 vi schema.xml < ...

  6. 记录一下自己在MVC项目中如何防CSRF攻击,直接上代码

    1.前端的处理: 2.后台 1.)添加过滤器,哪里用放哪里 2.)需要验证的方法上直接添加过滤器即可 大功告成 以下为过滤器代码块 /// <summary>/// ajax中加上Anti ...

  7. 初学JavaScript正则表达式(十)

    前瞻与后顾 断言 === assert 符合断言为正向,不符合为负向 例 'a2*3'.replace(/\w(?=\d)/g,'x') ------- x2*3 看看'\d'前面是不是'\w',如果 ...

  8. luoguP3431 [POI2005]AUT-The Bus

    安利系列博文 https://www.cnblogs.com/tyner/p/11565348.html https://www.cnblogs.com/tyner/p/11605073.html 做 ...

  9. 2019 SDN上机第三次作业

    2019 SDN上机第三次作业 实验一 利用Mininet仿真平台构建如下图所示的网络拓扑,配置主机h1和h2的IP地址(h1:10.0.0.1,h2:10.0.0.2),测试两台主机之间的网络连通性 ...

  10. 正睿暑期培训day1考试

    链接 A 理解一下题意,然后玩几组样例就能发现,实际上就是\(k\)个\(i\)等价于\(1\)个\(i-1\).所以就类似于\(k\)进制进行进位,如果最后\(0\)位上不是\(0\),那么就存在划 ...