AJAX—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 views urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^index/', views.index),
url(r'^add',views.add)
views.py代码如下：
from django.shortcuts import render,HttpResponse def 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 + n2 return 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 protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
beforeSend: function (xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
更多细节详见：Djagno官方文档中关于CSRF的内容
AJAX—AJAX基础的更多相关文章
- ajax技术基础详解
一.概述 1.什么是ajax 可以与服务器进行[异步]交互的技术,浏览器无需刷新 2.什么时候出现ajax? -- XMLHttp 微软 1999年微软公司发布IE5版本,内嵌了ajax技术 什么时候 ...
- Ajax编程基础
目录 Ajax编程基础 传统网站中存在的问题 Ajax概述 Ajax的应用场景 Ajax的运行环境 Ajax运行原理及实现 Ajax运行原理 Ajax的实现步骤 1.创建Ajax对象 2.告诉Ajax ...
- Ajax全面基础学习（二）
两种配置ajax的方式 $.ajax('url',{ 配置ajax}); $.ajax({ url : 'url' 其他ajax配置}) ajax的回调函数 $.ajax('url',{ //请求成功 ...
- Ajax的基础应用
什么是ajax Ajax: asynchronous javascript and xml (异步js和xml) 其是可以与服务器进行(异步/同步)交互的技术之一. ajax的语言载体是java ...
- AJAX使用说明书 基础
AJAX简介 什么是AJAX AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与服务器进行异 ...
- Ajax 学习 - 基础学习
<AJax - Async Javascript and xml - 异步的JavaScript和XML> 一.基础认识 AJax技术的目的:实现页面无刷新数据动态更改 优点: + 不需 ...
- Ajax之基础总结
一.Ajax 简介 Ajax 由 HTML.JavaScript技术.DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序.在详细探讨 Ajax 是 ...
- Ajax——异步基础知识（一）
基础概念 1.异步请求可以做到偷偷向服务器发送请求,而页面却不刷新 2.get异步请求传递参数是通过url追加键值对的方式 3.post异步请求比较特殊,需要设置请求的类型 User-Agent:浏览 ...
- Ajax之基础
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/liu_yujie2011com/article/details/29812777 几 ...
随机推荐
- pycharm建立第一个django工程-----windows中
pycharm建立第一个django工程 系统:win764 ip: 192.168.0.100 安装django pip install django 左上角建立一个名为Firstdjango工程 ...
- []how to use caffe model with TensorRT c++
//IHostMemory *gieModelStream {nullptr}; //const char* prototxt = "./googlenet/test_20181010.pr ...
- 使用dd命令克隆整个Linux系统
参考:https://www.cnblogs.com/jikexianfeng/p/6103504.html 本次使用使用dd命令克隆整个Ubuntu系统 1,VM安装一台Ubuntu虚拟机 过程不详 ...
- Windows 7通过VirtualBox配置镜像加速
配置Docker镜像加速: 1.双击,开启default 2.开启后执行下面的命令修改profile文件: sudo vi /var/lib/boot2docker/profile 打开文件之后,敲下 ...
- 深入浅出的分析 Set集合
01. 摘要 Set集合的特点主要有:元素不重复.存储无序的特点. 打开 Set 集合,主要实现类有 HashSet.LinkedHashSet .TreeSet .EnumSet( RegularE ...
- elasticsearch查询操作
#查看节点信息 curl -X GET http://localhost:9200/_nodes #打开文件数信息 curl -X GET http://localhost:9200/_nodes/s ...
- ffmpeg学习笔记-音频解码
在之前的文章已经初步对视频解码有个初步的认识了,接下来来看一看音频解码 音频解码步骤 音频解码与视频解码一样,有者固有的步骤,只要按照步骤来,就能顺利的解码音频 以上是ffmpeg的解码流程图,可以看 ...
- 在图中寻找最短路径-----深度优先算法C++实现
求从图中的任意一点(起点)到另一点(终点)的最短路径,最短距离: 图中有数字的点表示为图中的不同海拔的高地,不能通过:没有数字的点表示海拔为0,为平地可以通过: 这个是典型的求图中两点的最短路径:本例 ...
- Ubuntu修改终端显示的主机名、用户名、目录不同颜色
打开终端输入:echo $PS1 输入:gedit ~/.bashrc #定位到如下代码: if [ "$color_prompt" = yes ]; then PS1='${de ...
- Java代码是怎么运行的
前言.... 作为一名 Java 程序员,你应该知道,Java 代码有很多种不同的运行方式.比如说可以在开发工具中运行,可以双击执行 jar 文件运行,也可以在命令行中运行,甚至可以在网页中运行.当然 ...