ajax（Asynchronous Javascript And XML）翻译成中文就是异步的javascript和XML,即用javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）

ajax不是新的变成语言，而是一种使用现有标准的方法

ajax最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页的内容（这一特点给用户的感受是在不知不觉中完成请求和响应的过程）

ajax不需要任何浏览器插件，但需要用户允许javascript在浏览器上执行

同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求

异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求

ajax常见应用情景

搜索引擎根据用户输入的关键字，自动提示检索关键字

注册时候用户名查重

当文本框发生了输入变化时，使用ajax技术向服务器发送一个请求，然后服务器会把查询到的结果响应给浏览器，最后再把后端返回的结果显示出来

整个过程页面没有刷新，只是刷新页面中的局部位置而已

当请求发出后，浏览器还可以进行其他操作，无需等待服务器响应

下面是用jquery实现的ajax的demo

ajax_demo1.html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="x-ua-compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>AJAX局部刷新实例</title>

</head>

<body>

<input type="text" id="i1">+

<input type="text" id="i2">=

<input type="text" id="i3">

<input type="button" value="AJAX提交" id="b1">

<script

  src="https://code.jquery.com/jquery-3.3.1.js"

  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="

  crossorigin="anonymous"></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);

      }

    })

  })

</script>

</body>

</html>

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)

views.py

urls.py

urlpatterns = [

    ...

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

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

    ...

]

ajax示例的更多相关文章

  1. JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  2. JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  3. JavaScript学习总结(二)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  4. Comet ASP.NET AJAX 示例

    最近公司有个项目,里面要求要用到Comet技术,所以就到网上找了一下相关的资料和文章,发现有些人说用Ajax的长轮询比较好,后来就百度了一下,发现comet貌似就是通过ajax演变而来的,也就是com ...

  5. jQuery的$.ajax示例

    $.ajax({ url: 'index.php?module=products&submod=product_experience_manage&method=ajaxGetSele ...

  6. Ajax得知（两）—— 一个简单的Ajax示例

    通过部分博客认识Ajax之后,我们通过一个简单的实例来消化消化理论知识,一睹Ajax的庐山真面目. 1.实例功能: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZ ...

  7. 小程序 wx.request ajax示例

    简单示例 https://developers.weixin.qq.com/miniprogram/dev/api/network-request.html wx.request({ method: ...

  8. 一个简单的AJAX示例(转)

    转载自:http://www.cnblogs.com/rubylouvre/archive/2013/01/08/2851051.html,为了防备面试,备份一份吧!! 虽然现在有了框架,许多AJAX ...

  9. 使用Javascript实现ajax示例

    使用原始的javascript实现ajax <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"& ...

随机推荐

  1. 【Debian】ftp安装

    http://www.2cto.com/os/201107/98311.html http://jingyan.baidu.com/article/adc815133476bdf723bf7393.h ...

  2. linux通过shell脚本修改文件内容

    sed -i 's/abc/xxx/g' file abc修改前的字符串xxx是修改后的字符串file是要被修改的文件

  3. python3----datetime模块分析

    datetime模块用于是date和time模块的合集,datetime有两个常量,MAXYEAR和MINYEAR,分别是9999和1. datetime模块定义了5个类,分别是 1.datetime ...

  4. HDU4081 Qin Shi Huang&#39;s National Road System【prim最小生成树+枚举】

    先求出最小生成树,然后枚举树上的边,对于每条边"分别"找出这条割边形成的两个块中点权最大的两个 1.因为结果是A/B.A的变化会引起B的变化,两个制约.无法直接贪心出最大的A/B. ...

  5. 第十二章：Linux中权限控制实例

    前言 前文对 Linux 中的权限进行了较为透彻的分析.而本文,则在前文的基础上,具体说明如何在代码中进行权限控制. 下面的代码涉及到以下几个方面: 1. 创建文件时设置文件权限 2. 修改文件的默认 ...

  6. JSP内置对象——response

    response对象response对象包含了响应客户端的有关信息,但在JSP中很少使用它.它是HttpServletResponse类的实例.response对象具有页面作用域,即访问一个页面时,该 ...

  7. SQL ALTER TABLE 命令

    SQL ALTER TABLE 命令 SQL ALTER TABLE 命令用于添加.删除或者更改现有数据表中的列. 你还可以用 ALTER TABLE 命令来添加或者删除现有数据表上的约束. 语法: ...

  8. Python--Get and Post

    #python3 get and post 简单封装 from urllib import request, parse import json def RequestMethod(methodR, ...

  9. h5+的Downloader下载网络图片缓存到本地的案例

    之前展示图片都是通过<img src="网络图片地址"> , 每次都请求服务器, 加载比较慢;如何做到显示图片的时候先从本地获取,没有则联网下载,缓存到本地;下次直接从 ...

  10. file结构中的private_data

    private_data是Linux下连接VFS文件系统框架和不同文件/文件系统底层实现之间的一个核心数据结构,虽然它只是一个指针,但是一个指针可以解决所有问题. 因 为file是VFS框架的一个基本 ...