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