一、基于jQuery的ajax实现（最底层方法：$.jax()）
$.ajax(
url:
type:''POST“
)
$.get(url,[data],[callback],[type]) #callback是发送成功后就执行的函数，type是告诉服务器需要什么数据，type：text|html|json|script
$.post(url,[data],[callback],[type])
例子：
$.get('/jquery_get/',{name:'gavin'}) //name关键字是不加引号的
$.post('/jquery_get',{name:'kobe'}，function(data，stateText,obj){
console.log(data,stateText,obj)
}) //function里的data参数是服务器端返回的数据,stateText 表示返回的状态，obj是js里的xmlHttprequest，里面包含很多数据，包含状态码，readystatus（1，2，3，4分别表示四个状态步骤）
$.getJson（）就是$.get()的type定义为json
$.getScript('/static/test.js',function(){
add(2,5)
}) //前面表示js文件的位置，后面表示该js文件中的函数调用,这个表示即时加载时使用
$.ajax({
url:'',
type:'POST',
data:{},
})
例子：
$.ajax({
url:'/jquery_get/',
type:'POST',
data:{a:1,b:2},
traditional：true //默认情况下，data里只能传送字典类型，如果data中的字典里面带字典或者字典里带列表，需要使用
processData:false, //告诉后端不要使用任何编码进行处理，保持原封不动，默认是true
contentType：‘application/json’，//浏览器给服务器看的类型
dataType:"json",//后端发送给前端的类型
beforeSend:function(data){ //发送之前的操作
jqXHR.setRequestHeader(‘test’: 'haha') ;
jqXHR.testData=(a:1,b:2);
},
success: function(data){ //回调函数
data=JSON.parse(data) }类似于python的load，处理json的数据
complete:function(data){
console.log(data);
console.log(data,testData); //无论是否成功都会执行
},
error:function(data){//不success时执行
console.log(arguments) //打印错误信息
alert(data);
},
})
二、JSON
json就是js的数据表现形式
python与json对象的对应
python --> json
dict object
list,tuple array
str,unicode string
int,long,float number
True true
False false
None null
parse()和.stringify()
parse() 用于从一个json字符串中解析出json对象,如 var str = '{"name":"yuan","age":"23"}' 结果：JSON.parse(str) ------> Object {age: "23",name: "yuan"} stringify()用于从一个json对象解析成json字符串，如 var c= {a:1,b:2} 结果： JSON.stringify(c) ------> '{"a":1,"b":2}' 注意1：单引号写在{}外，每个属性名都必须用双引号，否则会抛出异常。 注意2: a={name:"yuan"}; //ok b={'name':'yuan'}; //ok c={"name":"yuan"}; //ok alert(a.name); //ok alert(a[name]); //undefined alert(a['name']) //ok
三、跨域请求
同源策略机制
浏览器有一个很重要的概念——同源策略(Same-Origin Policy)。所谓同源是指，域名，协议，端口相同。不同源的客户端脚本(javascript、ActionScript)在没明确授权的情况下，不能读写对方的资源。
简单的来说，浏览器允许包含在页面A的脚本访问第二个页面B的数据资源，这一切是建立在A和B页面是同源的基础上。
如果Web世界没有同源策略，当你登录淘宝账号并打开另一个站点时，这个站点上的JavaScript可以跨域读取你的淘宝账号数据，这样整个Web世界就无隐私可言了。
jsonp的js实现
JSONP是JSON with Padding的略称。可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
它是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。
JSONP就像是JSON+Padding一样(Padding这里我们理解为填充)：
#---------------------------http://127.0.0.1:8001/login def login(request): print('hello ajax') return render(request,'index.html') #---------------------------返回用户的index.html <h1>发送JSONP数据</h1> <script> function fun1(arg){ alert("hello"+arg) } </script> <script src="http://127.0.0.1:8002/get_byjsonp/"></script> //返回：<script>fun1("yuan")</script> #-----------------------------http://127.0.0.1:8002/get_byjsonp def get_byjsonp(req): print('8002...') return HttpResponse('fun1("yuan")')
这其实就是JSONP的简单实现模式，或者说是JSONP的原型：创建一个回调函数，然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递，完成回调。
将JSON数据填充进回调函数，这应该就是JSONP的JSON+Padding的含义吧。
一般情况下，我们希望这个script标签能够动态的调用，而不是像上面因为固定在html里面所以没等页面显示就执行了，很不灵活。我们可以通过javascript动态的创建script标签，这样我们就可以灵活调用远程服务了。
<button onclick="f()">submit</button> <script> function addScriptTag(src){ var script = document.createElement('script'); script.setAttribute("type","text/javascript"); script.src = src; document.body.appendChild(script); document.body.removeChild(script); } function fun1(arg){ alert("hello"+arg) } function f(){ addScriptTag("http://127.0.0.1:8002/get_byjsonp/") } </script>
为了更加灵活，现在将你自己在客户端定义的回调函数的函数名传送给服务端，服务端则会返回以你定义的回调函数名的方法，将获取的json数据传入这个方法完成回调：
<button onclick="f()">submit</button> <script> function addScriptTag(src){ var script = document.createElement('script'); script.setAttribute("type","text/javascript"); script.src = src; document.body.appendChild(script); document.body.removeChild(script); } function SayHi(arg){ alert("Hello "+arg) } function f(){ addScriptTag("http://127.0.0.1:8002/get_byjsonp/?callbacks=SayHi") } </script> ----------------------views.py def get_byjsonp(req): func=req.GET.get("callbacks") return HttpResponse("%s('yuan')"%func)
jQuery对JSONP的实现
jQuery框架也当然支持JSONP，可以使用$.getJSON(url,[data],[callback])方法
<script type="text/javascript"> $.getJSON("http://127.0.0.1:8002/get_byjsonp?callback=?",function(arg){ alert("hello"+arg) }); </script>
结果是一样的，要注意的是在url的后面必须添加一个callback参数，这样getJSON方法才会知道是用JSONP方式去访问服务，callback后面的那个问号是内部自动生成的一个回调函数名。
此外，如果说我们想指定自己的回调函数名，或者说服务上规定了固定回调函数名该怎么办呢？我们可以使用$.ajax方法来实现
<script type="text/javascript" src="/static/jquery-2.2.3.js"></script> <script type="text/javascript"> $.ajax({ url:"http://127.0.0.1:8002/get_byjsonp", dataType:"jsonp", jsonp: 'callbacks', jsonpCallback:"SayHi" }); function SayHi(arg){ alert(arg); } </script> #--------------------------------- http://127.0.0.1:8002/get_byjsonp def get_byjsonp(req): callback=req.GET.get('callbacks') print(callback) return HttpResponse('%s("yuan")'%callback)
当然，最简单的形式还是通过回调函数来处理：
<script type="text/javascript" src="/static/jquery-2.2.3.js"></script> <script type="text/javascript"> $.ajax({ url:"http://127.0.0.1:8002/get_byjsonp", dataType:"jsonp", //必须有，告诉server，这次访问要的是一个jsonp的结果。 jsonp: 'callbacks', //jQuery帮助随机生成的：callbacks="wner" success:function(data){ alert(data) } }); </script> #-------------------------------------http://127.0.0.1:8002/get_byjsonp def get_byjsonp(req): callbacks=req.GET.get('callbacks') print(callbacks) #wner return HttpResponse("%s('yuan')"%callbacks)
jsonp: 'callbacks'就是定义一个存放回调函数的键，jsonpCallback是前端定义好的回调函数方法名'SayHi'，server端接受callback键对应值后就可以在其中填充数据打包返回了;
jsonpCallback参数可以不定义，jquery会自动定义一个随机名发过去，那前端就得用回调函数来处理对应数据了。
利用jQuery可以很方便的实现JSONP来进行跨域访问。
注解1: JSONP一定是GET请求
注解2:
<button onclick="f()">submit</button> <script src="/static/jquery-1.8.2.min.js"></script> <script type="text/javascript"> function f(){ $.ajax({ url:"http://127.0.0.1:8002/get_byjsonp", dataType:"jsonp", jsonp: 'callbacks', success :function(data){ //传过来的数据会被转换成js对象 console.log(data); //Object {name: Array[2]} console.log(typeof data); //object console.log(data.name) //["alex", "alvin"] } }); } </script> ---------------------------------------------views.py def get_byjsonp(req): func=req.GET.get("callbacks") a=json.dumps({'name':('alex','alvin')}) return HttpResponse("%s(%s)"%(func,a)) #return HttpResponse("%s({'name':('alex','alvin')})"%func) #return HttpResponse("%s('hello')"%func) #return HttpResponse("%s([12,34])"%func) #return HttpResponse("%s(5)"%func)
补充：
#views.py 中可以用 request.is_ajax() 方法判断是否是 ajax 请求，需要添加一个 HTTP 请求头： #原生javascript： #xmlhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest"); #用 jQuery： #用 $.ajax 方法代替 $.get，因为 $.get 在 IE 中不会发送 ajax header #注意：is_ajax()在跨域ajax请求时不好使 is_ajax()