AJAX
AJAX = Asynchronous and （异步的 和 ）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件，但需要用户允许 在浏览器上执行。
简单来讲ajax完成的是局部刷新与异步交互。
举例：
-
搜索引擎搜索框输入字符后下边显示可能要搜索的内容；
-
注册账号是显示昵称是否被使用
AJAX使用步骤
-
1.创建 HTTPRequest对象
-
2.open打开与服务器的连接
-
3.向服务器端发送请求
-
4.监听服务器发送回的响应
AJAX实现过程
1.一个简单的html页面
<!DOCTYPE html>
<html lang="en">
<head>
< charset="UTF-8">
< > </ >
</head>
<body>
<button ="func();">ajax发送</button>
</body>
</html>
2.创建 HttpRequest对象
为了处理浏览器兼容问题，需要创建不同种对象
function create HttpRequest() {
var Http;
// 适用于大多数浏览器，以及IE7和IE更高版本
try{
Http = new HttpRequest();
} catch (e) {
// 适用于IE6
try {
Http = new ActiveX ("Ms 2. HTTP");
} catch (e) {
// 适用于IE5.5，以及IE更早版本
try{
Http = new ActiveX ("Microsoft. HTTP");
} catch (e){}
}
}
return Http;
}
3.open打开与服务器的连接
open函数有三个参数：
-
提交方式，如GET,POST
-
url，get请求的的话可在后边加信息
-
一个bool值，表示是否使用异步请求，默认true
var Http = create HttpRequest();
Http.open("POST", "/ajax_test/", true);
3.向服务端发送请求
post请求，发送的是个字符串，相当于post请求中的键值
Http.send("massage=ajax&username=sfencs")
get请求，由于get请求数据在url上，但send函数参数不能为空，所以
Http.send(null);
4.监听服务器响应
HttpRequest对象在使用的时候有5种状态，每个状态对应着一个值：
-
0：只是创建了 HttpRequest对象，还未调用open()方法；
-
1：open()方法已调用，但还没调用send()方法
-
2：send()方法已调用
-
3：开始读取服务器响应
-
4：读取服务器响应结束
HttpRequest对象有一个 事件，可以监听这五个状态，它会在 HttpRequest对象的状态发生变化时被调用
Http.readyState属性中存放在此时的状态值
通过以上内容，我们可以监听到来自服务器的响应
Http. = function(){
if( Http.readyState == 4 && Http.status == 200) {
var ele=document.getElementById('content');
ele.innerText= Http.responseText;
}
}
其中 Http.responseText是客户端Httpresponse返回的内容， Http.status为服务器响应状态码
5.完整代码
<!DOCTYPE html>
<html lang="en">
<head>
< charset="UTF-8">
< > </ >
</head>
<body>
<button ="func()">ajax发送</button>
<span id="content"></span>
</body>
</html>
< >
function create HttpRequest() {
try {
return new HttpRequest();//大多数浏览器
} catch (e) {
try {
return new ActiveX ("Ms 2. HTTP");
} catch (e) {
return new ActiveX ("Microsoft. HTTP");
}
}
}
function func() {
var Http = create HttpRequest();
Http. = function(){
if( Http.readyState == 4 && Http.status == 200) {
var ele=document.getElementById('content');
ele.innerText= Http.responseText;
}
}
Http.open("POST", "/handle_ajax/", true);
Http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
Http.send('message=ajax&username=sfencs');
}
</ >
//django view函数
def ajax_test(request):
return render(request, 'ajax_test.html')
@csrf_exempt
def handle_ajax(request):
print(request.POST)
return HttpResponse('ajax回复')
6.注意事项
-
1.监听函数 Http. 必须要放在 Http对象创建之后，中间不能有其他内容，否则 Http对象就像是不起作用了一样，前后端都不会有响应。
-
2.post请求需要设置请求头信息 Http.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”)，否则服务器端会忽略请求体中的数据
-
3.在djangoviews函数中添加免除csrf跨站保护
from django.views.decorators.csrf import csrf_exempt
然后给视图函数添加装饰器@csrf_exempt，如果不这样做，django会提示Forbidden (CSRF token missing or incorrect.)
jquery实现ajax
引入jquery可以将文件放到一个static文件夹中，并在settings中添加
STATIC_URL = '/static/'
STATICFILES_DIRS=(
os.path.join( _DIR,'static'),
)
1.$.get $.post
顾名思义，这两种方法是post方式和get方式，它们两者使用的方式是基本相同的。
参数为(url, [data], [callback], [type])
url表示发送路径，data表示发送的数据用字典存放，字典的键不用加引号，callback为回调函数的名称也可以直接使用匿名函数，type表示要从服务器端收到的数据类型，有text|html|json| ，规定了返回数据的类型后，如果服务器发送的不是这种类型，那么不会执行回调函数
将上一节中的func函数改为如下
function func() {
$.post("/handle_ajax/",{message:'aiax'},
function (back_data,status, Http) {
var ele=document.getElementById('content');
ele.innerText=back_data;
}
)
}
这里回调函数中有三个形参，第一个为服务器返回的数据，第二个为状态信息，success或者是error，第三个就是 HTTPRequest对象，众多信息都存放在对象中
至于$.get，基本和post相同，只是传送的数据可以加到url后，一般还是把要传送的数据放到data中，这样可以避免编码问题。
2.$.get
通过 AJAX 请求来获得并运行一个 文件,即可以根据需要来决定是否引入
$.get ("test.js", function(){ alert(" loaded and executed."); });
jquery1.2版本后可以跨域调用js文件
3.$.getJSON
相当于$.get()最后一个参数为json
4.$.ajax
上述的方法都是相当于$.ajax的简写
$.ajax的参数有很多
-
async 参数类型Boolean，表示是否为异步请求，默认true
-
contentType 类型：String默认值: “application/x-www-form-urlencoded”。发送信息至服务器时内容编码类型。
-
context 类型： 让回调函数内 this 指向这个对象，比如document.body，那么在回调函数中，$(this)就是这个对象
-
data 类型为字典Key/Value格式，发送到服务器的数据
-
dataType 预期服务器返回的数据类型
-
processData data中会将自动转换为请求字符串格式，processData默认为true，若不想将数据进行转换，知识发送原数据，可以将其设置为false
-
type string类型，表示请求方式
-
url 发送的地址
-
等等
回调函数：
-
beforeSend 参数类型函数，发送请求前可修改 HttpRequest 对象的函数， HttpRequest 对象是唯一的参数
-
error 在请求出错时调用。传入 HttpRequest 对象，描述错误类型的字符串以及一个异常对象（如果有的话）error: function (jqXHR, textStatus, err){}
-
dataFilter 类型：Function 表示对ajax返回的数据进行预处理，有data和type两个参数，data为返回的原始数据，type为datatype参数，比如收到的是json类型，那么在预处理中tmp = JSON.parse(data)
-
success 请求成功后调用，传入返回后的数据，以及包含成功代码的字符串success: function (data，str){}
-
complete 无论请求成功与否，最后都会调用传入 HttpRequest 对象，以及一个包含成功或错误代码的字符串complete: function (jqXHR, textStatus){}
一个简单的ajax实现
$.ajax({
url:'/handle_ajax/',
data:{message:'ajax'},
type:'post',
success:function (data) {
var ele=document.getElementById('content');
ele.innerText=data;
}
}
)
5.json
JSON( Notation, JS 对象简谱) 是一种轻量级的数据交换格式.
这里有json字符串和json对象两个概念
json字符串就是数据交换传输的信息格式，json对象其实是 对象的子集
数据传输或转换时，先将原数据转换成json字符串，使用时再将json字符串转换成json对象或者其他语言的数据格式
python与json对象的对应
python --> json
dict
list,tuple array
str,unicode string
int,long,float number
True true
False false
None null
json字符串的的格式
- 数字 （整数或浮点数）
- 字符串 （在双引号中）
- 逻辑值 （true 或 false）
- 数组 （在方括号中）
- 对象 （在花括号中，引号用双引）
- null
json字符串中的引号都为双引号
js中的JSON.parse()与JSON.stringify()
JSON.parse()将json字符串转换为json对象，JSON.stringify()将json对象转换为json字符串
ajax完成json数据发送
$.ajax({
url:'/handle_ajax/',
data:{message:'ajax'},
type:'post',
success:function (data) {
var ele=document.getElementById('content');
var ret=JSON.parse(data)
ele.innerText=ret.name;
}
}
)
def handle_ajax(request):
print(request.POST)
dic={'name':'sfencs'}
message=json.dumps(dic)
return HttpResponse(message)
继续阅读与本文标签相同的文章
亚马逊的日本总部遭到控诉
-
阿里云容器服务ACK集群如何使用BYOK创建加密云盘
2026-05-19栏目： 教程
-
开箱即用 - 阿里云NFS NAS无代理备份来了
2026-05-19栏目： 教程
-
物联网平台实用技巧：通过服务端订阅（HTTP/2）获取设备状态
2026-05-19栏目： 教程
-
Es Bucket聚合(桶聚合) 第二篇-Terms Aggregation与Significant Terms Aggregation
2026-05-19栏目： 教程
-
新能力|分账明白，账本清楚，商家超轻松
2026-05-19栏目： 教程