概述1、傳統(tǒng)的Web應(yīng)用
2、AJAX
“偽”AJAX由于HTML標(biāo)簽的iframe標(biāo)簽具有局部加載內(nèi)容的特性，所以可以使用其來(lái)偽造Ajax請(qǐng)求。
 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div> <p>請(qǐng)輸入要加載的地址：<span id="currentTime"></span></p> <p> <input id="url" type="text" /> <input type="button" value="刷新" onclick="LoadPage();"> </p> </div> <div> <h3>加載頁(yè)面位置：</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】對(duì)象來(lái)完成請(qǐng)求的操作，該對(duì)象在主流瀏覽器中均存在(除早起的IE)，Ajax首次出現(xiàn)IE5.5中存在（ActiveX控件）。 1、XmlHttpRequest對(duì)象介紹 XmlHttpRequest對(duì)象的主要方法： 
View CodeXmlHttpRequest對(duì)象的主要屬性：
View Code2、跨瀏覽器支持
IE7+, Firefox, Chrome, Opera, etc.
IE6, IE5
基于原生Ajax-demo原生ajax發(fā)送post請(qǐng)求要帶上請(qǐng)求頭
jQuery AjaxjQuery其實(shí)就是一個(gè)JavaScript的類(lèi)庫(kù)，其將復(fù)雜的功能做了上層封裝，使得開(kāi)發(fā)者可以在其基礎(chǔ)上寫(xiě)更少的代碼實(shí)現(xiàn)更多的功能。
注：2.+版本不再支持IE9以下的瀏覽器
Jquery Ajax-方法
基于JqueryAjax -demo通過(guò)ajax返回得到的字符串,可以通過(guò) 跨域AJAX由于瀏覽器存在同源策略機(jī)制，同源策略阻止從一個(gè)源加載的文檔或腳本獲取或設(shè)置另一個(gè)源加載的文檔的屬性。 特別的：由于同源策略是瀏覽器的限制，所以請(qǐng)求的發(fā)送和響應(yīng)是可以進(jìn)行，只不過(guò)瀏覽器不接受罷了。 瀏覽器同源策略并不是對(duì)所有的請(qǐng)求均制約：
跨域，跨域名訪問(wèn)，如：http://www. 域名向 http://www.域名發(fā)送請(qǐng)求。 1、JSONP實(shí)現(xiàn)跨域請(qǐng)求 JSONP（JSONP - JSON with Padding是JSON的一種“使用模式”)，利用script標(biāo)簽的src屬性（瀏覽器允許script標(biāo)簽跨域） -- 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)
}
接著執(zhí)行了 -- jQuery 實(shí)現(xiàn)方式:
 改進(jìn)版: -- localhost:8889 :
class MainHandler(tornado.web.RequestHandler):
def get(self):
callback = self.get_argument('callback')
self.write("%s([11,22,33,44])"%callback)
此時(shí)頁(yè)面中,訪問(wèn):
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',
});
}
代碼中相當(dāng)于發(fā)送了: http://localhost:8889/index?callback=func
實(shí)例: 江西電視臺(tái)節(jié)目單獲取2、CORS 隨著技術(shù)的發(fā)展，現(xiàn)在的瀏覽器可以支持主動(dòng)設(shè)置從而允許跨域請(qǐng)求， 即：跨域資源共享（CORS，Cross-Origin Resource Sharing） 其本質(zhì)是設(shè)置響應(yīng)頭，使得瀏覽器允許跨域請(qǐng)求。 * 簡(jiǎn)單請(qǐng)求 OR 非簡(jiǎn)單請(qǐng)求
* 簡(jiǎn)單請(qǐng)求和非簡(jiǎn)單請(qǐng)求的區(qū)別？
* 關(guān)于“預(yù)檢”
基于cors實(shí)現(xiàn)AJAX請(qǐng)求: a、支持跨域，簡(jiǎn)單請(qǐng)求
實(shí)例: 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、支持跨域，復(fù)雜請(qǐng)求 由于復(fù)雜請(qǐng)求時(shí)，首先會(huì)發(fā)送“預(yù)檢”請(qǐng)求，如果“預(yù)檢”成功，則發(fā)送真實(shí)數(shù)據(jù)。
--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) } }); } 如果客戶端,加上了自定義請(qǐng)求頭,服務(wù)器端要加上
實(shí)例: --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) } }); } 控制預(yù)檢過(guò)期時(shí)間:
c、跨域傳輸cookie 在跨域請(qǐng)求中，默認(rèn)情況下，HTTP Authentication信息，Cookie頭以及用戶的SSL證書(shū)無(wú)論在預(yù)檢請(qǐng)求中或是在實(shí)際請(qǐng)求都是不會(huì)被發(fā)送。 如果想要發(fā)送：
--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、跨域獲取響應(yīng)頭 默認(rèn)獲取到的所有響應(yīng)頭只有基本信息，如果想要獲取自定義的響應(yīng)頭，則需要再服務(wù)器端設(shè)置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") //設(shè)置響應(yīng)頭 self.set_header('Access-Control-Expose-Headers', "xxoo,bili") //允許發(fā)送 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
|
|
|
來(lái)自： highoo > 《數(shù)據(jù)分析》
