AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。 AJAX 不是新的编程语言,而是一种使用现有标准的新方法。 AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。 AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。
简单来讲ajax完成的是局部刷新与异步交互。 举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onclick="func();">ajax发送</button>
</body>
</html>
为了处理浏览器兼容问题,需要创建不同种对象
function createXMLHttpRequest() {
var xmlHttp;
// 适用于大多数浏览器,以及IE7和IE更高版本
try{
xmlHttp = new XMLHttpRequest();
} catch (e) {
// 适用于IE6
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
// 适用于IE5.5,以及IE更早版本
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){}
}
}
return xmlHttp;
}
open函数有三个参数:
var xmlHttp = createXMLHttpRequest();
xmlHttp.open("POST", "/ajax_test/", true);
post请求,发送的是个字符串,相当于post请求中的键值
xmlHttp.send("massage=ajax&username=sfencs")
get请求,由于get请求数据在url上,但send函数参数不能为空,所以
xmlHttp.send(null);
XMLHttpRequest对象在使用的时候有5种状态,每个状态对应着一个值:
XMLHttpRequest对象有一个onreadystatechange事件,可以监听这五个状态,它会在XMLHttpRequest对象的状态发生变化时被调用 xmlHttp.readyState属性中存放在此时的状态值 通过以上内容,我们可以监听到来自服务器的响应
xmlHttp.onreadystatechange= function(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
var ele=document.getElementById('content');
ele.innerText=xmlHttp.responseText;
}
}
其中xmlHttp.responseText是客户端Httpresponse返回的内容,xmlHttp.status为服务器响应状态码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onclick="func()">ajax发送</button>
<span id="content"></span>
</body>
</html>
<script>
function createXMLHttpRequest() {
try {
return new XMLHttpRequest();//大多数浏览器
} catch (e) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
}
function func() {
var xmlHttp = createXMLHttpRequest();
xmlHttp.onreadystatechange= function(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
var ele=document.getElementById('content');
ele.innerText=xmlHttp.responseText;
}
}
xmlHttp.open("POST", "/handle_ajax/", true);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
xmlHttp.send('message=ajax&username=sfencs');
}
</script>
//django view函数
def ajax_test(request):
return render(request, 'ajax_test.html')
@csrf_exempt
def handle_ajax(request):
print(request.POST)
return HttpResponse('ajax回复')
from django.views.decorators.csrf import csrf_exempt
然后给视图函数添加装饰器@csrf_exempt
或者
在js中添加
```javascript
$.ajaxSetup({
data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
});
为每个ajax访问添加csrf_token
引入jquery可以将文件放到一个static文件夹中,并在settings中添加
STATIC_URL = '/static/'
STATICFILES_DIRS=(
os.path.join(BASE_DIR,'static'),
)
顾名思义,这两种方法是post方式和get方式,它们两者使用的方式是基本相同的。 参数为(url, [data], [callback], [type]) url表示发送路径,data表示发送的数据用字典存放,字典的键不用加引号,callback为回调函数的名称也可以直接使用匿名函数,type表示要从服务器端收到的数据类型,有text|html|json|script,规定了返回数据的类型后,如果服务器发送的不是这种类型,那么不会执行回调函数 将上一节中的func函数改为如下
function func() {
$.post("/handle_ajax/",{message:'aiax'},
function (back_data,status,xmlHttp) {
var ele=document.getElementById('content');
ele.innerText=back_data;
}
)
}
这里回调函数中有三个形参,第一个为服务器返回的数据,第二个为状态信息,success或者是error,第三个就是XMLHTTPRequest对象,众多信息都存放在对象中 至于$.get,基本和post相同,只是传送的数据可以加到url后,一般还是把要传送的数据放到data中,这样可以避免编码问题。
通过 AJAX 请求来获得并运行一个 JavaScript 文件,即可以根据需要来决定是否引入
$.getScript("test.js", function(){ alert("Script loaded and executed."); });
jquery1.2版本后可以跨域调用js文件
相当于$.get()最后一个参数为json
上述的方法都是相当于$.ajax的简写 $.ajax的参数有很多
回调函数:
一个简单的ajax实现
$.ajax({
url:'/handle_ajax/',
data:{message:'ajax'},
type:'post',
success:function (data) {
var ele=document.getElementById('content');
ele.innerText=data;
}
}
)
JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式. 这里有json字符串和json对象两个概念 json字符串就是数据交换传输的信息格式,json对象其实是javascript对象的子集 数据传输或转换时,先将原数据转换成json字符串,使用时再将json字符串转换成json对象或者其他语言的数据格式
python --> json
dict object
list,tuple array
str,unicode string
int,long,float number
True true
False false
None null
json字符串中的引号都为双引号
JSON.parse()将json字符串转换为json对象,JSON.stringify()将json对象转换为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)