一、Ajax介绍
1、概述
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。
- 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
- 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
2、使用场景
- 搜索引擎（谷歌、百度）在用户输入某个关键字后，会出来一串提示关键字；
- 注册页面，输入信息后，如果信息有重复或缺失，会自动提示；
- 当我们只要修改网页上的部分内容时，单独刷新局部网页内容就可以做到；
3、优缺点
优点：
- AJAX使用Javascript技术向服务器发送异步请求；
- AJAX无须刷新整个页面；
- 因为服务器响应内容不再是整个页面，而是页面中的局部，所以AJAX性能高；
缺点：
- AJAX并不适合所有场景，很多时候还是要使用同步交互；
- AJAX虽然提高了用户体验，但无形中向服务器发送的请求次数增多了，导致服务器压力增大；
- 因为AJAX是在浏览器中使用Javascript技术完成的，所以还需要处理浏览器兼容性问题；
二、通过JavaScript实现Ajax
1、过程和请求相关
使用Ajax的过程：
- 创建核心对象，根据不同浏览器版本新建核心对象（主要原因是浏览器兼容问题）；
- 使用核心对象打开与服务器的连接（open方法）；
- 发送请求（send方法）
- 注册监听，监听服务器响应。（通过判断核心对象的准备程度和状态码）
XMLHTTPRequest
- open(请求方式, URL, 是否异步)
- send(请求体)
- onreadystatechange，指定监听函数，它会在xmlHttp对象的状态发生变化时被调用
- readyState，当前xmlHttp对象的状态，其中4状态表示服务器响应结束
- status：服务器响应的状态码，只有服务器响应结束时才有这个东东，200表示响应成功；
- responseText：获取服务器的响应体，文本
- responseXML：获取服务器的响应体，XML
2、通过JavaScript实现Ajax之无后台交互
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/ajax/test1.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">通过 AJAX 改变内容</button>
</body>
</html>
3、通过JavaScript实现Ajax之与后台交互
通过Django实现，其实唯一区别就是在open的时候，把URL修改成Django的一个URL即可，包括GET和POST方法的URL。
a、urls.py文件
urlpatterns = [
url(r'^ajax_get',views.ajax_get),
url(r'^ajax_post',views.ajax_post)
]
b、views.py文件
def ajax_get(req):
return render(req,'ajax_get.html')
def ajax_post(req):
if req.method=='POST':
print req.POST
else:
print req.GET
return HttpResponse('ajax_post')
c、ajax_get.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试ajax的GET方法</title>
<script>
function loadXMLDoc()
{
var xmlhttp; //定义局部变量xmlhttp
if (window.XMLHttpRequest) //XMLHttpRequet对象用于和服务器交互数据。
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//侦听
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
//POST方法
xmlhttp.open("POST","./ajax_post",true);
//GET方法
//xmlhttp.open("GET","./user_info",true);
//设置头部信息
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//POST method发送
xmlhttp.send("name=xuequn");
//GET method发送
//xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改</button>
</body>
</html>
d、测试结果
GET方法：
POST方法：
