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. php -- 反射ReflectionClass

    反射类:ReflectionClass 反射就是将其他类的结构给反应出来,从而可以对类的结构进行了解便于对类的使用. ReflectionClass::export(类名); 返回结果为三个数组:常量 ...

  2. php如何优化压缩的图片

    php程序开发中经常涉及到生成缩略图,利用php生成缩略图这个过程本身没难度,但是你知道php能够优化调节生成的缩略图的质量吗?也就是说php能够控制生成缩略图的清晰度以及生成后的缩略图的体积.下面我 ...

  3. a标签点击后，给a标签添加样式

    window.onload=function(){ var a = document.getElementById("cate").getElementsByTagName(&qu ...

  4. THINKPHP5获取设置缓存的例子

    在THINKPHP5中 缓存的配置放在了config.php文件中 代码如下 如何设置缓存? 可以使用静态方法 Cache::set('key',$value,3600);//存储缓存 Cache:: ...

  5. onSaveInstanceState

    我们已经分析过Activity的启动流程,从中也分析了Activity的生命周期.而其中有一个生命周期方法:onSaveInstanceState方法,今天我们主要讲解一下onSaveInstance ...

  6. ios学习--结合UIImageView实现图片的移动和缩放

    因为种种原因,需要在iphone应用中实现图片查看功能,由于iphone屏幕支持多点触摸,于是是想到用“手势”来实现图片的实时缩放和移动.借鉴无所不在的internet网络资料之后,终于实现此一功能, ...

  7. centos7 edit hostname

    1.临时修改主机名 hostname 主机名 重新连接shell,就可以,这种方式,只能修改临时的主机名,当重启机器后,主机名称又变回来了. 2.永久修改主机名 hostnamectl set-hos ...

  8. git+sourcetree创建仓库

    1.git上创建版本库 2.安装sourcetree 3.创建空目录 我本地空目录为D:/shenghuojia 4.打开sourcetree,点击clone/new ,选择clone reposit ...

  9. vim学习选取多行（转）

    在可视化模式下,可以对一个文本块的整体进行操作.例如,首先高亮选中一部分文本,然后用d命令删除这个文本块.可视化模式的好处在于,你可以在做改动之前,就看到操作将影响的文本.可视化模式可以分为以下三种: ...

  10. How TCP clients and servers communicate using the TCP sockets interface

    wTCP客户端和服务器是如何通过TCP套接字接口进行通讯的.服务器距离.负载,网络拥堵. HTTP The Definitive Guide We begin with the web server ...