AJAX
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
简单来讲ajax完成的是局部刷新与异步交互。
举例：
- 搜索引擎搜索框输入字符后下边显示可能要搜索的内容；
- 注册账号是显示昵称是否被使用
AJAX使用步骤
- 1.创建XMLHTTPRequest对象
- 2.open打开与服务器的连接
- 3.向服务器端发送请求
- 4.监听服务器发送回的响应
AJAX实现过程
1.一个简单的html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onclick="func();">ajax发送</button>
</body>
</html>
2.创建XMLHttpRequest对象
为了处理浏览器兼容问题，需要创建不同种对象
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;
}
3.open打开与服务器的连接
open函数有三个参数：
- 提交方式，如GET,POST
- url，get请求的的话可在后边加信息
- 一个bool值，表示是否使用异步请求，默认true
var xmlHttp = createXMLHttpRequest();
xmlHttp.open("POST", "/ajax_test/", true);
3.向服务端发送请求
post请求，发送的是个字符串，相当于post请求中的键值
xmlHttp.send("massage=ajax&username=sfencs")
get请求，由于get请求数据在url上，但send函数参数不能为空，所以
xmlHttp.send(null);
4.监听服务器响应
XMLHttpRequest对象在使用的时候有5种状态，每个状态对应着一个值：
- 0：只是创建了XMLHttpRequest对象，还未调用open()方法；
- 1：open()方法已调用，但还没调用send()方法
- 2：send()方法已调用
- 3：开始读取服务器响应
- 4：读取服务器响应结束
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为服务器响应状态码
5.完整代码
<!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回复')
6.注意事项
- 1.监听函数xmlHttp.onreadystatechange必须要放在xmlHttp对象创建之后，中间不能有其他内容，否则xmlHttp对象就像是不起作用了一样，前后端都不会有响应。
- 2.post请求需要设置请求头信息xmlHttp.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”)，否则服务器端会忽略请求体中的数据
- 3.csrf防御
由于django默认post提交都会有csrf认证，需要添加CSRF token所以有两种解决方式
在djangoviews函数中添加免除csrf跨站保护
```python
from django.views.decorators.csrf import csrf_exempt
然后给视图函数添加装饰器@csrf_exempt
或者
在js中添加
```javascript
$.ajaxSetup({
data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
});
为每个ajax访问添加csrf_token
jquery实现ajax
引入jquery可以将文件放到一个static文件夹中，并在settings中添加
STATIC_URL = '/static/'
STATICFILES_DIRS=(
os.path.join(BASE_DIR,'static'),
)
1.$.get $.post
顾名思义，这两种方法是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中，这样可以避免编码问题。
2.$.getScript
通过 AJAX 请求来获得并运行一个 JavaScript 文件,即可以根据需要来决定是否引入
$.getScript("test.js", function(){ alert("Script 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 类型：Object 让回调函数内 this 指向这个对象，比如document.body，那么在回调函数中，$(this)就是这个对象
- data 类型为字典Key/Value格式，发送到服务器的数据
- dataType 预期服务器返回的数据类型
- processData data中会将自动转换为请求字符串格式，processData默认为true，若不想将数据进行转换，知识发送原数据，可以将其设置为false
- type string类型，表示请求方式
- url 发送的地址
- 等等
回调函数：
- beforeSend 参数类型函数，发送请求前可修改 XMLHttpRequest 对象的函数，XMLHttpRequest 对象是唯一的参数
- error 在请求出错时调用。传入 XMLHttpRequest 对象，描述错误类型的字符串以及一个异常对象（如果有的话）error: function (jqXHR, textStatus, err){}
- dataFilter 类型：Function 表示对ajax返回的数据进行预处理，有data和type两个参数，data为返回的原始数据，type为datatype参数，比如收到的是json类型，那么在预处理中tmp = JSON.parse(data)
- success 请求成功后调用，传入返回后的数据，以及包含成功代码的字符串success: function (data，str){}
- complete 无论请求成功与否，最后都会调用传入 XMLHttpRequest 对象，以及一个包含成功或错误代码的字符串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(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式.
这里有json字符串和json对象两个概念
json字符串就是数据交换传输的信息格式，json对象其实是javascript对象的子集
数据传输或转换时，先将原数据转换成json字符串，使用时再将json字符串转换成json对象或者其他语言的数据格式
python与json对象的对应
python --> json
dict object
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)