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. git fork同步是什么意思？

    这篇文章主要介绍了git fork同步是什么意思?fork到了哪里?有什么用?怎样用?跟clone有什么差别?本文就一一解释这些问题,须要的朋友能够參考下 官方文档:http://help.githu ...

  2. 微软ASP.NET网站部署指南（8）：部署Code-Only更新

    1.  综述 初始化部署以后,你须要继续维护和更新你的网站.本章节将向你展示一个不包含数据库改变的部署升级流程.(下一章节将展示数据库改变的部署升级流程.) 提醒:假设依据本章节所做的操作出现错误信息 ...

  3. python爬虫<urlopen error [Errno 10061] >

    在网上看了十几篇文章,都是说的是IE的代理设置,具体是: Tools->Internet Options->Connections->Lan Settings 将代理服务器的小勾勾去 ...

  4. Mac 安装Jupyter notebook

    python:mac下自带Python 2.7.10 1.先升级了pip安装工具:sudo python -m pip install --upgrade --force pip 2.安装setupt ...

  5. ASP.NET MVC 随想录

    http://www.cnblogs.com/OceanEyes/category/696137.html

  6. D3D HOOK实现透视讲解

    实现目的: 目前大部分游戏通过Direct3D实现3D效果,通过挂钩相应函数,可以实现3D透视,屏幕挂字效果.而透视,屏蔽特定效果,设置透明在很多游戏(特别是FPS)中发挥着巨大的作用! 实现思路: ...

  7. centos7 edit hostname

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

  8. ios 让两个tableView同时处于选中状态

    - (void)tableView:(UITableView *)tableView didHighlightRowAtIndexPath:(NSIndexPath *)indexPath { [_l ...

  9. Leetcode-Bianry Tree Maximum Path Sum

    Given a binary tree, find the maximum path sum. The path may start and end at any node in the tree. ...

  10. LeetCode 笔记系列16.3 Minimum Window Substring [从O(N*M)， O(NlogM)到O(N)，人生就是一场不停的战斗]

    题目:Given a string S and a string T, find the minimum window in S which will contain all the characte ...