一、原生AJAX，jQuery Ajax，“伪”AJAX，JSONP
1. 浏览器访问
http://127.0.0.1:8000/index/ http://127.0.0.1:8000/fake_ajax/ http://127.0.0.1:8000/index/jsonp/ http://127.0.0.1:8000/autohome/
2. urls
from django.conf.urls import url from django.contrib import admin from app01 import views urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^index/', views.index), url(r'^add1/', views.add1), url(r'^add2/', views.add2), url(r'^autohome/', views.autohome), url(r'^fake_ajax/', views.fake_ajax), url(r'^jsonp/', views.jsonp), ]
3. views
1 from django.shortcuts import render,HttpResponse,redirect 2 3 def index(request): 4 return render(request,'index.html') 5 6 7 def add1(request): 8 a1 = int(request.POST.get('i1')) 9 a2 = int(request.POST.get('i2')) 10 return HttpResponse(a1 + a2) 11 12 def add2(request): 13 if request.method == 'GET': 14 i1 = int(request.GET.get('i1')) 15 i2 = int(request.GET.get('i2')) 16 print('add2....') 17 return HttpResponse(i1 + i2) 18 else: 19 print(request.POST) 20 print(request.body) 21 return HttpResponse('...') 22 23 24 def autohome(request): 25 return render(request,'autohome.html') 26 27 28 def fake_ajax(request): 29 if request.method == 'GET': 30 return render(request,'fake_ajax.html') 31 else: 32 print(request.POST) 33 return HttpResponse('返回值') 34 35 36 def jsonp(request): 37 return render(request,'jsonp.html')
4. templates
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <h1>首页</h1> 9 <input type="text" id="i1" /> 10 + 11 <input type="text" id="i2" /> 12 = 13 <input type="text" id="i3" /> 14 15 <input type="button" id="btn1" value="jQuery Ajax" onclick="add1();" /> 16 <input type="button" id="btn2" value="原生Ajax" onclick="add2();" /> 17 18 <script src="/static/jquery-3.2.1.js"></script> 19 <script> 20 /* $$$$$$$ jQuery Ajax $$$$$$$ */ 21 function add1() { 22 $.ajax({ 23 url:'/add1/', 24 type:'POST', 25 data:{'i1':$('#i1').val(),'i2':$('#i2').val()}, 26 success:function (arg) { 27 $('#i3').val(arg); 28 } 29 }) 30 31 } 32 33 34 /* $$$$$$$ 原生Ajax $$$$$$$ */ 35 function add2() { 36 /* $$$$$$$ GET方式 $$$$$$$ */ 37 /* var xhr = new XMLHttpRequest(); 38 xhr.onreadystatechange = function () { 39 if(xhr.readyState == 4){ 40 alert(xhr.responseText); 41 } 42 }; 43 xhr.open('GET','/add2/?i1=12&i2=19'); 44 xhr.send(); */ 45 46 47 48 /* $$$$$$$ POST方式 $$$$$$$ */ 49 var xhr = new XMLHttpRequest(); 50 xhr.onreadystatechange = function () { 51 if(xhr.readyState == 4){ 52 alert(xhr.responseText); 53 } 54 }; 55 xhr.open('POST','/add2/'); 56 xhr.setRequestHeader('Content-Typr','application/x-www-form-urlencoded'); 57 xhr.send('i1=12&i2=19'); 58 } 59 </script> 60 </body> 61 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <div> 9 <input type="text" id="txt1" /> 10 <input type="button" value="查看" onclick="changeScr();" /> 11 </div> 12 <iframe id="ifr" style=" 1200px;height: 1000px;" src="http://www.autohome.com.cn"></iframe> 13 14 <script> 15 function changeScr() { 16 var inp = document.getElementById('txt1').value; 17 document.getElementById('ifr').src = inp; 18 } 19 </script> 20 </body> 21 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <form id="f1" method="POST" action="/fake_ajax/" target="ifr"> 9 <iframe id="ifr" name="ifr" style="display: none;"></iframe> 10 <input type="text" name="user" /> 11 <a onclick="submitForm();">提交</a> 12 </form> 13 14 <script> 15 function submitForm() { 16 document.getElementById('ifr').onload = loadIframe; 17 document.getElementById('f1').submit(); 18 } 19 function loadIframe() { 20 var content = document.getElementById('ifr').contentWindow.document.body.innerText; 21 alert(content); 22 } 23 </script> 24 </body> 25 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script src="/static/commons.js"></script> 7 </head> 8 <body> 9 <a onclick="sendMsg();">发送</a> 10 <script> 11 function sendMsg() { 12 var tag = document.createElement('scaript'); 13 tag.src = "http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403"; 14 document.head.appendChild(tag); 15 } 16 </script> 17 </body> 18 </html>
5. static
1 function list(arg){ 2 console.log(arg); 3 }
1 f1(123)
二、CORS
cors 跨站资源共享 #响应头加入 obj["Access-Control-Allow-Origin"] = "http://www.s4.com:8000" #仅这个域名可以访问 obj["Access-Control-Allow-Origin"] = "*" #所有域名都可以访问
a. www.s4.com 访问 www.s5.com,在响应头加入数据，同源策略就不生效
1. www.s4.com
urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^cors/', views.cors), ]
1 from django.shortcuts import render,HttpResponse 2 3 # Create your views here. 4 5 6 def cors(request): 7 return render(request,"core.html") 8 9 view.py
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <input type="button" value="获取用户列表" onclick="getUsers()"> 10 11 <ul id="user_list"></ul> 12 13 <script src="/static/jquery-3.2.1.js"></script> 14 15 <script> 16 function getUsers() { 17 $.ajax({ 18 url:"http://www.s5.com:9000/user/", 19 type:"GET", 20 success:function (arg) { 21 console.log(arg); 22 console.log(typeof arg); 23 for (var i = 0; i < arg.length; i++) { 24 var tag = document.createElement("li"); 25 tag.innerText = arg[i]; 26 document.getElementById("user_list").appendChild(tag); 27 } 28 } 29 }) 30 } 31 </script> 32 33 34 35 </body> 36 </html> 37 38 core.html
2. www.s5.com
urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^user', views.user), ]
1 from django.shortcuts import render,HttpResponse 2 3 # Create your views here. 4 5 import json 6 def user(request): 7 8 user_list = ["alex","egon","root"] 9 user_list_str = json.dumps(user_list) 10 11 obj = HttpResponse(user_list_str) 12 13 obj["Access-Control-Allow-Origin"] = "http://www.s4.com:8000" 14 return obj 15 16 views.py
b.预检request.method == "OPTIONS
1. www.s4.com
urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^cors/', views.cors), ]
1 from django.shortcuts import render,HttpResponse 2 3 # Create your views here. 4 5 6 7 def cors(request): 8 return render(request,"core.html") 9 10 views.py
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <input type="button" value="获取用户列表" onclick="getUsers()"> 10 11 <ul id="user_list"></ul> 12 13 <script src="/static/jquery-3.2.1.js"></script> 14 15 <script> 16 function getUsers() { 17 $.ajax({ 18 url:"http://www.s5.com:9000/user/", 19 type:"DELETE", 20 success:function (arg) { 21 console.log(arg); 22 23 } 24 }) 25 } 26 </script> 27 28 29 30 </body> 31 </html> 32 33 core.html
2. www.s5.com
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^user', views.user),
]
1 from django.shortcuts import render,HttpResponse 2 3 # Create your views here. 4 5 import json 6 def user(request): 7 print(request.method) 8 if request.method == "OPTIONS": 9 10 obj = HttpResponse() 11 obj["Access-Control-Allow-Origin"] = "*" 12 obj["Access-Control-Allow-Methods"] = "DELETE" 13 return obj 14 15 obj = HttpResponse("..") 16 obj["Access-Control-Allow-Origin"] = "*" 17 return obj 18 19 view.py