ajax知识 Ajax学习全套(最全最经典)(3)_H5之家 - 中国HTML5教程资源分享第一站

aylin.com域名这边可以给定义函数

# 采用pythontornado框架来进行的class IndexHandler(tornado.web.RequestHandler): def get(self): self.write('func([11,22,33]);') def post(self, *args, **kwargs): self.write('t2.post')

在这里jsonp就采用script标签的src来进行跨域请求的

二、CORS

上面那种方法说到浏览器的同源策略导致ajax无法进行跨域传输，那么这种方法就可以突破浏览器限制来进行传输。当数据发送给对方域名的时候，对方已经收到，但是在返回的时候被浏览器给阻挡，我们可以写一串类似于身份证的字符串，通过浏览器的预检，从而达到数据的传输。

这方面分为简单请求和非简单请求

条件： 1、请求方式：HEAD、GET、POST 2、请求头信息： Accept Accept-Language Content-Language Last-Event-ID Content-Type 对应的值是以下三个中的任意一个 application/x-www-form-urlencoded multipart/form-data text/plain注意：同时满足以上两个条件时，则是简单请求，否则为复杂请求

简单请求只一次请求，而复杂请求是两次请求，在发送数据之前会先发一次请求用于做“预检”，只有“预检”通过后才再发送一次请求用于数据传输。

基于cors实现AJAX请求:

1、支持跨域，简单请求

服务器设置响应头：Access-Control-Allow-Origin = '域名' 或 '*'

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body> <p> <input type="submit" onclick="XmlSendRequest();" /> </p> <p> <input type="submit" onclick="JqSendRequest();" /> </p> <script type="text/javascript" src="jquery-1.12.4.js"></script> <script> function XmlSendRequest(){ var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState == 4) { var result = xhr.responseText; console.log(result); } }; xhr.open('GET', ":8000/test/", true); xhr.send(); } function JqSendRequest(){ $.ajax({ url: ":8000/test/", type: 'GET', dataType: 'text', success: function(data, statusText, xmlHttpRequest){ console.log(data); } }) } </script></body></html> class MainHandler(tornado.web.RequestHandler): def get(self): self.set_header('Access-Control-Allow-Origin', "") self.write('{"status": true, "data": "seven"}')

2、支持跨域，复杂请求

由于复杂请求时，首先会发送“预检”请求，如果“预检”成功，则发送真实数据。

•“预检”请求时，允许请求方式则需服务器设置响应头：Access-Control-Request-Method

•“预检”请求时，允许请求头则需服务器设置响应头：Access-Control-Request-Headers

•“预检”缓存时间，服务器设置响应头：Access-Control-Max-Age

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body> <p> <input type="submit" onclick="XmlSendRequest();" /> </p> <p> <input type="submit" onclick="JqSendRequest();" /> </p> <script type="text/javascript" src="jquery-1.12.4.js"></script> <script> function XmlSendRequest(){ var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState == 4) { var result = xhr.responseText; console.log(result); } }; xhr.open('PUT', ":8000/test/", true); xhr.setRequestHeader('k1', 'v1'); xhr.send(); } function JqSendRequest(){ $.ajax({ url: ":8000/test/", type: 'PUT', dataType: 'text', headers: {'k1': 'v1'}, success: function(data, statusText, xmlHttpRequest){ console.log(data); } }) } </script></body></html> class MainHandler(tornado.web.RequestHandler): def put(self): self.set_header('Access-Control-Allow-Origin', "") self.write('{"status": true, "data": "seven"}') def options(self, *args, **kwargs): self.set_header('Access-Control-Allow-Origin', "") self.set_header('Access-Control-Allow-Headers', "k1,k2") self.set_header('Access-Control-Allow-Methods', "PUT,DELETE") self.set_header('Access-Control-Max-Age', 10)

3、跨域传输cookie

在跨域请求中，默认情况下，HTTP Authentication信息，Cookie头以及用户的SSL证书无论在预检请求中或是在实际请求都是不会被发送。

如果想要发送：

•浏览器端：XMLHttpRequest的withCredentials为true

•服务器端：Access-Control-Allow-Credentials为true