AJAX使用说明书 基础
AJAX简介
什么是AJAX
AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML)。
AJAX的交互方式
- 同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求;
- 异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求。
AJAX除了异步的特点外,还有一个就是:浏览器页面局部刷新;(这一特点给用户的感受是在不知不觉中完成请求和响应过程)
AJAX优点
- AJAX使用JavaScript技术向服务器发送异步请求;
- AJAX请求无须刷新整个页面;
- 因为服务器响应内容不再是整个页面,而是页面中的部分内容,所以AJAX性能高;
AJAX实际应用场景
搜索引擎根据用户输入的关键字,自动提示检索关键字。
还有一个很重要的应用场景就是注册时候的用户名的查重。
其实这两个例子就使用了AJAX技术!当文件框发生了输入变化时,使用AJAX技术向服务器发送一个请求,然后服务器会把查询到的结果响应给浏览器,最后再把后端返回的结果展示出来。
- 整个过程中页面没有刷新,只是刷新页面中的局部位置而已!
- 当请求发出后,浏览器还可以进行其他操作,无需等待服务器的响应!
简单的AJAX示例
下面的例子是做一个简陋的加法计算器,用户输入两个数字,然后点计算后,将值显示出来,并且页面不刷新。
HTML页面代码如下:
<!DOCTYPE html>
<html lang="en">
<head><title>Ajax小示例</title>
</head>
<body><input id="n1" type="text">
+
<input id="n2" type="text">
=
<input id="he" type="text">
<input id='b1' type="button" value="计算"><script src="/static/js/jquery-3.2.1.min.js"></script><script>$('#b1').on('click',function () {var n1 = $('#n1').val();var n2 = $('#n2').val();$.ajax({url:'/add',type:'GET',data:{'n1':n1,'n2':n2},success:function (arg) {$('#he').val(arg)}})});</script>
</body>
</html>
页面效果如下:
urls.py代码如下:
from django.conf.urls import url
from django.contrib import admin
from app01 import viewsurlpatterns = [url(r'^admin/', admin.site.urls),url(r'^index/', views.index),url(r'^add',views.add)
views.py代码如下:
from django.shortcuts import render,HttpResponsedef index(request):return render(request,'index.html')def add(request):n1 = int(request.GET.get('n1',0))n2 = int(request.GET.get('n2',0))he = n1 + n2return HttpResponse(he)
$.ajax()参数
$.ajax()方法是jQuery最底层的Ajax实现。它的结构为:$.ajax(options)
该方法只有一个参数,但是这个对象里包含了$.ajax()方法所需要的请求设置以及回调函数等信息,参数以key/value的形式存在,所有的参数都是可选的。常用参数如下:
1.url
要求为String类型的参数,(默认为当前地址)发送请求的页面。
2.type
要求为String类型的参数,请求方式(post或get)默认为get。注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持。
3.timeout
要求为Number类型的参数,设置请求超时时间(毫秒)。此设置将覆盖$.ajaxSetup()方法的全局设置。
4.async
要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求。如果需要同步请求,请将此选项设置为false。注意,同步请求将锁住浏览器,用户其他操作必须等待请求完成才可以执行。
5.cache
要求为Boolean类型的参数,默认为true(当dataType为Script时,默认为false),设置false将不会从浏览器缓存中加载请求信息。
6.data
要求为Object或String类型的参数,发送到服务器的数据。如果不是字符串,将自动转换为字符串格式。get请求中将附加在URL后。防止这种自动转换,
可以查看processData选项。对象必须为key/value格式,例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组,JQuery将自动为不同值对应同一个名称。例如:
{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。
7.dataType
要求为String类型的参数,预期服务器返回的数据类型。如果不指定,jQuery将自动根据HTTP包的mine信息返回responseXML或responseText,并作为回调函数参数传递。可用的类型如下:
xml:返回XML文档,可用jQuery处理。html:返回纯文本HTML信息;包含的script标签会在插入DOM时执行。script:返回纯文本javascript代码。不会自动缓存结果,除非设置了cache参数。注意在远程请求时(不在同一个域下),所有post请求都将转为get请求。json:返回JSON数据。jsonp:JSON格式。使用JSONP形式调用函数时,例如myurl?callback=?,JQuery将自动替换后一个“?”为正确的函数名,以执行回调函数。text:返回纯文本字符串。
8.beforeSend
要求为Function类型的参数,发送请求前可以修改XMLHttpRequest对象的函数,例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是唯一的参数。
function(XMLHttpRequest){this;//调用本次ajax请求时传递的options参数}
9.complete
要求为Function类型的参数,请求完成后调用的回调函数(请求成功或失败均调用)。参数:XMLHttpRequest对象和一个描述成功请求类型的字符串。
function(XMLHttpRequest,textStatus){this; //调用本次ajax请求时传递的options参数}
10.success
要求为Function类型的参数,请求成功后调用的回调函数,有两个参数。
(1)由服务器返回,并根据dataType参数进行处理后的数据。
(2)描述状态的字符串。
function(data,textStatus){//data可能是xmlDoc、jsonObj、html、text等this; //调用本次ajax请求时传递的options参数}
11.error
要求为Function类型的参数,请求失败时被调用的函数。该函数有3个参数,即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下:
function(XMLHttpRequest,textStatus,errorThrown){//通常情况下textStatus和errorThrown只有其中一个包含信息this; //调用本次ajax请求时传递的options参数}
12.contentType
要求为String类型的参数,当发送信息至服务器时。内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。
13.dataFilter
要求为Function类型的参数,给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据,type是调用jQuery.ajax时提供的dataTYpe参数。函数返回的值将由jQuery进一步处理。
function(data,type){//返回处理后的数据return data;}
14.global
要求为Boolean类型的参数,默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件,ajaxStart和ajaxStop可用于控制各种ajax事件。
15.ifModified
要求为Boolean类型的参数,默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false,即忽略头信息。
16.jsonp
要求为String类型的参数,在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分,例如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。
17.username
要求为String类型的参数,用于响应HTTP访问认证请求的用户。
18.password
要求为String类型的参数,用于响应HTTP访问认证请求的密码。
19.processData
要求为Boolean类型的参数,默认为true。默认情况下,发送的数据将被转换为对象(从技术角度来讲而非字符串)以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息,请设置为false。
20.scriptCharset
要求为String类型的参数,只有当请求时dataType为"jsonp"或者"script",并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。
AJAX请求如何设置csrf_token
方式1
通过获取隐藏的input标签中的csrfmiddlewaretoken值,放置在data中发送。
$.ajax({url: "/cookie_ajax/",type: "POST",data: {"username": "fuyong","password": 123456,"csrfmiddlewaretoken": $("[name = 'csrfmiddlewaretoken']").val() // 使用JQuery取出csrfmiddlewaretoken的值,拼接到data中},success: function (data) {console.log(data);}
})
方式2
通过获取返回的cookie中的字符串 放置在请求头中发送。
注意:需要引入一个jquery.cookie.js插件。(插件下载)
$.ajax({url: "/cookie_ajax/",type: "POST",headers: {"X-CSRFToken": $.cookie('csrftoken')}, // 从Cookie取csrf_token,并设置ajax请求头data: {"username": "fuyong", "password": 123456},success: function (data) {console.log(data);}
})
或者用自己写一个getCookie方法:
function getCookie(name) {var cookieValue = null;if (document.cookie && document.cookie !== '') {var cookies = document.cookie.split(';');for (var i = 0; i < cookies.length; i++) {var cookie = jQuery.trim(cookies[i]);// Does this cookie string begin with the name we want?if (cookie.substring(0, name.length + 1) === (name + '=')) {cookieValue = decodeURIComponent(cookie.substring(name.length + 1));break;}}}return cookieValue;
}
var csrftoken = getCookie('csrftoken');
每一次都这么写太麻烦了,可以使用$.ajaxSetup()方法为ajax请求统一设置。
function csrfSafeMethod(method) {// these HTTP methods do not require CSRF protectionreturn (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}$.ajaxSetup({beforeSend: function (xhr, settings) {if (!csrfSafeMethod(settings.type) && !this.crossDomain) {xhr.setRequestHeader("X-CSRFToken", csrftoken);}}
});
更多细节详见:Djagno官方文档中关于CSRF的内容
转载于:https://www.cnblogs.com/jiangchunsheng/p/8780207.html
AJAX使用说明书 基础相关推荐
- ajax技术基础详解
一.概述 1.什么是ajax 可以与服务器进行[异步]交互的技术,浏览器无需刷新 2.什么时候出现ajax? -- XMLHttp 微软 1999年微软公司发布IE5版本,内嵌了ajax技术 什么时候 ...
- Ajax 编程基础(一)
一.Ajax 基础 传统网站中存在的问题: 网速慢的情况下,页面加载时间长,用户只能等待 表单提交后,如果一项内容不合格,需要重新填写所有表单内容 页面跳转,重新加载页面,造成资源浪费,增加用户等待时 ...
- Ajax入门介绍篇:Ajax开发基础
五年前,如果不知道 XML,您就是一只无人重视的丑小鸭.十八个月前,Ruby 成了关注的中心,不知道 Ruby 的程序员只能坐冷板凳了.今天,如果想跟上最新的技术时尚,那您的目标就是 Ajax. 但是 ...
- ajax传输 基础一
一个简单页面的传输 index.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
- ajax零基础整个gitt核心内容全套
文章目录 1.5查询字符串 1.6URL编码与解码 1.7使用xhr发送post请求 2.数据交换格式 2.1xml与html 2.2json 2.1数据结构 4.1 认识XMLHttpRequest ...
- Ajax+Axios基础知识
同步与异步 1.同步 严格的按照先后顺序,一步接着一步的执行,等前面完成后才可以执行下一个 例如:食堂排队打饭 consolo.log("a"); consolo.log(&quo ...
- Ajax原理基础(面试后总结)
Ajax:不刷新界面的一种请求. 原理分为三步: 第一步:创建XMLHTTPRequest对象 let xmlhttp;if(window.XMLHttpRequest){xmlhttp=new XM ...
- AJAX学习基础:简单介绍数据岛使用方法
数据岛指的是存在Html网页中的xml代码段,它在Html中形成了一个数据的集合,数据岛允许我们在Html网页中集成xml, 对xml编写脚本. 数据岛有它特有的形式,由标记xml开始 ...
- Ajax——php基础知识(二)
header header('content-type:text/html; charset= utf-8');//设置编码格式为:utf-8 header('location:http://www. ...
最新文章
- 第五篇:Visual Studio 2008 Web开发使用的新特性
- 集中化监控SQL Server数据库
- 函数模块:POPUP_TO_INFORM
- Python 项目依赖包 第三方库 生成requirements.txt的两种方法
- 我的MYSQL学习心得(一)
- c/c++面试试题(三)
- mongo的php查询,使用PHP进行简单查询的mongo查询速度慢
- 共享锁与排它锁区别(转)
- 使用动态数据进行数据分页
- PaddlePaddle线性回归示例
- hive udaf_Hive 混合函数 UDTF UDF UDAF详解
- 手游游戏源码2000套已测
- 案例|工业物联网解决方案•工业互联网云平台
- 排队问题解题思路_有关排队问题的排列组合题解法举例
- Windows Server 2022 超融合部署
- Go语言核心之美 3.2-slice切片
- Choosing Teams
- STM32实现低功耗待机总结(电流低至5.7uA)
- 什么是智能工厂,印刷企业如何实现智能化
- 发票查询,验证码无法刷新问题解决
热门文章
- jsonobject修改key的值_JSONObject(org.json)的一点修改
- mysql配置所有ip连接_Mysql查看用户连接数配置及每个IP的请求情况
- pdf打印显示spoolsv.exe-应用程序错误的原因和解决方法
- Python中文件的读写、写读和追加写读三种模式的特点
- js解析json数据
- 登录之回车登录和记住密码
- Jar mismatch! Fix your dependencies的问题(转)
- 主域无法开机,备份域升级成主域操作
- 最新25个高质量PSD素材免费下载
- SATA硬盘检测修复及MHDD的一些使用详解