概述1、传统的Web应用
2、AJAX
“伪”AJAX由于HTML标签的iframe标签具有局部加载内容的特性，所以可以使用其来伪造Ajax请求。
 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div> <p>请输入要加载的地址：<span id="currentTime"></span></p> <p> <input id="url" type="text" /> <input type="button" value="刷新" onclick="LoadPage();"> </p> </div> <div> <h3>加载页面位置：</h3> <iframe id="iframePosition" style="width: 100%;height: 500px;"></iframe> </div> <script type="text/javascript"> window.onload= function(){ var myDate = new Date(); document.getElementById('currentTime').innerText = myDate.getTime(); }; function LoadPage(){ var targetUrl = document.getElementById('url').value; document.getElementById("iframePosition").src = targetUrl; } </script> </body> </html>
原生AJAXAjax主要就是使用 【XmlHttpRequest】对象来完成请求的操作，该对象在主流浏览器中均存在(除早起的IE)，Ajax首次出现IE5.5中存在（ActiveX控件）。 1、XmlHttpRequest对象介绍 XmlHttpRequest对象的主要方法： 
View CodeXmlHttpRequest对象的主要属性：
View Code2、跨浏览器支持
IE7+, Firefox, Chrome, Opera, etc.
IE6, IE5
基于原生Ajax-demo原生ajax发送post请求要带上请求头
jQuery AjaxjQuery其实就是一个JavaScript的类库，其将复杂的功能做了上层封装，使得开发者可以在其基础上写更少的代码实现更多的功能。
注：2.+版本不再支持IE9以下的浏览器
Jquery Ajax-方法
基于JqueryAjax -demo通过ajax返回得到的字符串,可以通过 跨域AJAX由于浏览器存在同源策略机制，同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。 特别的：由于同源策略是浏览器的限制，所以请求的发送和响应是可以进行，只不过浏览器不接受罢了。 浏览器同源策略并不是对所有的请求均制约：
跨域，跨域名访问，如：http://www. 域名向 http://www.域名发送请求。 1、JSONP实现跨域请求 JSONP（JSONP - JSON with Padding是JSON的一种“使用模式”)，利用script标签的src属性（浏览器允许script标签跨域） -- localhost:8889 :
class MainHandler(tornado.web.RequestHandler):
def get(self):
self.write("func([11,22,33,44])")
*******************************************
-- localhost:8888 :
function Jsonp1(){
var tag = document.createElement('script');
tag.src = 'http://localhost:8889/index';
document.head.appendChild(tag);
document.head.removeChild(tag);
}
function func(arg) {
console.log(arg)
}
接着执行了 -- jQuery 实现方式:
 改进版: -- localhost:8889 :
class MainHandler(tornado.web.RequestHandler):
def get(self):
callback = self.get_argument('callback')
self.write("%s([11,22,33,44])"%callback)
此时页面中,访问:
http://localhost:8889/index?callback=xxoo
http://localhost:8889/index?callback=ssss
都可以!
*******************************************
-- localhost:8888 :
function func(arg) {
console.log(arg)
}
function jsonpclick() {
$.ajax({
url:'http://localhost:8889/index',
dataType:'jsonp',
jsonp:'callback',
jsonpCallback:'func',
});
}
代码中相当于发送了: http://localhost:8889/index?callback=func
实例: 江西电视台节目单获取2、CORS 随着技术的发展，现在的浏览器可以支持主动设置从而允许跨域请求， 即：跨域资源共享（CORS，Cross-Origin Resource Sharing） 其本质是设置响应头，使得浏览器允许跨域请求。 * 简单请求 OR 非简单请求
* 简单请求和非简单请求的区别？
* 关于“预检”
基于cors实现AJAX请求: a、支持跨域，简单请求
实例: function corsSimple() {
$.ajax({
url:'http://localhost:8889/index',
type:'post',
data:{'v1':'k1'},
success:function (callback) {
console.log(callback)
}
});
}
***********************************************
-- localhost:8889
def post(self, *args, **kwargs):
self.set_header('Access-Control-Allow-Origin', "http://localhost:8888")
v1 = self.get_argument('v1')
print(v1)
self.write('--post--')
b、支持跨域，复杂请求 由于复杂请求时，首先会发送“预检”请求，如果“预检”成功，则发送真实数据。
--localhost:8889 def options(self, *args, **kwargs): self.set_header('Access-Control-Allow-Methods', "PUT") self.set_header('Access-Control-Allow-Origin', "http://localhost:8888") print('--option--') def put(self, *args, **kwargs): self.set_header('Access-Control-Allow-Origin', "http://localhost:8888") print('--put--') self.write('--put--') *********************************************** --localhost:8888 function corscomplex() { $.ajax({ url:'http://localhost:8889/index', type:'put', data:{'v1':'k1'}, success:function (callback) { console.log(callback) } }); } 如果客户端,加上了自定义请求头,服务器端要加上
实例: --localhost:8889 def options(self, *args, **kwargs): self.set_header('Access-Control-Allow-Methods', "PUT") self.set_header('Access-Control-Allow-Origin', "http://localhost:8888") self.set_header('Access-Control-Allow-Headers', "key1,key2") self.set_header('Access-Control-Max-Age', 10) print('--option--') def put(self, *args, **kwargs): self.set_header('Access-Control-Allow-Origin', "http://localhost:8888") print('--put--') self.write('--put--') *********************************************** --localhost:8888 function corscomplex() { $.ajax({ url:'http://localhost:8889/index', type:'put', headers:{'key1':'xxx'}, data:{'v1':'k1'}, success:function (callback) { console.log(callback) } }); } 控制预检过期时间:
c、跨域传输cookie 在跨域请求中，默认情况下，HTTP Authentication信息，Cookie头以及用户的SSL证书无论在预检请求中或是在实际请求都是不会被发送。 如果想要发送：
--localhost:8889 def options(self, *args, **kwargs): self.set_header('Access-Control-Allow-Methods', "PUT") self.set_header('Access-Control-Allow-Origin', "http://localhost:8888") self.set_header('Access-Control-Allow-Credentials', "true") //必须 print('--option--') def put(self, *args, **kwargs): self.set_header('Access-Control-Allow-Origin', "http://localhost:8888") self.set_header('Access-Control-Allow-Credentials', "true") //必须print(self.cookies) self.set_cookie('k1','kkk') self.write('--put--') *********************************************** --localhost:8888 function corscomplex() { $.ajax({ url:'http://localhost:8889/index', type:'put', data:{'v1':'k1'}, xhrFields:{withCredentials: true}, success:function (callback) { console.log(callback) } }); } d、跨域获取响应头 默认获取到的所有响应头只有基本信息，如果想要获取自定义的响应头，则需要再服务器端设置Access-Control-Expose-Headers。 --localhost:8889 def options(self, *args, **kwargs): self.set_header('Access-Control-Allow-Methods', "PUT") self.set_header('Access-Control-Allow-Origin', "http://localhost:8888") self.set_header('Access-Control-Allow-Headers', "key1,key2") self.set_header('Access-Control-Allow-Credentials', "true") print('--option--') def put(self, *args, **kwargs): self.set_header('Access-Control-Allow-Origin', "http://localhost:8888") self.set_header('Access-Control-Allow-Credentials', "true") self.set_header('bili', "daobidao") //设置响应头 self.set_header('Access-Control-Expose-Headers', "xxoo,bili") //允许发送 print(self.cookies) self.set_cookie('k1','kkk') self.write('--put--') *********************************************** --localhost:8888 function corsRequest() { $.ajax({ url:'http://localhost:8889/index', type:'put', data:{'v1':'k1'}, xhrFields:{withCredentials: true}, success:function (callback,statusText, xmlHttpRequest) { console.log(callback); console.log(xmlHttpRequest.getAllResponseHeaders()); } }); } 示例代码整合:
localhost:8888/index.html
localhost:8889/python
|
|
|
