⼀、Django前后端交互之Ajax和跨域问题
⼀、Ajax介绍
1、概述
AJAX 是⼀种在⽆需重新加载整个⽹页的情况下，能够更新部分⽹页的技术。AJAX（Asynchronous Javascript And XML）翻译成中⽂就是“异步Javascript和XML”。即：使⽤Javascript语⾔与服务器进⾏异步交互，传输的数据为XML（当然，传输的数据不只是XML，⽐如还有JSON）。
同步交互：客户端发出⼀个请求后，需要等待服务器响应结束后，才能发出第⼆个请求；
异步交互：客户端发出⼀个请求后，⽆需等待服务器响应结束，就可以发出第⼆个请求。
2、使⽤场景
搜索引擎（⾕歌、百度）在⽤户输⼊某个关键字后，会出来⼀串提⽰关键字；
注册页⾯，输⼊信息后，如果信息有重复或缺失，会⾃动提⽰；
当我们只要修改⽹页上的部分内容时，单独局部刷新就可以做到；
3、优缺点
优点：
AJAX使⽤Javascript技术向服务器发送异步请求；
AJAX⽆须刷新整个页⾯；
因为服务器响应内容不再是整个页⾯，⽽是页⾯中的局部，所以AJAX性能⾼；
缺点：
AJAX并不适合所有场景，很多时候还是要使⽤同步交互；
AJAX虽然提⾼了⽤户体验，但⽆形中向服务器发送的请求次数增多了，导致服务器压⼒增⼤；
因为AJAX是在浏览器中使⽤Javascript技术完成的，所以还需要处理浏览器兼容性问题，当然，如果使⽤jQuery的话，则不⽤考虑这个问题；
⼆、通过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");
}
{
if (adyState==4 && xmlhttp.status==200)
{
}
}
xmlhttp.open("GET","/",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):
hod=='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");
}
//侦听
if (adyState==4 && xmlhttp.status==200){
}
}
//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⽅法：
三、通过jQuery实现Ajax
1、两个快捷API
<1>$.get(url, [data], [callback], [type])
<2>$.post(url, [data], [callback], [type])
url：请求的URL
data：发送的数据
callback：回调函数，前端发送数据给后端之后，后端返回数据给前端，前端接受到的数据type：text|html|json|script
2、两个不常⽤API
getJSON（url,data,callback）
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$.getJSON("/example/jquery/demo_ajax_json.js",function(result){
$.each(result, function(i, field){
$("p").append(field + " ");
});
});
});
});
</script>
</head>
<body>
<button>获得 JSON 数据</button>
<p></p>
</body>
</html>
///example/jquery/demo_ajax_json.js
{
"firstName": "Bill",
"lastName": "Gates",
"age": 60
}
getScript( url ,callback ])
function(){
$("#go").click(function(){
$(".block").animate( { backgroundColor: 'pink' }, 1000)
.animate( { backgroundColor: 'blue' }, 1000);
});
});
3、最常⽤的⽅法
$.ajax()
$(function(){
$('#send').click(function(){
$.ajax({
type: "GET",
url: "test.json",
data: {username:$("#username").val(), content:$("#content").val()},
dataType: "json",
success: function(data){
$('#resText').empty();  //清空resText⾥⾯的所有内容
var html = '';
$.each(data, function(commentIndex, comment){
html += '<div class="comment"><h6>' + comment['username']
+ ':</h6><p class="para"' + comment['content']
+ '</p></div>';
});
$('#resText').html(html);
}
});
});
});
ajax的参数
1.url:
要求为String类型的参数，（默认为当前页地址）发送请求的地址。
要求为String类型的参数，请求⽅式（post或get）默认为get。注意其他http请求⽅法，例如put和delete也可以使⽤，但仅部分浏览器⽀持。
3.timeout:
要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()⽅法的全局设置。
4.async:
要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，⽤户其他操作必须等待请求完成才可以执⾏。
5.cache:
要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。
6.data:
要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将⾃动转换为字符串格式。get请求中将附加在url后。防⽌这种⾃动转换，可以查看processData选项。
对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将⾃动为不同值对应同⼀个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。
7.dataType:
要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将⾃动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可⽤的类型如下：
xml：返回XML⽂档，可⽤JQuery处理。
html：返回纯⽂本HTML信息；包含的script标签会在插⼊DOM时执⾏。
script：返回纯⽂本JavaScript代码。不会⾃动缓存结果。除⾮设置了cache参数。注意在远程请求时（不在同⼀个域下），所有post请求都将转为get请求。
json：返回JSON数据。
jsonp：JSONP格式。使⽤SONP形式调⽤函数时，例如myurl?callback=?，JQuery将⾃动替换后⼀个“?”为正确的函数名，以执⾏回调函数。
text：返回纯⽂本字符串。
8.beforeSend：
要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加⾃定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟⼀的参数。            function(XMLHttpRequest){
this;  //调⽤本次ajax请求时传递的options参数
}
9plete：
要求为Function类型的参数，请求完成后调⽤的回调函数（请求成功或失败时均调⽤）。参数：XMLHttpRequest对象和⼀个描述成功请求类型的字符串。
function(XMLHttpRequest, textStatus){
this;    //调⽤本次ajax请求时传递的options参数
}
10.success：要求为Function类型的参数，请求成功后调⽤的回调函数，有两个参数。
(1)由服务器返回，并根据dataType参数进⾏处理后的数据。
前端测试和后端测试的区别(2)描述状态的字符串。
function(data, textStatus){
//data可能是xmlDoc、jsonObj、html、text等等
this;  //调⽤本次ajax请求时传递的options参数
}
<:
要求为Function类型的参数，请求失败时被调⽤的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下：
function(XMLHttpRequest, textStatus, errorThrown){
//通常情况下textStatus和errorThrown只有其中⼀个包含信息
this;  //调⽤本次ajax请求时传递的options参数
}
要求为String类型的参数，当发送信息⾄服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合⼤多数应⽤场合。
13.dataFilter：
要求为Function类型的参数，给Ajax返回的原始数据进⾏预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，
type是调⽤jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进⼀步处理。
function(data, type){
//返回处理后的数据
return data;
}
14.dataFilter：
要求为Function类型的参数，给Ajax返回的原始数据进⾏预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，
type是调⽤jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进⼀步处理。
function(data, type){
//返回处理后的数据
return data;
}
15.global：
要求为Boolean类型的参数，默认为true。表⽰是否触发全局ajax事件。设置为false将不会触发全局ajax事件，ajaxStart或ajaxStop可⽤于控制各种ajax事件。
16.ifModified：
要求为Boolean类型的参数，默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息。
17.jsonp：
要求为String类型的参数，在⼀个jsonp请求中重写回调函数的名字。该值⽤来替代在"callback=?"这种GET或POST请求中URL参数⾥的"callback"部分，
例如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。
18.username：
要求为String类型的参数，⽤于响应HTTP访问认证请求的⽤户名。
19.password：
要求为String类型的参数，⽤于响应HTTP访问认证请求的密码。
20.processData：
要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术⾓度来讲并⾮字符串）以配合默认内容类型"application/x-www-form-urlencoded"。
如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。
21.scriptCharset：
要求为String类型的参数，只有当请求时dataType为"jsonp"或者"script"，并且type是GET时才会⽤于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使⽤。
4、Django中设定状态码
HttpResponse.status_code = 400 //⼿动设定返回的状态码为400
四、跨域问题
4.1 同源策略机制
浏览器有⼀个很重要的概念——同源策略(Same-Origin Policy)。所谓同源是指，域名，协议，端⼝相同。不同源的客户端脚本(javascript、ActionScript)在没明确授权的情况下，不能读写对⽅的资源。
简单的来说，浏览器允许包含在页⾯A的脚本访问第⼆个页⾯B的数据资源，这⼀切是建⽴在A和B页⾯是同源的基础上。
如果Web世界没有同源策略，当你登录淘宝账号并打开另⼀个站点时，这个站点上的JavaScript可以跨域读取你的任意账号的数据，这样整个Web世界就⽆隐私可⾔了。
4.2 问题出现
代码如下：重点在open⾥⾯的URL，是属于跨域的⾏为。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax</title>
</head>
<body>
<div id="mydiv">
<button id="btn">点击</button>
</div>
</body>
<script type="text/javascript">
var oBtn = ElementById('btn');
var xhr = new XMLHttpRequest();
if (adyState == 4 && xhr.status == 200) {
alert( sponseText );
}
};
xhr.open('get', 'api.douban/v2/book/search?q=javascript&count=1', true);
xhr.send();
};
};
</script>
</html>
  上述程序运⾏时会报错：
4.3 JSONP介绍
JSONP 是 JSON with padding（填充式 JSON 或参数式 JSON）的简写。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。