AJAX
2018-11-21 本文已影响0人
Pope_Li
什么是AJAX
JAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
- 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
- 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
示例
页面输入两个整数，通过AJAX传输到后端计算出结果并返回。
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
{% load static %}
<body>
<div>
<input type="text" name="username" id="i1">
<p style="color: red"></p>
</div>
<hr>
<input type="text" >
<input type="text">
<script src='{{ static `jquery.js` }}'></script>
<script>
$('#i1').on('blur', function () {
$.ajax({
url: '/index/', // 往哪里发请求
type: 'POST', // 请求的方法
data: {'username': $('#i1').val()}, // 请求的数据
success: function (res) { // 请求被成功响应之后要做的事儿
$('#i1+p').text(res);
},
error: function (err) { // 请求未被响应之后要做的事儿
alert(err)
}
})
})
</script>
views.py
from django.shortcuts import render, HttpResponse, redirect
from app01.models import UserInfo
from django import views
import json
from django.http import JsonResponse
# Create your views here.
def index(request):
if request.method == "POST":
print(request.POST)
username = request.POST.get('username')
# 去数据库检测用户名是否已经存在
is_exist = UserInfo.objects.filter(username=username)
if is_exist:
# 用户名已被注册
return HttpResponse('用户名已被注册')
else:
# 用户名可以注册
return HttpResponse('用户名可以注册')
return render(request, 'index.html')
urls.py
rom django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
url(r'^index/', views.index),
]
AJAX常见应用情景
搜索引擎根据用户输入的关键字，自动提示检索关键字。
还有一个很重要的应用场景就是注册时候的用户名的查重。
其实这里就使用了AJAX技术！当文件框发生了输入变化时，使用AJAX技术向服务器发送一个请求，然后服务器会把查询到的结果响应给浏览器，最后再把后端返回的结果展示出来。
-
整个过程中页面没有刷新，只是刷新页面中的局部位置而已！
-
当请求发出后，浏览器还可以进行其他操作，无需等待服务器的响应
当输入用户名后，把光标移动到其他表单项上时，浏览器会使用AJAX技术向服务器发出请求，服务器会查询名为lemontree7777777的用户是否存在，最终服务器返回true表示名为lemontree7777777的用户已经存在了，浏览器在得到结果后显示“用户名已被注册！”。
-
整个过程中页面没有刷新，只是局部刷新了；
-
在请求发出后，浏览器不用等待服务器响应结果就可以进行其他操作；
AJAX的优缺点
优点：
- AJAX使用JavaScript技术向服务器发送异步请求；
- AJAX请求无须刷新整个页面；
- 因为服务器响应内容不再是整个页面，而是页面中的部分内容，所以AJAX性能高；
js实现的AJAX
最基本的js发送AJAX请求示例：
<script>
var i1Ele = document.getElementById("i1");
i1Ele.onblur = function () {
// 原生JS创建
var xmlHttp = new XMLHttpRequest();
// 设置往哪里提交
xmlHttp.open("POST", "/index/", true);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// 取到用户填写的值
var num = i1Ele.value;
xmlHttp.send("num="+num);
// 回调，当请求收到后端的响应之后
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
alert(xmlHttp.responseText);
}
};
};
</script>
AJAX请求如何设置csrf_token
官方文档
通过获取隐藏的input标签中的csrfmiddlewaretoken值，放置在data中发送。
// 处理csrftoken问题
var csrfToken = $('[name="csrfmiddlewaretoken"]').val();
// 发送ajax请求
$.ajax({
url: '/login/',
type: 'post',
data: {username: $('#i1').val(), pwd: $('#i2').val(), csrfmiddlewaretoken: csrfToken},
success: function (res) {
// this是谁？
console.log(this);
console.log(that);
console.log('-----------------');
console.log(res);
// var data = JSON.parse(res);
// console.log(data);
var data = res;
if (data.code === 0){
// 登陆成功，跳转到指定的URL
location.href = data.next_url
}else {
// 有错误
$("#b1+span").text(data.err_msg)
}
}
})
})
</script>
