JS實現AJAX、JSONP及DOM加載完成時間，超時，HTML5 postMessage傳輸與POST跨域通信
http://www.cnblogs.com/qmtx3/p/5665140.html
中止jq中的ajax請求用abort()函數
<html>
<head>
<mce:script type="text/javascript"><!--
var currentAjax = null;
function startAjax(){
//方法就是將XHR對象指向currentAjax，再調用currentAjax的.abort()來停止請求
currentAjax = $.ajax({
type:'POST',
beforeSend:function(){},
url:'test.php',
data:'username=xxx',
dataType:'JSON',
error:function(){alert('error')},
success:function(data){alert(data)}
});
}
function stopAjax(){
//如若上一次AJAX請求未完成，則停止請求
if(currentAjax) {currentAjax.abort();}
}
// --></mce:script>
</head>
<body>
<input type="button" value="觸發請求" onclick="startAjax()" />
<input type="button" value="中止請求" onclick="stopAjax()" />
</body>
</html> 複製代碼
JSONP 超時：
設置超時標誌位flag=false，當超時後將flag=true;
異步加載JS文件並執行回調函數：
function loadJS(src, callback){
var script = document.createElement('script');
var head = document.getElementsByTagName('head')[0];
var loaded;
script.src = src;
if(typeof callback === 'function'){
script.onload = script.onreadystatechange = function(){
if(!loaded && (!script.readyState || /loaded|complete/.test(script.readyState))){
script.onload = script.onreadystatechange = null;
loaded = true;
callback();
}
}
}
head.appendChild(script);
}
加setTimeout 超時後，當超時後將標誌位設爲true，在onload 裏面判斷flag爲true的時候直接return 掉，
後面的回調函數就不會運行了，JOSNP也就失去了做用！
複製代碼
準備上傳javascript
//格式化參數
function formatParams(data) {
var arr = [];
for (var name in data) {
arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
}
arr.push(("v=" + Math.random()).replace("."));
return arr.join("&");
}
複製代碼
1、JS原生AJAX
ajax：一種請求數據的方式，不須要刷新整個頁面；
ajax的技術核心是 XMLHttpRequest 對象；
ajax 請求過程：建立 XMLHttpRequest 對象、鏈接服務器、發送請求、接收響應數據；php
下面簡單封裝一個函數，以後稍做解釋html
ajax({
url: "./TestXHR.aspx", //請求地址
type: "POST", //請求方式
data: { name: "super", age: 20 }, //請求參數
dataType: "json",
success: function (response, xml) {
// 此處放成功後執行的代碼
},
fail: function (status) {
// 此處放失敗後執行的代碼
}
});
function ajax(options) {
options = options || {};
options.type = (options.type || "GET").toUpperCase();
options.dataType = options.dataType || "json";
var params = formatParams(options.data);
//建立 - 非IE6 - 第一步
if (window.XMLHttpRequest) {
var xhr = new XMLHttpRequest();
} else { //IE6及其如下版本瀏覽器
var xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
//接收 - 第三步
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
var status = xhr.status;
if (status >= 200 && status < 300) {
options.success && options.success(xhr.responseText, xhr.responseXML);
} else {
options.fail && options.fail(status);
}
}
}
//鏈接 和 發送 - 第二步
if (options.type == "GET") {
xhr.open("GET", options.url + "?" + params, true);
xhr.send(null);
} else if (options.type == "POST") {
xhr.open("POST", options.url, true);
//設置表單提交時的內容類型
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(params);
}
}
//格式化參數
function formatParams(data) {
var arr = [];
for (var name in data) {
arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
}
arr.push(("v=" + Math.random()).replace("."));
return arr.join("&");
}複製代碼
一、建立java
1.一、IE7及其以上版本中支持原生的 XHR 對象，所以能夠直接用： var oAjax = new XMLHttpRequest();jquery
1.二、IE6及其以前的版本中，XHR對象是經過MSXML庫中的一個ActiveX對象實現的。有的書中細化了IE中此類對象的三種不一樣版本，即MSXML2.XMLHttp、MSXML2.XMLHttp.3.0 和 MSXML2.XMLHttp.6.0；我的感受太麻煩，能夠直接使用下面的語句建立： var oAjax=new ActiveXObject(’Microsoft.XMLHTTP’);git
二、鏈接和發送web
2.一、open()函數的三個參數：請求方式、請求地址、是否異步請求(同步請求的狀況極少，至今還沒用到過)；ajax
2.二、GET 請求方式是經過URL參數將數據提交到服務器的，POST則是經過將數據做爲 send 的參數提交到服務器；json
2.三、POST 請求中，在發送數據以前，要設置表單提交的內容類型；跨域
2.四、提交到服務器的參數必須通過 encodeURIComponent() 方法進行編碼，實際上在參數列表」key=value」的形式中，key 和 value 都須要進行編碼，由於會包含特殊字符。每次請求的時候都會在參數列表中拼入一個 「v=xx」 的字符串，這樣是爲了拒絕緩存，每次都直接請求到服務器上。
encodeURI() ：用於整個 URI 的編碼，不會對自己屬於 URI 的特殊字符進行編碼，
如冒號、正斜槓、問號和井號；其對應的解碼函數 decodeURI()；
encodeURIComponent() ：用於對 URI 中的某一部分進行編碼，
會對它發現的任何非標準字符進行編碼；
其對應的解碼函數 decodeURIComponent()；
複製代碼
三、接收
3.一、接收到響應後，響應的數據會自動填充XHR對象，相關屬性以下
responseText：響應返回的主體內容，爲字符串類型；
responseXML：若是響應的內容類型是 「text/xml」 或 「application/xml」，這個屬性中將保存着相應的xml 數據，是 XML 對應的 document 類型；
status：響應的HTTP狀態碼；
statusText：HTTP狀態的說明；
3.二、XHR對象的readyState屬性表示請求/響應過程的當前活動階段，這個屬性的值以下
0-未初始化，還沒有調用open()方法；
1-啓動，調用了open()方法，未調用send()方法；
2-發送，已經調用了send()方法，未接收到響應；
3-接收，已經接收到部分響應數據；
4-完成，已經接收到所有響應數據；
只要 readyState 的值變化，就會調用 readystatechange 事件，(其實爲了邏輯上通順，能夠把readystatechange放到send以後，由於send時請求服務器，會進行網絡通訊，須要時間，在send以後指定readystatechange事件處理程序也是能夠的，我通常都是這樣用，但爲了規範和跨瀏覽器兼容性，仍是在open以前進行指定吧)。
3.三、在readystatechange事件中，先判斷響應是否接收完成，而後判斷服務器是否成功處理請求，xhr.status 是狀態碼，狀態碼以2開頭的都是成功，304表示從緩存中獲取，上面的代碼在每次請求的時候都加入了隨機數，因此不會從緩存中取值，故該狀態不需判斷。
四、ajax請求是不能跨域的！
2、JSONP跨域
JSONP(JSON with Padding) 是一種跨域請求方式。主要原理是利用了script 標籤能夠跨域請求的特色，由其 src 屬性發送請求到服務器，服務器返回 js 代碼，網頁端接受響應，而後就直接執行了，這和經過 script 標籤引用外部文件的原理是同樣的。
JSONP由兩部分組成：回調函數和數據，回調函數通常是由網頁端控制，做爲參數發往服務器端，服務器端把該函數和數據拼成字符串返回。
好比網頁端建立一個 script 標籤，並給其 src 賦值爲 www.superfiresun.com/json/?callb… 此時網頁端就發起一個請求。服務端將要返回的數據拼好最爲函數的參數傳入，服務端返回的數據格式相似」process({‘name’:’superfiresun’})」，網頁端接收到了響應值，由於請求者是 script，因此至關於直接調用 process 方法，而且傳入了一個參數。
單看響應返回的數據，JSONP 比 ajax 方式就多了一個回調函數。
function jsonp(options) {
options = options || {};
if (!options.url || !options.callback) {
throw new Error("參數不合法");
}
//建立 script 標籤並加入到頁面中
var callbackName = ('jsonp_' + Math.random()).replace(".", "");
var oHead = document.getElementsByTagName('head')[0];
options.data[options.callback] = callbackName;
var params = formatParams(options.data);
var oS = document.createElement('script');
oHead.appendChild(oS);
//建立jsonp回調函數
window[callbackName] = function (json) {
oHead.removeChild(oS);
clearTimeout(oS.timer);
window[callbackName] = null;
options.success && options.success(json);
};
//發送請求
oS.src = options.url + '?' + params;
//超時處理
if (options.time) {
oS.timer = setTimeout(function () {
window[callbackName] = null;
oHead.removeChild(oS);
options.fail && options.fail({ message: "超時" });
}, time);
}
};
//格式化參數
function formatParams(data) {
var arr = [];
for (var name in data) {
arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[i]));
}
return arr.join('&');
} 複製代碼
一、由於 script 標籤的 src 屬性只在第一次設置的時候起做用，致使 script 標籤無法重用，因此每次完成操做以後要移除；
二、JSONP這種請求方式中，參數依舊須要編碼；
三、若是不設置超時，就沒法得知這次請求是成功仍是失敗；
四、調用方法
jsonp({
url:"http://www.baidu.com",
callback:"callback", //跟後臺協商的接收回調名
data:{id:"1000120"},
success:function(json){
alert("jsonp_ok");
},
fail:function(){
alert("fail");
},
time:10000
}) 複製代碼
3、模擬JQuery中的ready()事件
一、
對於不支持該事件的瀏覽器，可使用以下代碼：
123
DOMContentLoaded 事件只能經過 DOM2 級方式添加，即採用addEventListener()/attachEvent() 方式添加纔可以使用。事件對象不會提供任何額外信息。
二、
IE爲DOM文檔中的某些部分(區別於 XHR 對象的 readystatechange 事件)提供了該事件，這個事件的目的是提供與文檔或元素的加載狀態有關的信息，但這個事件的行爲有時候也很難預料。支持該事件的對象都有一個readyState屬性，注意，不是 event 事件對象。IE、Firefox4+和Opera 支持該事件。
「uninitialized」 - 未初始化：對象存在但還沒有初始化；
「loading」 - 正在加載：對象正在加載數據；
「loaded」 - 加載完畢，對象加載數據完畢；
「interactive」 - 交互：能夠操做對象了，但尚未徹底加載；
「complete」 - 完成：對象已經加載完成；
2.一、並不是全部的對象都會經歷readyState的這幾個階段，若是這個階段不適用某個對象，則該對象徹底可能跳過該階段，並無規定哪一個階段適用於哪一個對象。這意味着 readystatechange 事件常常會少於4次，相對應的 readyState 屬性值也不是連續的。
2.二、對於 document 而言，interactive 和 complete 階段會在於 DOMContentLoaded 大體相同的時刻觸發 readystatechange 事件；
load 事件和 readystatechange 事件的觸發順序會因頁面的外部資源的多少而變化，也就是說，readystatechange 事件並不會一直在 load 事件以前執行。外部資源越多，對 readystatechange 事件就越有利。
interactive 和 complete 的順序也是不一致的，誰都有可能先執行，引用的外部資源越多，對交互階段越有利。因此爲了儘量早的執行代碼，兩個狀態要同時判斷。
三、doScroll
IE5.5+支持，當頁面中有滾動條時，能夠用 doScroll(「right」)/doScroll(「down」) 等來移動滾動條，這個方法只有等DOM加載完成之後才能用，因此在IE低版本瀏覽器中能夠經過這個屬性判斷 DOM 結構是否加載完成。介紹這個屬性主要是模仿 jquery 中的解決方案。
function ready(readyFn) {
//非IE瀏覽器
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', function () {
readyFn && readyFn();
}, false);
} else {
//方案1和2 哪一個快用哪個
var bReady = false;
//方案1
document.attachEvent('onreadystatechange', function () {
if (bReady) {
return;
}
if (document.readyState == 'complete' || document.readyState == "interactive") {
bReady = true;
readyFn && readyFn();
};
});
//方案2
//jquery也會擔憂doScroll會在iframe內失效，此處是判斷當前頁是否被放在了iframe裏
if (!window.frameElement) {
setTimeout(checkDoScroll, 1);
}
function checkDoScroll() {
try {
document.documentElement.doScroll("left");
if (bReady) {
return;
}
bReady = true;
readyFn && readyFn();
}
catch (e) {
// 不斷檢查 doScroll 是否可用 - DOM結構是否加載完成
setTimeout(checkDoScroll, 1);
}
};
}
}; 複製代碼
注：
setTimeout(checkDoScroll, 1); 目的是讓瀏覽器儘快執行 checkDoScroll 函數，間隔時間設置爲 1ms，對當下的瀏覽器來講是不太可能的。每一個瀏覽器都有本身默認的最小間隔時間，即便時間設置爲最小間隔時間，也只是表明隔這些時間過去以後，JavaScript 會把 checkDoScroll 加入到執行隊列中，若是此時 JavaScript 進程空閒，則會當即執行該代碼。
HTML5 的 postMessage 方法可實現不一樣窗體間互相通訊。
HTML5 的 postMessage 方法可實現不一樣窗體間互相通訊。
postMessage 支持實現跨文檔消息傳輸（Cross Document Messaging），而且可跨域傳輸信息。Internet Explorer 8, Firefox 3, Opera 9, Chrome 3和 Safari 4 以上版本瀏覽器都已支持 postMessage。
postMessage 功能簡介
父（主頁面）窗體向子窗體發送消息
首先要獲取傳送的窗體對象（iframe），並向對象發送信息:
var iframeWin = document.getElementsByTagName('iframe')[0].contentWindow;
iframeWin.postMessage('hello world!', "*"); 複製代碼
postMessage方法包含了兩個參數，第一個爲發送的內容，類型爲:string。第二個接受窗體的URL限制，這裏使用 「*」，表示全部域均可以接收傳送的內容。
子窗口監聽發送來的消息
window.addEventListener('message', onMessage, false);
var onMessage = function(){
console.log(e, e.data);
if(e.origin !="http://moweide.gitcafe.io"){
return false;
}
// 消息處理...
}
}; 複製代碼
經過使用e.data去獲取接收的到信息，通常出於安全考慮，咱們會對e.orrgin的源進行檢測，若是不是預設的消息來源，應該拒絕處理。
跨域
同源跨域可經過修改 window.domain 方式欺騙解決。
非同源跨域可以使用 flash 控件或遠程加載script文件的 jsonp 方式。
如今 postMessage 則可簡單完成該需求，重要的是，它能夠實現 jsonp 沒法完成的跨域 POST 請求。
父窗體建立跨域iframe併發送信息
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>跨域POST消息發送</title>
<script type="text/JavaScript">
function sendPost(){
var iframeWin = document.getElementById("otherPage").contentWindow;
iframeWin.postMessage( document.getElementById("message").value, "http://moweide.gitcafe.io");
}
window.addEventListener("message", function( event ) {
console.log(event, event.data);
}, false);
</script>
</head>
<body>
<textarea id="message"></textarea>
<input type="button" value="發送" onclick="sendPost()">
<iframe src="" id="otherPage" style="display:none"></iframe>
</body>
</html> 複製代碼
子窗體接收信息並處理（如發起XMLHttpRequest請求）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>POST Handler</title>
<script src=""></script>
<script type="text/JavaScript">
window.addEventListener("message", function( event ) {
// 把父窗口發送過來的數據向服務器發送post請求
var data = event.data;
$.ajax({
type: 'POST',
data: "info=" + data,
dataType: "json"
}).done(function(res){
//能夠向父窗體返回結果
window.parent.postMessage(res, "*");
}).fail(function(res){
window.parent.postMessage(res, "*");
});
}, false );
</script>
</head>
<body>
</body>
</html>複製代碼
postMessage 總結
postMessage 解決了客戶端不一樣窗體間的消息傳遞問題，特別是跨域消息發送，可解決跨域 POST 請求問題。
另外，解決客戶端與服務器的雙向實時通訊，可參考 HTML5 的 webSocket API.
- 1. 原生JS實現AJAX、JSONP及DOM加載完成事件
- 2. 跨域傳輸信息postMessage
- 3. 使用HTML5中postMessage實現Ajax中的POST跨域問題
- 4. php+ajax+jsonp 跨域傳輸實例
- 5. Html5 postMessage實現跨域消息傳遞
- 6. HTML5 之跨域通訊（postMessage）
- 7. 淺談postMessage跨域通信與localStorage實現跨域共享
- 8. jsonp現實跨域Ajax CORS
- 9. .NET與JSP頁面之間消息通信（跨域，使用html5的postMessage實現）
- 10. JS跨域及Ajax實現
- 更多相關文章...
- • SQLite 日期 & 時間 - SQLite教程
- • PHP 實例 - AJAX 實時搜索 - PHP教程
- • Flink 數據傳輸及反壓詳解
- • PHP Ajax 跨域問題最佳解決方案
-
每一个你不满意的现在，都有一个你没有努力的曾经。