-
處理跨域方法三
HTML5提供的XMLHttpRequest Level2已經(jīng)實(shí)現(xiàn)了跨域訪問以及其他的一些新功能。
不足:IE10以下的版本都不支持。
在服務(wù)器端做一些小小的改造即可:
header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods:POST,GET');
查看全部 -
處理跨域方式——JSONP
方法二:JSONP可用于解決主流瀏覽器的GET請求的跨域數(shù)據(jù)訪問問題。
它的原理:在某個(gè)域名(www.aaa.com)的頁面中,聲明如下的js代碼
<script>
function jsonp(json){
alert(json["name"]);
}
</script>
然后在該頁面中引入另外一個(gè)域名的js,也就是說script標(biāo)簽,它是可以像不同的域名提交HTTP請求的,引入的該js中會(huì)調(diào)用第一個(gè)域名中的js方法,也就是a域名去聲明,b域名去調(diào)用,這樣處理就和XMLHttpRequest對(duì)象沒有太大關(guān)系了,只是借助了script這樣一個(gè)標(biāo)簽節(jié)點(diǎn),它可以跨域訪問,jQuery的ajax方法本身就支持JSONP處理方式。
查看全部 -
介紹跨域的基本概念及常見的解決方法。
處理跨域方式-代理
一個(gè)域名地址的組成:
協(xié)議:http://
子域名:www
主域名:abc.com
端口號(hào):8080
請求資源地址:scripts/jquery.js。
當(dāng)協(xié)議、子域名、主域名、端口號(hào)中任意一個(gè)不相同時(shí),都算作不同域。
不同域之間相互請求資源、就算做“跨域”
比如:http://www.abc.com/index.html請求http://www.efg.com/service.php。
案例中把jQuery的ajax的請求地址改為一個(gè)域名地址,修改之后再次點(diǎn)擊查詢,發(fā)生錯(cuò)誤,服務(wù)器返回錯(cuò)誤0,代表請求沒成功,通過提示顯示XMLHttpRequest不能加載這樣的地址,提示說沒有訪問權(quán)限,不允許訪問。
? ?
默認(rèn)端口號(hào)是80,默認(rèn)協(xié)議是HTTP協(xié)議。
主域名前的子域名可以有很多級(jí)(一級(jí)、二級(jí)、三級(jí))如下圖
處理跨域方法一:代理(當(dāng)一個(gè)網(wǎng)站比較大時(shí),總是會(huì)跨域來處理)
最常見的方法:通過在同域名的web服務(wù)器端創(chuàng)建一個(gè)代理。
北京服務(wù)器:(域名:www.beijing.com?)
上海服務(wù)器:(域名:www.shanghai.com)
比如在北京的web服務(wù)器的后臺(tái)
(www.beijing.com/proxy-shanghaiservice.php)來調(diào)用上海服務(wù)器(www.shanghai.com/service.php)的服務(wù),然后再把相應(yīng)結(jié)果返回給前端,這樣前端調(diào)用北京同域名的服務(wù)就和調(diào)用上海的服務(wù)效果相同了。
查看全部 -
”同步“就好比:你去外地上學(xué)(人生地不熟),突然生活費(fèi)不夠了;此時(shí)你決定打電話回家,通知家里轉(zhuǎn)生活費(fèi)過來,可是當(dāng)你撥出電話時(shí),對(duì)方一直處于待接聽狀態(tài)(即:打不通,聯(lián)系不上),為了拿到生活費(fèi),你就不停的oncall、等待,最終可能不能及時(shí)要到生活費(fèi),導(dǎo)致你今天要做的事都沒有完成,而白白花掉了時(shí)間。
“異步”就是:在你打完電話發(fā)現(xiàn)沒人接聽時(shí),猜想:對(duì)方可能在忙,暫時(shí)無法接聽電話,所以你發(fā)了一條短信(或者語音留言,亦或是其他的方式)通知對(duì)方后便忙其他要緊的事了;這時(shí)你就不需要持續(xù)不斷的撥打電話,還可以做其他事情;待一定時(shí)間后,對(duì)方看到你的留言便回復(fù)響應(yīng)你,當(dāng)然對(duì)方可能轉(zhuǎn)錢也可能不轉(zhuǎn)錢。但是整個(gè)一天下來,你還做了很多事情。 或者說你找室友臨時(shí)借了一筆錢,又開始happy的上學(xué)時(shí)光了。
簡而言之,言而總之:同步就是我強(qiáng)依賴你(對(duì)方),我必須等到你的回復(fù),才能做出下一步響應(yīng)。即我的操作(行程)是順序執(zhí)行的,中間少了哪一步都不可以,或者說中間哪一步出錯(cuò)都不可以,類似于編程中程序被解釋器順序執(zhí)行一樣;同時(shí)如果我沒有收到你的回復(fù),我就一直處于等待、也就是阻塞的狀態(tài)。 異步則相反,我并不強(qiáng)依賴你,我對(duì)你響應(yīng)的時(shí)間也不敏感,無論你返回還是不返回,我都能繼續(xù)運(yùn)行;你響應(yīng)并返回了,我就繼續(xù)做之前的事情,你沒有響應(yīng),我就做其他的事情。也就是說我不存在等待對(duì)方的概念,我就是非阻塞的。
從上面的例子來看:同步似乎等價(jià)于阻塞,異步則等價(jià)于非阻塞。其實(shí)有些狹義,但不可否認(rèn)的是,在一定情況下,確實(shí)可以這么認(rèn)為;因?yàn)橥揭欢ù嬖谥枞麪顟B(tài),而異步一定不存在非阻塞的狀態(tài)。 但是不是就是說 同步調(diào)用 == 阻塞調(diào)用呢?然并不是;阻塞和非阻塞強(qiáng)調(diào)的是程序在等待調(diào)用結(jié)果(消息,返回值)時(shí)的狀態(tài). ?阻塞調(diào)用是指調(diào)用結(jié)果返回之前,當(dāng)前線程會(huì)被掛起。調(diào)用線程只有在得到結(jié)果之后才會(huì)返回。非阻塞調(diào)用指在不能立刻得到結(jié)果之前,該調(diào)用不會(huì)阻塞當(dāng)前線程。 對(duì)于同步調(diào)用來說,很多時(shí)候當(dāng)前線程還是激活的狀態(tài),只是從邏輯上當(dāng)前函數(shù)沒有返回而已,即同步等待時(shí)什么都不干,白白占用著資源。同步和異步強(qiáng)調(diào)的是消息通信機(jī)制 (synchronous communication/ asynchronous communication)。所謂同步,就是在發(fā)出一個(gè)"調(diào)用"時(shí),在沒有得到結(jié)果之前,該“調(diào)用”就不返回。但是一旦調(diào)用返回,就得到返回值了。換句話說,就是由“調(diào)用者”主動(dòng)等待這個(gè)“調(diào)用”的結(jié)果。而異步則是相反,"調(diào)用"在發(fā)出之后,這個(gè)調(diào)用就直接返回了,所以沒有返回結(jié)果。換句話說,當(dāng)一個(gè)異步過程調(diào)用發(fā)出后,調(diào)用者不會(huì)立刻得到結(jié)果。而是在"調(diào)用"發(fā)出后,"被調(diào)用者"通過狀態(tài)、通知來通知調(diào)用者,或通過回調(diào)函數(shù)處理這個(gè)調(diào)用。
查看全部 -
實(shí)際中,不經(jīng)常使用JavaScript+Ajax實(shí)現(xiàn)異步請求,而是使用jQuery+Ajax實(shí)現(xiàn)異步請求。
原因:jQuery封裝了Ajax異步請求的方法,這樣就不用再關(guān)注(JavaScript+Ajax——XMLHttpRequest)瀏覽器兼容性、不同的實(shí)現(xiàn)等問題,簡化了操作。
jQuery實(shí)現(xiàn)Ajax:提供了ajax方法,jQuery的ajax方法提供了很多設(shè)定值,通過一些常用的設(shè)定值就可以完成一個(gè)異步請求,并且可以得知請求是否成功或者失敗。
語法:jQuery.ajax({settings})
常用設(shè)定值:
type:請求動(dòng)作,POST還是GET,默認(rèn)為GET。
url:請求地址。
data:是一個(gè)對(duì)象,連同請求發(fā)送到服務(wù)器的數(shù)據(jù),主要是POST請求進(jìn)行使用。
dataType:預(yù)期服務(wù)器返回的數(shù)據(jù)類型。如果不指定,jQuery將自動(dòng)根據(jù)HTTP包MIME信息來判斷,一般我們采用JSON格式,可以設(shè)置為"json"。
success:是一個(gè)方法,Ajax請求成功后的回調(diào)函數(shù)。success的方法它的參數(shù)會(huì)包含成功代碼的字符串,服務(wù)器的響應(yīng)值等。
error:是一個(gè)方法,請求失?。ㄒ簿褪欠?wù)器發(fā)生了錯(cuò)誤)調(diào)用了此函數(shù)。這個(gè)函數(shù)的參數(shù)會(huì)傳入XMLHttpRequest對(duì)象。
使用jQuery+Ajax實(shí)現(xiàn)異步請求
頁面中引入jQuery庫,并對(duì)jQuery進(jìn)行初始化(界面載入完成后,執(zhí)行內(nèi)部一些操作,相當(dāng)于window.onload,和window不同的是不用等到圖片加載完成之后在執(zhí)行,而且ready方法可以出現(xiàn)多次
)
查看全部 -
代碼演示圖
查看全部 -
JavaScript解析JSON的兩種方式:
方式一:eval。(在代碼中使用eval是很危險(xiǎn)的!特別是用它執(zhí)行第三方的JSON數(shù)據(jù)<其中可能包含惡意代碼>時(shí))盡可能使用JSON.parse()方法解析字符串本身,該方法還可以捕捉JSON中的語法錯(cuò)誤。
方式二:JSON.parse
例如:在JSON數(shù)據(jù)中age對(duì)應(yīng)的value為alert(123),使用eval解析,不光解析JSON中字符串,還會(huì)解析JSON中方法(該舉例中會(huì)先彈出123提示框,然后再執(zhí)行名字提示框)。而使用JSON.parse(對(duì)象),則會(huì)報(bào)JSON語法錯(cuò)誤。
JSON格式化和校驗(yàn)工具(JSONLint)
地址:jsonlint.com
查看全部 -
跨域訪問的幾點(diǎn): 主域名、子域名、端口號(hào)不同 解決跨域訪問的方式: 后臺(tái)業(yè)務(wù)開發(fā)代理接口 jsonp-get請求 xhr2-服務(wù)端代碼增加兩個(gè)header配置查看全部
-
JSON的概念、格式語法及操作。
查看全部 -
PHP:一種創(chuàng)建動(dòng)態(tài)交互性站點(diǎn)的服務(wù)器端腳本語言。
查看全部 -
Ajax-XMLHttpRequest取得響應(yīng)
responseText:獲得字符串形式的響應(yīng)數(shù)據(jù)。
responseXML:獲得XML形式的響應(yīng)數(shù)據(jù)。
status和statusText:獲取服務(wù)器以數(shù)字和文本形式返回HTTP狀態(tài)碼。
getAllResponseHeader():獲取所有的響應(yīng)報(bào)頭。
getResourceHeader():查詢響應(yīng)中的某個(gè)字段的值,需要傳參。
readyState屬性:它是XHR對(duì)象的屬性,通過它可以知道瀏覽器的請求與服務(wù)器之間的變化,通過它可以知道服務(wù)器是否響應(yīng)成功。
監(jiān)聽readyState:通過XHR對(duì)象的onreadystatechange屬性的變化每次觸發(fā)這個(gè)函數(shù),如果request.readyState===4&&request.status===200代表響應(yīng)成功,且請求成功。
典型的XMLHttpRequest對(duì)象建立的異步請求:
步驟1:var request=new XMLHttpRequest();
步驟2:調(diào)用request.open("GET","get.php",true);
步驟3:調(diào)用request.send();
步驟4:監(jiān)聽服務(wù)器的響應(yīng)狀態(tài),是否做出了響應(yīng)
request.onreadystatechange=function(){
if(request.readyState===4&&request.status===200){
//做一些事情,比如獲取服務(wù)器的響應(yīng)內(nèi)容,頁面上做一些呈現(xiàn)
?request.responseText
}
}
查看全部 -
Ajax-XMLHttpRequest發(fā)送請求
【一】open(method,url,async)
method:HTTP請求的發(fā)送方式(GET、POST),不區(qū)分大小寫。
url:HTTP請求的發(fā)送地址。
async:代表該請求是同步還是異步的,一般使用異步請求,也就是true,默認(rèn)值為true。
【二】send(string):把請求發(fā)送到服務(wù)器,使用GET請求時(shí)所有請求沒有主體,所有參數(shù)都會(huì)拼到open方法的url中,所以GET請求時(shí)參數(shù)可以不填寫,如果POST請求就必須填寫該參數(shù),不然就沒有意義(可以理解為GET方式請求是通過URL傳遞信息,所以參數(shù)都在OPEN方法的url中,而POST方式傳遞信息不能使用url,所以就需要在send方法里傳入數(shù)據(jù))。
案例:使用POST請求時(shí),一般send(string)需要傳入?yún)?shù),這里第三個(gè)例子,使用XHR對(duì)象.setRequestHeader("Content-type",application/x-www-form-urlencoded");該方法作用是告訴Web服務(wù)器發(fā)送的是一個(gè)表單,該方法一般在open方法和send方法之間。
查看全部 -
AJAX-HTTP請求
HTTP:計(jì)算機(jī)通過網(wǎng)絡(luò)進(jìn)行通信的規(guī)則,瀏覽器通過它才可以發(fā)送請求信息達(dá)到服務(wù)器。
無狀態(tài)的協(xié)議:不建立持久的連接,也就是服務(wù)端不保存連接的相關(guān)信息,瀏覽器與服務(wù)器之間請求和響應(yīng)之后,連接就會(huì)關(guān)閉了。
一個(gè)完整的HTTP請求過程,通常有下面的7個(gè)步驟:
一個(gè)HTTP請求一般由四部分組成:一般來說請求頭和請求體之間有一個(gè)空行,這個(gè)空行代表請求頭已經(jīng)結(jié)束了,接下來的內(nèi)容代表請求體。
HTTP請求所包含的內(nèi)容:
HTTP的GET請求和POST請求:
GET:
一般用于信息的獲?。ㄋ悄J(rèn)的HTTP請求的方法,一般用來查詢操作)。
使用URL傳遞參數(shù)(發(fā)送的信息對(duì)任何人都是可見的)。
對(duì)發(fā)送信息的數(shù)量有限制,一般在2000個(gè)字符。
POST:
一般用于修改服務(wù)器上的資源。(數(shù)據(jù)會(huì)被嵌入HTTP的請求體,一般用于增、刪、改操作)
發(fā)送信息的數(shù)量無限制。
一個(gè)HTTP響應(yīng)一般由三部分組成:
HTTP響應(yīng)內(nèi)容:
HTTP響應(yīng)狀態(tài)碼:
查看全部 -
Ajax-XMLHttpRequest對(duì)象創(chuàng)建
【1】XMLHttpRequest對(duì)象的實(shí)例化:var request=new XMLHttpRequest();(IE5和IE6不支持XHR對(duì)象)
如果Web項(xiàng)目想兼容更早的IE5和IE6,只需要判斷window是否支持XHR對(duì)象,如果沒有就new 一個(gè)ActiveXObject("Microsoft.XMLHTTP");
查看全部 -
Ajax同步和異步
同步:客戶端發(fā)送請求給服務(wù)器,服務(wù)器進(jìn)行處理,此時(shí)客戶端處于等待,服務(wù)器端響應(yīng),客戶端頁面載入,如果客戶端再次發(fā)送請求,在服務(wù)端處理的時(shí)候,客戶端總是在等待。
異步:客戶端局部發(fā)送請求給服務(wù)端,此時(shí)服務(wù)端進(jìn)行處理,但是客戶端不會(huì)進(jìn)行等待,仍然可以進(jìn)行操作,服務(wù)端響應(yīng)后,客戶端進(jìn)行頁面載入。
異步的實(shí)現(xiàn):通過XMLHttpRequest對(duì)象可以實(shí)現(xiàn)后臺(tái)和服務(wù)器交換數(shù)據(jù),而且這個(gè)數(shù)據(jù)的交換可以在不重新加載整個(gè)頁面進(jìn)行,并且可以對(duì)網(wǎng)頁進(jìn)行局部的刷新。
異步實(shí)現(xiàn)內(nèi)容:
運(yùn)用HTML和CSS來實(shí)現(xiàn)頁面,表達(dá)信息;
運(yùn)用XMLHttpRequest和Web服務(wù)器進(jìn)行數(shù)據(jù)的異步交換;
運(yùn)用JavaScript操作DOM,實(shí)現(xiàn)動(dòng)態(tài)局部刷新;
查看全部
舉報(bào)