script非同步php,javascript非同步編程

本文目錄一覽：

• 1、中使用php
• 2、js非同步問題怎麼解決
• 3、php 非同步上傳圖片幾種方法總結
• 4、thinkphp 怎麼非同步載入
• 5、script 傳數據到 php

中使用php

我的理解是在js 中插入php語句，直接在要輸出的地方?php php語句 ?，如果需要加『』，就加上就ok了，不用js的拼接符號

js非同步問題怎麼解決

非同步載入又叫非阻塞載入，瀏覽器在下載執行js的同時，還會繼續進行後續頁面的處理。主要有三種方式。

方法一：也叫Script DOM Element

(function(){

var scriptEle = document.createElement(“script”);

scriptEle.type = “text/javasctipt”;

scriptEle.async = true;

scriptEle.src = “”;

var x = document.getElementsByTagName(“head”)[0];

x.insertBefore(scriptEle, x.firstChild);

})();

async屬性是HTML5中新增的非同步支持。此方法被稱為Script DOM Element 方法。Google Analytics 和 Google+ Badge 都使用了這種非同步載入代碼

(function(){;

var ga = document.createElement(‘script’);

ga.type = ‘text/javascript’;

ga.async = true;

ga.src = (‘https:’ == document.location.protocol ? ” : ”) + ‘.google-analytics.com/ga.js’;

var s = document.getElementsByTagName(‘script’)[0];

s.parentNode.insertBefore(ga, s);

})();

但是這種載入方式執行完之前會阻止onload事件的觸發，而現在很多頁面的代碼都在onload時還執行額外的渲染工作，所以還是會阻塞部分頁面的初始化處理。

方法二：onload時的非同步載入

(function(){

if(window.attachEvent){

window.attachEvent(“load”, asyncLoad);

}else{

window.addEventListener(“load”, asyncLoad);

}

var asyncLoad = function(){

var ga = document.createElement(‘script’);

ga.type = ‘text/javascript’;

ga.async = true;

ga.src = (‘https:’ == document.location.protocol ? ” : ”) + ‘.google-analytics.com/ga.js’;

var s = document.getElementsByTagName(‘script’)[0];

s.parentNode.insertBefore(ga, s);

}

)();

這種方法只是把插入script的方法放在一個函數裡面，然後放在window的onload方法裡面執行，這樣就解決了阻塞onload事件觸發的問題。

注:DOMContentLoaded與load的區別。前者是在document已經解析完成，頁面中的dom元素可用，但是頁面中的圖片，視頻，音頻等資源未載入完，作用同jQuery中的ready事件；後者的區別在於頁面所有資源全部載入完畢。

方法三：其他方法

由於JavaScript的動態性，還有很多非同步載入方法： XHR Injection、 XHR Eval、 Script In Iframe、 Script defer屬性、 document.write(script tag)。

XHR Injection(XHR 注入)：通過XMLHttpRequest來獲取javascript，然後創建一個script元素插入到DOM結構中。ajax請求成功後設置script.text為請求成功後返回的responseText。

//獲取XMLHttpRequest對象，考慮兼容性。

var getXmlHttp = function(){

var obj;

if (window.XMLHttpRequest)

obj = new XMLHttpRequest();

else

obj = new ActiveXObject(“Microsoft.XMLHTTP”);

return obj;

};

//採用Http請求get方式;open()方法的第三個參數表示採用非同步(true)還是同步(false)處理

var xmlHttp = getXmlHttp();

xmlHttp.open(“GET”, “”, true);

xmlHttp.send();

xmlHttp.onreadystatechange = function(){

if (xmlHttp.readyState == 4 xmlHttp.status == 200){

var script = document.createElement(“script”);

script.text = xmlHttp.responseText;

document.getElementsByTagName(“head”)[0].appendChild(script);

}

}

XHR Eval：與XHR Injection對responseText的執行方式不同，直接把responseText放在eval()函數裡面執行。

//獲取XMLHttpRequest對象，考慮兼容性。

var getXmlHttp = function(){

var obj;

if (window.XMLHttpRequest)

obj = new XMLHttpRequest();

else

obj = new ActiveXObject(“Microsoft.XMLHTTP”);

return obj;

};

//採用Http請求get方式;open()方法的第三個參數表示採用非同步(true)還是同步(false)處理

var xmlHttp = getXmlHttp();

xmlHttp.open(“GET”, “”, true);

xmlHttp.send();

xmlHttp.onreadystatechange = function(){

if (xmlHttp.readyState == 4 xmlHttp.status == 200){

eval(xmlHttp.responseText);

//alert($);//可以彈出$,表明JS已經載入進來。click事件放在其它出會出問題，應該是還沒載入進來

$(“#btn1”).click(function(){

alert($(this).text());

});

}

}

Script In Irame：在父窗口插入一個iframe元素，然後再iframe中執行載入JS的操作。

var insertJS = function(){alert(2)};

var iframe = document.createElement(“iframe”);

document.body.appendChild(iframe);

var doc = iframe.contentWindow.document;//獲取iframe中的window要用contentWindow屬性。

doc.open();

doc.write(“scriptvar insertJS = function(){};\/scriptbody onload=’insertJS()’/body”);

doc.close();

GMail Mobile：業內JS內容被注釋，所以不會執行，在需要的時候，獲取script中的text內容去掉注釋，調用eval()執行。

script type=”text/javascript”

/*

var …

*/

/script

HTML5新屬性：async和defer屬性

defer屬性：IE4.0就出現。defer屬聲明腳本中將不會有document.write和dom修改。瀏覽器會並行下載其他有defer屬性的script。而不會阻塞頁面後續處理。註：所有的defer腳本必須保證按順序執行的。

script type=”text/javascript” defer/script

async屬性：HTML5新屬性。腳本將在下載後儘快執行，作用同defer，但是不能保證腳本按順序執行。他們將在onload事件之前完成。

script type=”text/javascript” defer/script

Firefox 3.6、Opera 10.5、IE 9和最新的Chrome和Safari都支持async屬性。可以同時使用async和defer，這樣IE 4之後的所有IE都支持非同步載入。

沒有async屬性，script將立即獲取（下載）並執行，期間阻塞了瀏覽器的後續處理。如果有async屬性，那麼script將被非同步下載並執行，同時瀏覽器繼續後續的處理。

總結： 對於支持HTML5的瀏覽器，實現JS的非同步載入只需要在script元素中加上async屬性，為了兼容老版本的IE還需加上defer屬性；對於不支持HTML5的瀏覽器(IE可以用defer實現)，可以採用以上幾種方法實現。原理基本上都是向DOM中寫入script或者通過eval函數執行JS代碼，你可以把它放在匿名函數中執行，也可以在onload中執行，也可以通過XHR注入實現，也可以創建一個iframe元素，然後在iframe中執行插入JS代碼。

php 非同步上傳圖片幾種方法總結

代碼如下

form action=”upload.php” id=”form1″ name=”form1″ enctype=”multipart/form-data” method=”post” target=”uploadIframe” !–上傳圖片頁面 — /form iframe name=”uploadIframe” id=”uploadIframe” style=”display:none”/iframe

然後後台處理完上傳圖片邏輯後返回給前台，利用ajax修改當前頁面DOM對象實現無刷新上傳圖片的友好功能。

實例

代碼如下

a.html form enctype=”multipart/form-data” action=”a.php” target=”ifram_sign” method=”POST” input name=”submit” id=”submit” value=”” type=”hidden” label上傳文件: input name=”test_file” type=”file” id=”test_file” size=”48″/label input type=”image” value=”立即上傳” id=”submit_btn” /formiframe name=”ifram_sign” src=”” frameborder=”0″ height=”0″ width=”0″ marginheight=”0″ marginwidth=”0″/iframe

php代碼：

代碼如下

?php

if ($_files[“test_file”][“error”] 0)

{

echo “Error: ” . $_files[“test_file”][“error”] . “br /”;

}

else

{

//這裡的判斷圖片屬性的方法就不寫了。自己擴展一下。

$filetype=strrchr($_files[“test_file”][“name”],”.”);

$filetype=substr($filetype,1,strlen($filetype));

$filename=”img/”.time(“YmdHis”).”.”.$filetype;

move_uploaded_file($_files[“test_file”][“tmp_name”],$filename);

echo ‘script alert(1)/script’;

$return=”parent.document.getElementByIdx_x(‘mpic”.$pageset_id.”‘).innerhtml='”.$dataimgpath.”‘”;

echo “script alert(‘上傳成功’)/script”;

echo “script{$return}/script”;

}

?

其實jquery ajax圖片非同步上傳

html:

!DOCTYPE html PUBLIC “-//W3C//dtd Xhtml 1.0 transitional//EN”

“”

html xmlns=”” lang=”en_US” xml:lang=”en_US”

head

title圖片非同步上傳/title

/head

script type=”text/javascript” src=”js/jquery.js”/script

script type=”text/javascript” src=”js/index.js”/script

link type=”text/css” rel=”stylesheet” href=”css/index.css”

body

div class=”frm”

form name=”uploadFrom” id=”uploadFrom” action=”upload.php” method=”post” target=”tarframe” enctype=”multipart/form-data”

input type=”file” id=”upload_file” name=”upfile”

/form

iframe src=”” width=”0″ height=”0″ style=”display:none;” name=”tarframe”/iframe

/div

div id=”msg”

/div

/body

/html

index.js

$(function(){

$(“#upload_file”).change(function(){

$(“#uploadFrom”).submit();

});

});

function stopSend(str){

var im=”img src=’upload/images/”+str+”‘”;

$(“#msg”).append(im);

}

upload.php

?php

$file=$_files[‘upfile’];

$name=rand(0,500000).dechex(rand(0,10000)).”.jpg”;

move_uploaded_file($file[‘tmp_name’],”upload/images/”.$name);

//調用iframe父窗口的js 函數

echo “scriptparent.stopSend(‘$name’)/script”;

?

非同步上傳圖片幾種方法

thinkphp 怎麼非同步載入

// 下面這行代碼就是獲得的屬性

var id=$(this).attr(“id”);

var status=$(this).attr(“rel”);

if(status==0)

{

$.ajax({

url: “{:U(‘Test/operate1’)}”, //請求的url地址

dataType: “json”, //返回格式為json

async: true, //請求是否非同步，默認為非同步，這也是ajax重要特性

data: { “id”:id, “status”:status}, //參數值

type: “POST”, //請求方式

success: function(result) {$(“#”+id).text(“success”);}, //請求成功時處理

error: function() {$(“#”+id).text(“fail”);} //請求出錯處理

});

}

else

{

$.ajax({

url: “{:U(‘Test/operate2’)}”, //請求的url地址

dataType: “json”, //返回格式為json

async: true, //請求是否非同步，默認為非同步，這也是ajax重要特性

data: { “id”:id, “status”:status}, //參數值

type: “POST”, //請求方式

success: function(result) {$(“#”+id).text(“success”);}, //請求成功時處理

error: function() {$(“#”+id).text(“fail”);} //請求出錯處理

});

}

});

/script

相應的函數operate1與operate2的處理如下：

對傳到的值進行相應的操作，返回值的操作為：$this-ajaxReturn($result,’JSON’);

2.js非同步載入中，rev={$vo[‘phone’]}###{$vo[‘name’]};用來傳多個值，在另一個界面中通過explode來分隔數組，分別獲得單個的值。

3.非同步載入中不能出現echo等輸出語句。

script 傳數據到 php

要使用兩個文件,一個是PHP文件,一個是寫有js的HTML文件

JS:

location.href=’a.php?a=’+a;

PHP:

$a = $_GET[‘a’];

如果想在同一個頁面完成可以使用iframe實現.

當然ajax也是一種解決方案