Ajax

ajax简介

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

AJAX 不是新的编程语言,而是一种使用现有标准的新方法。

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

AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。

  • 同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求;
  • 异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求。

ajax常见应用情景

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

还有一个很重要的应用场景就是注册时候的用户名的查重。

其实这里就使用了 AJAX 技术!当文件框发生了输入变化时,使用 AJAX 技术向服务器发送一个请求,然后服务器会把查询到的结果响应给浏览器,最后再把后端返回的结果展示出来。

  • 整个过程中页面没有刷新,只是刷新页面中的局部位置而已
  • 当请求发出后,浏览器还可以进行其他操作,无需等待服务器的响应

分享图片

当输入用户名后,把光标移动到其他表单项上时,浏览器会使用 AJAX 技术向服务器发出请求,服务器会查询名为 lemontree7777777 的用户是否存在,最终服务器返回 true 表示名为 lemontree7777777 的用户已经存在了,浏览器在得到结果后显示 “用户名已被注册!”。

  • 整个过程中页面没有刷新,只是局部刷新了
  • 在请求发出后,浏览器不用等待服务器响应结果就可以进行其他操作

优点

  • AJAX使用 Javascript 技术向服务器发送异步请求
  • AJAX 无须刷新整个页面

示例

页面输入两个整数,通过AJAX传输到后端计算出结果并返回。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="/static/jquery-3.2.1.min.js"></script>
    <title>Ajax局部刷新示例</title>
</head>
<body>

<input type="text" id="num1">+
<input type="text" id="num2">=
<input type="text" id="sum">
<button id="submit">计算</button>

<script>
    $("#submit").click(function () {
        $.ajax({
            url: '/test_ajax/',type: 'post',data: {
                n1: $("#num1").val(),n2: $("#num2").val()
            },success: function (data) {
                console.log(data)
                $("#sum").val(data)
            },})
    })
</script>
</body>
</html>
def test_ajax(requests):
    n1=int(requests.POST.get('n1'))
    n2=int(requests.POST.get('n2'))
    return HttpResponse(n1+n2)

ajax实现登录

def login(request):
    dic = {
        'status': 100,'msg': None
    }
    if request.method == 'GET':
        return render(request,'login.html')
    if request.method == 'POST':
        # ajax的data里面的name和pwd
        username = request.POST.get('name')
        password = request.POST.get('pwd')
        if username == 'xi' and password == '123':
            dic['msg'] = '登录成功'
            # 让前端跳转
            dic['url'] = 'http://www.baidu.com/'
        else:
            # return HttpResponse('用户名或密码错误')
            # 返回json格式
            dic['status'] = 101
            dic['msg'] = '用户名或密码错误'
        return JsonResponse(dic)
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="/static/jquery-3.3.1.js"></script>
    <title>Title</title>
</head>
<body>
    <p>用户名:<input type="text" id="username"></p>
    <p>密码:<input type="password" id="password"></p>
    <input type="button" value="登录" id="login">
    <span id="error"></span>
</body>

<script>
    $('#login').click(function () {
        $.ajax({
            url: '/login/',data: {
                // 这里的name和pwd是后台需要取的数据
                name: $('#username').val(),pwd: $('#password').val(),},success: function (data) {
                // 后台用JsonResponse返回数据
                // data就会被自动转成对象(python字典对应的json格式)
                // 这里的默认编码方式为urlencoded,会自动转码成 name=xi&pwd=123
                console.log(data);

                // 后台用HttpResponse,拿到的data就是json格式的字符串,需要手动转成json格式对象
                var data1 = JSON.parse(data)
                console.log(typeof data1)

                if (data1.status == 100) {
                    // 成功,跳转到指定页面(location.href等于一个地址,前端就会跳转到指定的url)
                    location.href = data1.url
                } else {
                    $("#error").text(data1.msg)
                }
            }
        })
    })
</script>
</html>

往后台提交 json 格式数据

from django.shortcuts import render,HttpResponse
from django.http import JsonResponse
import json


# Create your views here.

def login(request):
    dic = {
        'status': 100,'login.html')
    if request.method == 'POST':
        # ajax的data里面的name和pwd
        username = request.POST.get('name')
        password = request.POST.get('pwd')
        if username == 'xi' and password == '123':
            dic['msg'] = '登录成功'
            # 让前端跳转
            dic['url'] = 'http://www.baidu.com/'
        else:
            # return HttpResponse('用户名或密码错误')
            # 返回json格式
            dic['status'] = 101
            dic['msg'] = '用户名或密码错误'
        return JsonResponse(dic)


def login_json(request):
    dic = {
        'status': 100,'msg': None
    }
    if request.method == 'POST':
        print(request.POST)
        print(request.GET)
        print(request.body)
        ret = json.loads(str(request.body,encoding='utf-8'))
        username = ret.get('name')
        password = ret.get('pwd')
        print(username,password)
        return HttpResponse('OK')
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="/static/jquery-3.3.1.js"></script>
    <title>Title</title>
</head>
<body>
    <p>用户名:<input type="text" id="username"></p>
    <p>密码:<input type="password" id="password"></p>
    <input type="button" value="登录" id="login">
    <input type="button" value="提交json格式数据" id="sub">
    <span id="error"></span>
</body>

<script>
    $('#login').click(function () {
        $.ajax({
            url: '/login/',前端就会跳转到指定的url)
                    location.href = data1.url
                } else {
                    $("#error").text(data1.msg)
                }
            }
        })
    })

    $('#sub').click(function () {
        post_data = {
            name: $('#username').val(),$.ajax({
            url: '/login_json/',// 指定提交的编码格式是json格式,就不会自动转码,就会原封不动的传到后台
            contentType: 'application/json',// 传json格式字符串,同时还需要手动指定编码方式
            data: JSON.stringify(post_data),success: function (data) {
                console.log(data)
            }
        })
    })
</script>
</html>

写一个装饰器,既能处理 urlencoded 格式,又能处理 json 格式

from django.shortcuts import render,HttpResponse
import json

# Create your views here.


def outer(func):
    def inner(request,*args,**kwargs):
        # 为了防止错误,主要是处理urlencoded这种编码,让它不处理
        try:
            request.POST = json.loads(request.body)
        except Exception as e:
            print(e)
        ret = func(request,**kwargs)
        return ret
    return inner


@outer
def login(request):
    if request.method == 'GET':
        return render(request,'login.html')
    if request.is_ajax():
        print(request.body)
        print(request.POST)
        # request.body是二进制,loads可以直接传
        # request_dic = json.loads(request.body)
        # request.POST = request_dic
        name = request.POST.get('name')
        pwd = request.POST.get('pwd')
        print(name,pwd)
        return HttpResponse('OK')
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="/static/jquery-3.3.1.js"></script>
    <title>Title</title>
</head>
<body>
    <p>用户名:<input type="text" id="name"></p>
    <p>密码:<input type="password" id="pwd"></p>
    <button id="btn">提交</button>
</body>
<script>
    $("#btn").click(function () {
        $.ajax({
            url: '/login/',contentType: 'application/json',// 把json对象转成字符串
            data: JSON.stringify({
                name: $("#name").val(),pwd: $("#pwd").val(),}),success: function (data) {
                console.log(data)
            },})
    })
</script>
</html>

文件上传

基于form表单上传

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="/static/jquery-3.3.1.js"></script>
    <title>Title</title>
</head>
<body>
    <h2>基于form表单上传</h2>
    <form action="/file_upload/" method="post" enctype="multipart/form-data">
        <p>名字:<input type="text" name="name"></p>
        <p>文件:<input type="file" name="myfile"></p>
        <p><input type="submit" value="上传"></p>
    </form>
</body>
</html>
from django.shortcuts import HttpResponse

def file_upload(request):
    print(request.POST.get('name'))
    # 文件对象
    myfile = request.FILES.get('myfile')
    with open(myfile.name,'wb') as f:
        for line in myfile:
            f.write(line)

    return HttpResponse('上传成功')

基于ajax上传

基于ajax上传,要先取到文件

分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="/static/jquery-3.3.1.js"></script>
    <title>Title</title>
</head>
<body>
    <h2>基于AJAX上传</h2>
    <p>名字:<input type="text" id="id_name"></p>
    <p>文件:<input type="file" id="id_myfile"></p>
    <button id="btn_file">ajax上传</button>
</body>
<script>
    $("#btn_file").click(function () {
        // 取到文件
        var myfile = $("#id_myfile")[0].files[0];
        var formdata = new FormData();
        // 放值
        formdata.append('name',$("#id_name").val());
        // 放文件
        formdata.append('myfile',myfile);
        $.ajax({
            url: '/file_upload/',processData: false,// 不预处理数据,FormData已处理好
            contentType: false,// 不指定编码,FormData已指定好
            data: formdata,})
    })
</script>
</html>
from django.shortcuts import HttpResponse

def file_upload(request):
    print(request.POST.get('name'))
    # 文件对象
    myfile = request.FILES.get('myfile')
    with open(myfile.name,'wb') as f:
        for line in myfile:
            f.write(line)

    return HttpResponse('上传成功')

序列化

把对象序列化成 json 字符串

from django.core import serializers

def test(request):
    book_list = models.Book.objects.all()[0:10]
    ret = serializers.serialize("json",book_list)
    return HttpResponse(ret)

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


$.AJAX()方法中的PROCESSDATA参数 在使用jQuery的$.ajax()方法的时候参数processData默认为true(该方法为jQuery独有的) 默认情况下会将发送的数据序列化以适应默认的内容类型application/x-www-form-urlencoded 如果想发送不
form表单提交的几种方式 表单提交方式一:直接利用form表单提交 html页面代码: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot; /&gt; &lt;title&gt;Ins
文章浏览阅读1.3k次。AJAX的无刷新机制使得在注册系统中对于注册名称的检测能即时显示。常见的用户注册是用户输入用户名,后台程序检测数据库中用户名是否重复而做出注册的成功与失败之提示(当用户注册重名时将返回重新注册),或者稍微人性化一点就是在用户名文本框后添加一个检测按钮,让用户检测后再做注册。以上操作,对于用户体验方面来说是比较“差劲”的,一个很好的用户体验就是:当用户输入完注册用户名后,Web系统应能即时检查并即时_用户注册 实时异步检测
文章浏览阅读1.2k次。 本文将解释如何使用AJAX和JSON分析器在客户端和服务器之间创建复杂的JSON数据传输层。一、 引言毫无疑问,AJAX已经成为当今Web开发中一种强有力的用户交互技术,但是它的许多可能性应用仍然鲜为人知。在本文中,我们将来共同探讨如何 使用JavaScript对象标志(JSON)和JSON分析器在服务器和客户端AJAX引擎之间创建复杂而强有力的JSON数据传输层。我们将_ajax技术可行性
文章浏览阅读2.2k次。/************************** 创建XMLHttpRequest对象 **************************/function CreateRequest(){ var xmlObj = null; try { xmlObj = new XMLHttpRequest(); } catch(e) {
文章浏览阅读3.7k次。在ajax应用中,通常一个页面要同时发送多个请求,如果只有一个XMLHttpRequest对象,前面的请求还未完成,后面的就会把前面的覆盖 掉,如果每次都创建一个新的XMLHttpRequest对象,也会造成浪费。解决的办法就是创建一个XMLHttpRequset的对象池,如果池里有 空闲的对象,则使用此对象,否则将创建一个新的对象。下面是我最近写的一个简单的类:* XMLHttpReques_xmlhttprequest发送多个请求
文章浏览阅读3.1k次。Ajax 同一页面如何同时执行多个 XMLHTTP 呢,比如博客页,需要同时利用 Ajax 读取作者信息、文章信息、评论信息……我们的第一反应可能是创建多个全局 XMLHTTP 对象,但这并不现实。其实实现方式非常简单,就是给 onreadystatechange 对应的回调函数加上参数,以下代码是解决方案中一个函数中的一段代码。xmlhttp.open("GET", "ajax_proc_ajax响应多个mxl文件
文章浏览阅读1.5k次。数据岛指的是存在Html网页中的xml代码段,它在Html中形成了一个数据的集合,数据岛允许我们在Html网页中集成xml,对xml编写脚本.数据岛有它特有的形式,由标记xml开始,在开始标记中要有一个ID属性,用于指定该指定数据岛的名称。 (当然要以/xml结束).元素xml包含的内容就是xml代码。数据岛也分为2种:1)内嵌的数据岛形式2)外嵌的数据岛形式说了那么多废话,还_数据中岛计算模式
文章浏览阅读2.1k次。AJAX 流行之后,总想好好学习一下。但是众多的框架实在难以选择。说明一下 ASP.NET AJAX 并不包括在 AJAX 框架之中。刚开始学了 JQuqery, 众多的 $get(),...等等符号早已把我搞晕了。暂时就放弃了。后来学习 ASP.NET AJAX ,在微软的领导下,逐渐由服务器端转向客户端编程。 激起我客户端编程的兴趣,才想起学习一下了 Jquery. 随着WEB2._jquery ajax asp.net 认证
文章浏览阅读1.7k次。前段时间在用google map api的函数库的时候,发现里面的downloadUrl函数非常好用,所以自己写了一个。用腻了那些什么框架什么池,到头来发现越简单的东西越是适合我这种懒人。downloadUrl(url, callback, data);参数说明: url不用说了; callback是回调函数,函数调用的时候会有两个参数:data, responseCode,data就_xmlhttprequest downloadurl
文章浏览阅读956次。前些时间写了几篇关于XMLHTTP运用的实例.(可以到http://dev.csdn.net/user/wanghr100看之前的几编关于XMLHTTP的介绍.)近来看论坛上经常有人提问关于如何无刷新,自动更新数据.传统上,我们浏览网页,如果加入最新的数据.只能是等我们重新向服务器端请求时才能显示出来.但是,对于一些时效性很强的网站.传统的这种做法是不能满足的.我们可以让程序自动刷新.定时_后端xml怎么实现数据有救新增,没有就更新
文章浏览阅读3.3k次。 XMLHttpRequest调用XMLHttpRequest Call ●●●调用,回调,下载,抓取,实时,查询,远程通信(Remoting),远程通信脚本(RemoteScripting),同步,上传,XMLHttpRequest图6-2:XMLHttpRequest调用 目标故事Reta正在一个批发商网站上购买商品。每次她添加一个商品到购物车时,web站点发出_createxmlhttpre
文章浏览阅读1.3k次。function clearitem(){ var drp1 = document.getElementById("drp1"); while(drp1.options.length>0) { drp1.options.remove(0); } }//动态更改方法(根据城市代码取得该市商业区并添加到DropDownList中_dropdownlist根據動態變化
文章浏览阅读1.9k次。因為 Json.net 是有附原始碼的,他也附了單元測試的專案,底下是我額外增加的UnitTest,我的目標就是讓底下的測試可以pass,而且原來的Test 也要都能通過。 ValueTypeTest.csusing System;using NUnit.Framework;namespace Newtonsoft.Json.Test { [TestFixture] public cl_vb 無效的 json 基本型別
文章浏览阅读844次。利用XMLHTTP无刷新获取数据. 客户端和服务器端数据的交互有几种方法.1.提交,通过提交到服务器端.也称"有刷新"吧.2.通过XMLHTTP无刷新提交到服务器端,并返回数据.也称"无刷新"吧.利用XMLHTTP我们可以实现很多很强大的应用.这文章主要介绍它的一些简单的应用.附:因为XMLHTTP是IE5.0+支持的对象.所以你必须要有IE5.0+才能看到效果.client.htm_xmlhttp取源码没有更新
文章浏览阅读1.8k次。Json.Net 無法序列基本型別(string, int),Asp.Net Ajax 無法正確序列日期,AjaxPro序列出我不想要的_type字串 1. Json.Net 是我最常使用的序列/反序列json套件,標榜速度快,對於一對多關係的object 也都能正常運作, 己能滿足我平日的需要,但前幾天突然有個情況,我要序列的是一個泛型參數,該參數不一定是物object型別,有可能是st_token string in state start
文章浏览阅读1.3k次。转载自:http://www.cnblogs.com/JeffreyZhao/archive/2007/01/31/update_the_updatepanels_by_js.html众 所周知,UpdatePanel是通过Trigger来更新的。被设定为Trigger的控件在PostBack之后会被客户端所截获,并且使用 XMLHttpRequest对象发送内容,然后服务器端由ScriptMan_web.ui.updatepanel 和 updatepanel 的区别
文章浏览阅读1.9k次。有些时候,只是需要更新页面的一个部分甚至只是更新中间的几个数据却需要从服务器DOWN整个页面,导致各种资源的浪费。使用数据岛技术可以很好的解决这个问题:通过定时器或用户事件触发数据岛(XML对象)象服务器获取数据,在数据获取完成后,适时更新相关数据。示例HTML部分:http://localhost/WebService/LoadData/FeaturedService.asmx/GetScore_web数据岛
文章浏览阅读1k次。在页面上使用ActiveXObject的代价是很大的,如果我们的无刷新页面使用xmlhttp技术,我们或许需要频繁的建立xmlhttp对象,当然 我们也可以使用全局变量来cache一个xmlhttp对象实例。但是这样的方法适合于同步方式xmlhttp通信,而对于异步方式xmlhttp通信将 会出现问题。由于没有了进程的堵塞,用户可能再次调用同一个xmlhttp实例,如果这时前一个通信未完成,那么就
文章浏览阅读998次。 by Lokesh Dhakar 译: croc查看原文概要:Lightbox JS 是一个简单而又谦恭的用来把图片覆盖在当前页面上的脚本. 它能被快速安装并且运作于所有流行的浏览器.最新更新 Version 2.0 图片集: 分组相关的图片并且能轻松的导航它们 视觉特效: 奇特的自适应调整 向后兼容: yes! 点击这里查看实例_on lightbox 2 by lokesh dhakar