活到老學(xué)到老學(xué)習(xí)AJAX跨域(三)
學(xué)習(xí)AJAX其實(shí)有個(gè)很重要的應(yīng)用,就是為了執(zhí)行另外幾個(gè)站點(diǎn)的ASP,返回結(jié)果。
真正用起來(lái),發(fā)現(xiàn)2個(gè)問(wèn)題,一向做DELPHI,接觸ASP不多的我,的確問(wèn)題大堆。
第一個(gè)問(wèn)題:
VBS的變量傳遞給JS。。。通過(guò)學(xué)習(xí)發(fā)現(xiàn)很簡(jiǎn)單的。。。
先看下我大體實(shí)現(xiàn)方法:
<% dim sSrv1Link sSrv1Link = "http://www.XXX.org/test1.asp?U=TESTUSER&M=111&E=222" %> <script type="text/javascript"> function synSvrData(str) { var xmlhttp; if (str.length==0) { document.getElementById("txtHint").innerHTML=""; return; } //創(chuàng)建對(duì)象 if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } //處理ONREADYSTATECHANGE事件,我們這里只相應(yīng)服務(wù)器反饋成功的 xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET",str,true); xmlhttp.send(); } </script>
上面這段代碼的意思就是用AJAX實(shí)現(xiàn)訪問(wèn)一個(gè)ASP,并返回結(jié)果。
<script type="text/javascript"> var jsSvr='<%=sSrv1Link%>'; synSvrData(jsSvr) </script>
看到?jīng)]?這個(gè)才是關(guān)鍵:
var jsSvr='<%=sSrv1Link%>';
js使用VBS變量,為什么要這樣?因?yàn)榧用艽切┒际荲BS生成的。
本地測(cè)試OK,現(xiàn)在把訪問(wèn)文件換成其他服務(wù)器上的。。。
sSrv1Link = "http://www.XXX2.org/test1.asp?U=TESTUSER&M=111&E=222"
意思就是跨域?。。?br />
這時(shí)候問(wèn)題來(lái)了。。。代碼執(zhí)行后無(wú)返回,后來(lái)發(fā)現(xiàn)不是不返回,是XXX2服務(wù)器不響應(yīng)!
發(fā)現(xiàn)問(wèn)題出現(xiàn)在 test1.asp 這個(gè)文件上?。?!對(duì)!你沒(méi)看錯(cuò)!
跨域請(qǐng)求,顧名思義,就是一個(gè)站點(diǎn)中的資源去訪問(wèn)另外一個(gè)不同域名站點(diǎn)上的資源。
以下兩端摘抄:
隨著 Web2.0 和 SNS 的興起,Web 應(yīng)用對(duì)跨域訪問(wèn)的需求也越來(lái)越多,但是,在腳本中進(jìn)行跨域請(qǐng)求是受安全性限制的,Web 開(kāi)發(fā)人員迫切需要提供一種更安全、方便的跨域請(qǐng)求方式來(lái)融合(Mashup)自己的 Web 應(yīng)用。這樣做的一個(gè)好處就是可以將請(qǐng)求分?jǐn)偟讲煌姆?wù)器,減輕單個(gè)服務(wù)器壓力以提高響應(yīng)速度;另外一個(gè)好處是可以將不同的業(yè)務(wù)邏輯分布到不同的服務(wù)器上以降低負(fù)載。
值得慶幸的是,跨域請(qǐng)求的標(biāo)準(zhǔn)已經(jīng)出臺(tái),主流瀏覽器也已經(jīng)實(shí)現(xiàn)了這一標(biāo)準(zhǔn)。W3C 工作組中的 Web Applications Working Group(Web 應(yīng)用工作組)發(fā)布了一個(gè) Cross-Origin Resource Sharing(跨域資源共享,該規(guī)范地址:http://www.w3.org/TR/access-control/和http://dev.w3.org/2006/waf/access-control/) 推薦規(guī)范來(lái)解決跨域請(qǐng)求的問(wèn)題。該規(guī)范提供了一種更安全的跨域數(shù)據(jù)交換方法。具體規(guī)范的介紹可以訪問(wèn)上面提供的網(wǎng)站地址。值得注意的是:該規(guī)范只能應(yīng)用在類似 XMLHttprequest 這樣的 API 容器內(nèi)。IE8、Firefox 3.5 及其以后的版本、Chrome瀏覽器、Safari 4 等已經(jīng)實(shí)現(xiàn)了 Cross-Origin Resource Sharing 規(guī)范,已經(jīng)可以進(jìn)行跨域請(qǐng)求了。Cross-Origin Resource Sharing 的工作方式是通過(guò)添加 HTTP 頭的方法來(lái)判斷哪些資源允許 Web 瀏覽器訪問(wèn)該域名下的信息。然而,對(duì)于那些 HTTP 請(qǐng)求導(dǎo)致用戶數(shù)據(jù)產(chǎn)生副作用的請(qǐng)求方法(特別是對(duì)于除了GET、某些 MIME 類型的 POST 之外的 HTTP方法),該規(guī)范要求瀏覽器對(duì)請(qǐng)求進(jìn)行“預(yù)先驗(yàn)”,通過(guò)發(fā)送 HTTP 的 OPTIONS 請(qǐng)求頭詢問(wèn)服務(wù)器有哪些支持的方法,在征得服務(wù)器的同意后,再使用實(shí)際的 HTTP 請(qǐng)求方法發(fā)送實(shí)際的請(qǐng)求。服務(wù)器也可以通知客戶端是否需要將驗(yàn)證信息(如 Cookie 和 HTTP Authentication 數(shù)據(jù))隨同請(qǐng)求一起發(fā)送。
看了這么多,其實(shí)實(shí)現(xiàn)一句話:就是添加HTTP頭!
先看看我們做測(cè)試用的原來(lái)的 test1.asp
<% sUser=request.QueryString("U") response.write("XXX.org: " & sUser) %>
下面添加跨域訪問(wèn):
<% response.AddHeader "Access-Control-Allow-Origin", "http://www.XXX2.org" sUser=request.QueryString("U") response.write("XXX2.org: " & sUser) %>
response.AddHeader "Access-Control-Allow-Origin", "http://www.XXX2.org"對(duì)了,就這么一句話,跨域完成了,你再測(cè)試下,是不是OK了?
- 利用iframe實(shí)現(xiàn)ajax跨域通信的實(shí)現(xiàn)原理(圖解)
- 完美解決AJAX跨域問(wèn)題
- jquery ajax跨域解決方法(json方式)
- jquery的ajax和getJson跨域獲取json數(shù)據(jù)的實(shí)現(xiàn)方法
- ajax跨域請(qǐng)求js拒絕訪問(wèn)的解決方法
- jquery+ajax實(shí)現(xiàn)跨域請(qǐng)求的方法
- 服務(wù)端配置實(shí)現(xiàn)AJAX跨域請(qǐng)求
- 解決ajax跨域請(qǐng)求數(shù)據(jù)cookie丟失問(wèn)題
- Ajax實(shí)現(xiàn)跨域訪問(wèn)的三種方法
相關(guān)文章
Ajax+php實(shí)現(xiàn)商品分類三級(jí)聯(lián)動(dòng)
這篇文章主要介紹了Ajax+php實(shí)現(xiàn)商品分類三級(jí)聯(lián)動(dòng),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08js結(jié)合json實(shí)現(xiàn)ajax簡(jiǎn)單實(shí)例
這篇文章主要為大家詳細(xì)介紹了js結(jié)合json實(shí)現(xiàn)ajax簡(jiǎn)單實(shí)例的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05用ajax實(shí)現(xiàn)在單擊事件下加載一個(gè)DIV層的腳本
用ajax實(shí)現(xiàn)在單擊事件下加載一個(gè)DIV層的腳本...2007-11-11ajax、axios和fetch之間優(yōu)缺點(diǎn)重點(diǎn)對(duì)比總結(jié)
今天被問(wèn)到用沒(méi)用過(guò)ajax axios,我回答經(jīng)常用axios,但ajax用的比較少,下面這篇文章主要給大家介紹了關(guān)于ajax、axios和fetch之間優(yōu)缺點(diǎn)重點(diǎn)對(duì)比總結(jié)的相關(guān)資料,需要的朋友可以參考下2022-12-12如何解決Ajax的content-download時(shí)間過(guò)慢問(wèn)題
這篇文章主要介紹了Ajax的content-download時(shí)間過(guò)慢問(wèn)題的解決方法及思考過(guò)程,本文通過(guò)事件背景,過(guò)程分析,給大家介紹的非常詳細(xì),需要的朋友參考下吧2018-04-04