首页
学习
活动
专区
圈层
工具
发布

Django 中使用 ajax 请求的正确姿势

首先,在使用 ajax 之前需要说一下这个前端库的定义,以下描述是我觉得比较简单明了的解释(本文提到的 ajax 仅指 jQuery AJAX): AJAX 是一种与服务器交换数据的技术,可以在不重新载入整个页面的情况下更新网页的一部分...思路整理 在 django 中使用 ajax 其实就是在前端代码中(一般是 js 中)使用 ajax 调用 django 的接口,然后去更新指定的页面部分。...设置一些默认的参数,简单理解就是在这个里面设置的参数,之后使用 ajax 的时候都会自动添加到请求中,比如可以设置请求头、传入参数等,而我这里是固定设置一个 csrfmiddlewaretoken 参数...利用缓存 由于我的在线工具大多数都是使用的爬虫技术,而爬虫都是调用的其他网站的接口,特别是刚添加的这个官方镜像仓库的查询接口属于外网,即使使用阿里云的服务器,调用接口的时候也比较慢,而且经常出现连接超时的现象...添加了缓存之后,在同一段时间内重复查询相同的镜像,会发现结果可以秒刷,再也不用等待了,用户体验也变得非常好。

2.5K10

重走Ajax之路2

同步请求 调用open方法时,第三个参数是false时,就是同步请求,这时候,JavaScript会堵塞,当服务器响应之后才继续执行。...这时候,绑定的readystatechange事件不会有反应,因为同步请求的话,JavaScript会堵塞,当服务器响应之后才继续执行,所以当我们绑定事件时,已经接收到响应了,所以状态不会再变也就不会触发...readystatechange事件的步骤提前到调用open方法之前,这样子,当服务器响应之后,状态会从0变成4,就会触发事件。...如果我们直接将对象发过去,会自动调用toString方法变成字符串形式。 那么,我们在换成JSON字符串再试试。...在没收到响应之前,调用abort方法可以取消请求。

96920
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    原来你是这样的jsonp(原理与具体实现细节)

    我们早已习惯,早已熟练了jQ或者zepto的ajax调用方式。...同样还是发生在timeout,此时如果请求超时了,并且设置了jsonpCallback字段(注意这个时候是设置了),但是如果请求在超时之后完成了,你的jsonpCallback还是会被执行。...) // 移除添加的元素(注意这里还off了,不然超时这种情况,请求回来了,还是会走回调) $(script).off().remove() // 请求出错或后端没有给callback...第一句自然是针对超时处理,如果请求在指定超时时间之前完成,自然是要把他清除一下,不然指定的时间到了,超时的回调还是会执行,这是不对的。...其实同样还是上面那句话,只不过此时我们指定了jsonpCallback,超时的时候虽然取消了script元素的的load error事件,意味着在超时之后请求即便回来了,也不会走到对应的回调函数中去。

    2.5K100

    原来你是这样的JSONP

    ❞ ❝我们早已习惯,早已熟练了jQ或者zepto的ajax调用方式。...字段(注意这个时候是设置了),但是如果请求在超时之后完成了,你的jsonpCallback还是会被执行。...第一句自然是针对超时处理,如果请求在指定超时时间之前完成,自然是要把他清除一下,不然指定的时间到了,超时的回调还是会执行,这是不对的。...字段(注意这个时候是设置了),但是如果请求在超时之后完成了,你的jsonpCallback还是会被执行。...其实同样还是上面那句话,只不过此时我们指定了jsonpCallback,超时的时候虽然取消了script元素的的load error事件,意味着在超时之后请求即便回来了,也不会走到对应的回调函数中去。

    85630

    pjax使用小结

    pjax 结合 pushState 和 ajax 技术, 不需要重新加载整个页面就能从服务器加载 Html 到你当前页面,这个 ajax 请求会有永久链接、title 并支持浏览器的回退/前进按钮。...使服务端处理变得复杂 要做到普通请求返回完整页面,而pjax请求只返回部分页面,服务端就需要做一些特殊处理,当然这对于设计良好的后端框架来说,添加一些统一处理还是比较容易的,自然也没太大问题。...超时时间(单位 ms ),超时后会执行默认的页面跳转,所以超时时间不应过短,不过一般不需要设置 push true 使用 window.history.pushState 改变地址栏 url( 会添加新的历史记录...可调用 e.preventDefault(); 取消 pjax pjax:start xhr, options pjax 开始(与服务器连接建立后触发) pjax:send xhr, options...{title} $screen_content 模版中使用 title 标签,这样执行 pjax 请求时不仅地址栏 url 会变化,而且浏览器标签的标题内容也会变化。

    3.4K40

    jQuery ajax - ajax() 方法jQuery ajax - ajax() 方法

    如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器(即使没有数据要发送)。...在 jQuery 1.4 中,它也会检查服务器指定的 'etag' 来确定数据没有被修改过。 jsonp 类型:String 在一个 jsonp 请求中重写回调函数的名字。...success 当请求之后调用。传入返回后的数据,以及包含成功代码的字符串。 complete 当请求完成之后调用这个函数,无论成功或失败。...类似地,指定 script 类型的话,也会先执行服务器端生成 JavaScript,然后再把脚本作为一个文本数据返回。...发送数据到服务器 默认情况下,Ajax 请求使用 GET 方法。如果要使用 POST 方法,可以设定 type 参数值。这个选项也会影响 data 选项中的内容如何发送到服务器。

    16.9K30

    JSP的原生Ajax与解析Json

    JS原生Ajax Ajax=异步Javascript+XML; ajax是一种数据请求的方式,不需要刷新整个页面。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。... //调用ajax函数 ajax({ url:'....; 请求已完成; 只要 readyState 的值变化,就会调用 readystatechange 事件,(其实为了逻辑上通顺,可以把readystatechange放到send之后,因为send时请求服务器...,会进行网络通信,需要时间,在send之后指定readystatechange事件处理程序也是可以的,我一般都是这样用,但为了规范和跨浏览器兼容性,还是在open之前进行指定吧)。...,导致 script 标签没法重用,所以每次完成操作之后要移除; 2、JSONP这种请求方式中,参数依旧需要编码; 3、如果不设置超时,就无法得知此次请求是成功还是失败; JSON 字符串转换为 JavaScript

    1.9K20

    jquery中ajax参数详解

    如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器(即使没有数据要发送)。...在 jQuery 1.4 中,它也会检查服务器指定的 'etag' 来确定数据没有被修改过。 jsonp 类型:String 在一个 jsonp 请求中重写回调函数的名字。...success 当请求之后调用。传入返回后的数据,以及包含成功代码的字符串。 complete 当请求完成之后调用这个函数,无论成功或失败。...类似地,指定 script 类型的话,也会先执行服务器端生成 JavaScript,然后再把脚本作为一个文本数据返回。...发送数据到服务器 默认情况下,Ajax 请求使用 GET 方法。如果要使用 POST 方法,可以设定 type 参数值。这个选项也会影响 data 选项中的内容如何发送到服务器。

    3.1K30

    耗时很长的服务器端事件中让客户端得到中间过程信息的合理解决方案

    最初的问题是一点按钮过不了几分钟就页面超时(要想页面不超时必须定时给页面输出一些东西), 搞定了页面超时的问题然后就是服务器IIS超时 设置了IIS超时时间就又SQL连接超时 最后寻思这样下去总不是个办法...用javascript循环把邮件地址发送给服务器端(以ajax方式), 每循环一次给服务器端10条信息, 服务器端把这10个邮件发完之后,反馈客户端一次 客户端通过js更新提示信息(已经发完十封了)...然后进入下一次ajax循环 2.ajax调用服务器端事件,在服务器端事件里使用多线程技术 当用户点按钮触发了ajax服务器端事件后, 在这个事件里我建立了两个线程 一个线程开始发送邮件,另一个线程负责返回信息...因为要实时的返回信息, 所以这个ajax事件肯定是定时调用的....(我是每4秒获取一下服务器端的信息) 服务器端事件开始执行, 先判断发邮件的线程是否已经开始了, 如果没开始就建立发邮件的线程, 并执行线程 如果开始了(那么说明这个调用肯定不是第一次调用) 就执行反馈信息的代码

    74210

    AJAX基础

    、Script、JSON、JSONP、text timeout Number 设置请求超时时间 global Boolean 表示是否触发全局Ajax事件,默认为true beforeSend function...发送请求前调用的函数 success function 请求成功后调用的函数参数result:可选,由服务器返回的数据 error function 请求失败时调用的函数 complete function...发送信息至服务器时内容编码类型。默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器(即使没有数据要发送)。...但是出于数据安全性的考虑,数据的添加和修改最好不要使用get方法。当数据量极大的时候,数据的获取也不建议采用get方法。...resp.getWriter().writer()只能传字符串 需要灵活运用 JSON 简介 JSON(JavaScript Object Notation) 一种轻量级的数据交换格式 采用独立于语言的文本格式 通常用于在客户端和服务器之间传递数据

    91910

    双管齐下:结合显式等待与Timeout处理复杂Ajax网页

    一、 理解核心挑战:为何传统爬虫会失败?在深入解决方案之前,我们首先需要清晰地定义问题。...Ajax与动态内容:当一个网页使用Ajax时,用户与页面的交互(如点击“加载更多”、滚动页面、搜索等)会触发浏览器在后台向服务器发送请求。...传统爬虫的盲点:使用如requests这样的库发起请求时,它仅仅获取服务器的初始响应。它不具备浏览器内核,因此无法执行JavaScript,自然也看不到之后通过Ajax动态填充的内容。...第三层显式等待:等待评论列表中的至少一条评论出现 # 这是更精确的等待,确保内容不仅容器在,子元素也渲染了。 print("等待具体的评论项出现...")...资源清理:在finally块中关闭驱动是必须的,确保即使程序出错,浏览器进程也会被终止,避免资源泄漏。四、 总结处理复杂的Ajax网页,不再是网络爬虫不可逾越的鸿沟。

    19410

    Servlet基础入门

    Servlet 应用程序的体系结构: Servlet 的请求首先会被 HTTP 服务器(如 Apache)接收,HTTP 服务器只负责静态 HTML 页面的解析,而 Servlet 的请求会转交给 Servlet...容器,Servlet 容器会根据 web.xml 文件中的映射关系,调用相应的 Servlet,Servlet 再将处理的结果返回给 Servlet 容器,并通过 HTTP 服务器将响应传输给客户端。...4、执行 destroy 销毁方法,在web 工程停止的时候调用 Http协议 客户端和服务器之间通信时,发送的数据,需要遵守的规则,叫 HTTP 协议。 HTTP 协议中的数据又叫报文。...AJAX 是一种浏览器异步发起请求,局部更新页面的技术(可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术,如搜索联想,在百度搜索框只输入一两个字搜索框下面就会自动列出可能搜索的关键词...AJAX可以与服务器数据进行交换,通过AJAX可以给服务器发送请求,并获取服务器响应的数据。

    1.2K40

    auto-comet服务器端向客户端的自动发送

    服务器推送技术(Server Push)是最近Web技术中最热门的一个流行术语,它的别名叫Comet(彗星)。它是继AJAX之后又一个倍受追捧的Web技术。...上节中也提到过,在Web世界中,服务器永远是被 动地发送数据,前提是客户端必须先发送请求。...传统的 Web 应用模型与基于 AJAX 的模型之比较   “服务器推”是一种很早就存在的技术,以前在实现上主要是通过客户端的套接口,或是服务器端的 远程调用。...使用 AJAX 实现“服务器推”与传统的 AJAX 应用不同之处在于:   服务器端会阻塞请求直到有数据传递或超时才返回。   ...服务器端超时,服务器端如果较长时间没有使用一个socket也会发生一个异常,这个时间相对客户端超时较长,大约为1个小时。

    3.6K60

    Vue 项目实战上传文件与接口OPTIONS

    在项目的开发过程中难免会遇到许多的坑,寻找答案成为了至关重要的一步,职场中解决问题的能力是必要切重要的,有些问题网上给的答案大多都是千篇一律重复性东西太多,而且还不能解决问题。...前端发送的是否为 Ajax 请求 在做用户超时登录时当用户超时后,前端发送请求后端会返回 401 结果。这里采用的是 axios 添加请求拦截的方式实现。...不过在过程中出现的问题是,在用户超时之后,前端发送请求始终没有返回结果。而代码并没有问题,最后排查得知后端对请求接口做了一次判断接口是不是 Ajax 请求。...,如果你的服务器没做任何针对的反馈,那就不会出现这个问题了。...也尝试了这种做法还是不行。结果直接使用 axios 默认设置即可,我们不需要要修改什么。 不过我们传入的参数需要使用 fromData 类型。

    1.6K20

    中止请求和超时 跨域的HTTP请求 认证方式 JSONP

    ,设置标志 // 启动计时器,在timeout毫秒后将终止请求 var timer = setTimeout(() => { // 设置计时器,将在timeout时间之后执行该操作,不同于直接定义,...即上方为完整的用户登录过程 ps 用户登录需要进行鉴权 由于http可被局域网抓包,所以一般使用ssl 后方的token会和后端服务器进行token的同步 一篇博文 http://www.cnblogs.com...那就暂时不举了,总体来说浏览器在发现是跨域请求的时候,会自动添加origin头,如果服务端Access-Control-Allow-Origin 的头部和origin相同,或者为*号的时候,即可进行同源请求...使用script,不会受到同源策略的影响,并且包含JSON编码数据的响应体会自动解码 脚本和安全性 使用script元素进行AJAX传输,会运行执行发送过来的任何js脚本,这种方式适用于可信的第三方脚本...使用script元素调用数据时,必须用js函数名和圆括号包裹起来。

    2.3K20

    XHR,ajax,axios,fetch傻傻分不清?

    未来发展方向是Fetch取代AJAX 回答 2: XHR vs AJAX XHR(XMLHttpRequest)对象用于与服务器交互,是AJAX技术方案的基础,也可以说,使用XHR对象来发送一个Ajax...response code. } break; } } catch (e) { // 通信错误的事件中(例如服务器宕机...优点 fetch更加底层,提供的API丰富(request和response) fetch基于标准promise实现,支持async/await 缺点 只有网络错误(如断网)才会调用reject,而对400...,500这种错误并不会reject 默认不会带cookie,需要添加配置项:fetch(url,{credentials:‘include’}) 不支持abort,不支持超时控制或主动取消 (XHR支持...xhr.ontimeout超时自动取消,也支持xhr.abort()主动取消请求) 无法检测请求的进度(XHR可以)

    2.2K30

    从一个超时程序的设计聊聊定时器的方方面面

    超时之后如果忘记了清理,也有办法统一打扫,这个问题稍后再讲。 以上面的代码1为例,如果想向参数1传递两个参数,一个任务名称和一个人员数量,应该如何改写?...但是,超时定时器的执行同样受到JS是单线程的限制,即使轮询代码是一样的,但不能保证其它地方在本次循环中没有新增的代码,所以使用setTimeout模拟的间隔定时器,仍然不能保证相待的间隔时间。...所以,还有一种做法是(定时器启动前)从服务器拉取时间,取服务器的时间作为时间参考值;在改变用户数据的时候,每次都要做检验,不能相信前端传递过来的数据。 JS引擎的运行机制是怎样的?...遇到交互操作时,例如通过键盘敲入了字符,或单击了鼠标,此时协线程会将按键回调函数、鼠标单击回调函数添加到主线程作业栈尾部。会推迟到下一代执行,也可能是下下代。...1秒的定时器已经被注册了,但在它的执行过程中,定时器不会触发(JS是单线程);并且在它之后,也不会输出3个2。

    1.8K20

    读Zepto源码之Ajax模块

    在触发 ajaxBeforeSend 事件之前,会调用配置中的 beforeSend 方法,如果 befoeSend 方法返回的为 false时,则取消触发 ajaxBeforeSend 事件,并且会取消后续...在触发 ajaxSuccess 事件前,先调用配置中的 success 方法,将 ajax 返回的数据 data 和当前状态 status 及 xhr 作为回调函数的参数。...如果 deferred 存在,则调用 resoveWith 的方法,因为 deferred 对象,因此在使用 ajax 的时候,可以使用 promise 风格的调用。...再遍历上面配置的 headers 对象,调用 setRequestHeader 方法,设置请求头,注意这里的请求头必须要在 open 之后,在 send 之前设置。...status 为 0 时,表示请求并没有到达服务器,有几种情况会造成 status 为 0 的情况,例如网络不通,不合法的跨域请求,防火墙拦截等。

    4.1K00
    领券