javascript是前端開(kāi)發(fā)語(yǔ)言,經(jīng)常與html、css技術(shù)一起構(gòu)成前端開(kāi)發(fā)。javascript一般通過(guò)ajax與后臺(tái)進(jìn)行數(shù)據(jù)交互。其實(shí)和javascript有個(gè)相同名稱(chēng)的java 是后端開(kāi)發(fā)語(yǔ)言,他倆雖然都有java這個(gè)單詞,但是他倆沒(méi)什么直接關(guān)系。
創(chuàng)新互聯(lián)公司致力于互聯(lián)網(wǎng)品牌建設(shè)與網(wǎng)絡(luò)營(yíng)銷(xiāo),包括成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、SEO優(yōu)化、網(wǎng)絡(luò)推廣、整站優(yōu)化營(yíng)銷(xiāo)策劃推廣、電子商務(wù)、移動(dòng)互聯(lián)網(wǎng)營(yíng)銷(xiāo)等。創(chuàng)新互聯(lián)公司為不同類(lèi)型的客戶(hù)提供良好的互聯(lián)網(wǎng)應(yīng)用定制及解決方案,創(chuàng)新互聯(lián)公司核心團(tuán)隊(duì)10年專(zhuān)注互聯(lián)網(wǎng)開(kāi)發(fā),積累了豐富的網(wǎng)站經(jīng)驗(yàn),為廣大企業(yè)客戶(hù)提供一站式企業(yè)網(wǎng)站建設(shè)服務(wù),在網(wǎng)站建設(shè)行業(yè)內(nèi)樹(shù)立了良好口碑。
JavaScript一種直譯式腳本語(yǔ)言,是一種動(dòng)態(tài)類(lèi)型、弱類(lèi)型、基于原型的語(yǔ)言,內(nèi)置支持類(lèi)型。它的解釋器被稱(chēng)為JavaScript引擎,為瀏覽器的一部分,廣泛用于客戶(hù)端的腳本語(yǔ)言,最早是在HTML(標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用)網(wǎng)頁(yè)上使用,用來(lái)給HTML網(wǎng)頁(yè)增加動(dòng)態(tài)功能。
在1995年時(shí),由Netscape公司的Brendan Eich,在網(wǎng)景導(dǎo)航者瀏覽器上首次設(shè)計(jì)實(shí)現(xiàn)而成。因?yàn)镹etscape與Sun合作,Netscape管理層希望它外觀看起來(lái)像Java,因此取名為JavaScript。但實(shí)際上它的語(yǔ)法風(fēng)格與Self及Scheme較為接近。
JavaScript是一種基于對(duì)象和事件驅(qū)動(dòng)并具有相對(duì)安全性的客戶(hù)端腳本語(yǔ)言。同時(shí)也是一種廣泛用于客戶(hù)端Web開(kāi)發(fā)的腳本語(yǔ)言,常用來(lái)給HTML網(wǎng)頁(yè)添加動(dòng)態(tài)功能,比如響應(yīng)用戶(hù)的各種操作。它最初由網(wǎng)景公司(Netscape)的Brendan Eich設(shè)計(jì),是一種動(dòng)態(tài)、弱類(lèi)型、基于原型的語(yǔ)言,內(nèi)置支持類(lèi)。JavaScript是Sun公司的注冊(cè)商標(biāo)。Ecma國(guó)際以JavaScript為基礎(chǔ)制定了ECMAScript標(biāo)準(zhǔn)。JavaScript也可以用于其他場(chǎng)合,如服務(wù)器端編程。完整的JavaScript實(shí)現(xiàn)包含三個(gè)部分:ECMAScript,文檔對(duì)象模型,字節(jié)順序記號(hào)。
方法一、用ClientScript類(lèi)動(dòng)態(tài)添加腳本 用法如下:在想調(diào)用某個(gè)javascript腳本函數(shù)的地方添加代碼,注意要保證MyFun已經(jīng)在腳本文件中定義過(guò)了。 ClientScript.RegisterStartupScript(ClientScript.GetType(), myscript, scriptMyFun();/script); 這個(gè)方法比Response.Write更方便一些,可以直接調(diào)用腳本文件中的自定義函數(shù)。 可以在程序的任何地方執(zhí)行,o(∩_∩)o...,是不是很好用呢 注意執(zhí)行順序:先執(zhí)行Client ,再執(zhí)行Server 方法二、用Response.Write方法寫(xiě)入腳本 比如在你單擊按鈕后,先操作數(shù)據(jù)庫(kù),完了后顯示已經(jīng)完成,可以在最后想調(diào)用的地方寫(xiě)上 Response.Write(script type='text/javascript'alert();/script); 這個(gè)方法有個(gè)缺陷就是不能調(diào)用腳本文件中的自定義的函數(shù),只能調(diào)用內(nèi)部函數(shù),具體調(diào)用自定義的函數(shù)只能在Response.Write寫(xiě)上函數(shù)定義,比如: Response.Write(script type='text/javascript'function myfun(){...}/script); 方法三、是我自認(rèn)為最靈活的一種,ClientScript.RegisterStartupScript實(shí)例代碼:StringBuilder sb = new StringBuilder(); sb.Append(script language='javascript'); sb.Append(Button2_onclick(' + serverPath + ')); sb.Append(/script); ClientScript.RegisterStartupScript(this.GetType(), LoadPicScript, sb.ToString()); 方法四、Button1.Attributes.Add(onclick, return Client_Click()); “Client_Click() “是一個(gè)前臺(tái)方法,可以替換成一般的腳本如:retrun confirm('確定刪除嗎?')
使用JavaScript訪問(wèn)后臺(tái)的方法,嘗試了以下幾種方法: 1.在%%中直接書(shū)寫(xiě)代碼段 2.通過(guò)js直接執(zhí)行button的click()方法 觸發(fā)后臺(tái)代碼 3.Ajax 參考 在后臺(tái)代碼處理頁(yè)面中引入要訪問(wèn)的方法 4.將該方法發(fā)布為webservice 通過(guò)javascript直接調(diào)用webservice. 項(xiàng)目中需要一次性循環(huán)生成多張密碼卡,而且麻煩的地方在于,前臺(tái)后臺(tái)需要共享相當(dāng)多的屬性,通過(guò)hiddenField來(lái)傳遞。而每張密碼卡都需要首先調(diào)用后臺(tái)getTopMatrix()方法返回一個(gè)字符串,客戶(hù)端獲得字符串后做處理并存儲(chǔ)至EXCEL,若此過(guò)程成功則調(diào)用另一個(gè)后臺(tái)方法preToFormal()更新數(shù)據(jù)庫(kù)。初步嘗試的時(shí)候使用了方法一,方法一的缺點(diǎn)比較明顯,當(dāng)頁(yè)面加載的時(shí)候%%中的內(nèi)容被自動(dòng)解析,無(wú)法實(shí)現(xiàn)可控的調(diào)用。 script /*直接獲取返回值*/ var str_matrix="%=getTopMatrix()%"; /script 方法二解決了可控性的問(wèn)題。實(shí)現(xiàn)步驟如下: 1、首先建立一個(gè)按鈕,在后臺(tái)將調(diào)用或處理的內(nèi)容寫(xiě)入button_click中; 2、在前臺(tái)寫(xiě)一個(gè)js函數(shù),內(nèi)容為document.getElementById("btn1").click(); 3、在前臺(tái)或后臺(tái)調(diào)用js函數(shù),激發(fā)click事件,等于訪問(wèn)后臺(tái)c#函數(shù); 具體實(shí)現(xiàn)代碼略。 當(dāng)通過(guò)click事件觸發(fā)后臺(tái)方法后,后臺(tái)方法里面對(duì)一個(gè)HiddenField賦值.而此時(shí)前臺(tái)的js代碼仍在執(zhí)行,需要用到這個(gè)HiddenField處理后的值。結(jié)果往往是后臺(tái)沒(méi)有為HiddenField賦值前臺(tái)js代碼已經(jīng)取到這個(gè)HiddenField的值,這時(shí)候仍然是空值。而通過(guò)加計(jì)時(shí)器的方法又顯得相當(dāng)笨拙,且效率很低。 這個(gè)需求最終通過(guò)方法三Ajax解決,解決步驟: 1、首先發(fā)起一個(gè)Ajax請(qǐng)求,訪問(wèn)后臺(tái)頁(yè)面中的getTopMatrix()方法獲取密碼字符串,為避免方法二中的問(wèn)題,采用Ajax的同步方式。 2、請(qǐng)求響應(yīng)完畢之后,獲取返回的密碼字符串通過(guò)Javascript處理并存儲(chǔ)至Excel。 3、步驟2成功之后則發(fā)起另一個(gè)ajax請(qǐng)求,更新數(shù)據(jù)庫(kù)相關(guān)字段。
方法一:直接使用%=%調(diào)用
前臺(tái)JS:
[javascript] view plain copy
script type="text/javascript"
var methodStr = "%=BehindMethod() %";
alert(methodStr);
/script
后頭方法:
[csharp] view plain copy
public static string BehindMethod()
{
return "這是一個(gè)后臺(tái)的方法";
}
方法二:用ajax調(diào)用
前臺(tái)js:
[javascript] view plain copy
script type="text/javascript" src="js/jquery-1.4.3.min.js"/script
script type="text/javascript"
var params = '{ext:"p9hp"}'; //參數(shù),注意參數(shù)名要注意和后臺(tái)方法參數(shù)名要一致
$(function(){
$("#btnOk").click(function(){
$.ajax({
type:"POST", //請(qǐng)求方式
url:"AjaxDemo.aspx/GetImg", //請(qǐng)求路徑:頁(yè)面/方法名字
data: params, //參數(shù)
dataType:"text",
contentType:"application/json; charset=utf-8",
beforeSend:function(XMLHttpRequest){
$("#tips").text("開(kāi)始調(diào)用后頭方法獲取圖片路徑,請(qǐng)等待");
$("#imgFood").attr("src","image/loading.gif");
},
success:function(msg){ //成功
$("#imgFood").attr("src",eval("("+msg+")").d);
$("#tips").text("調(diào)用方法結(jié)束");
},
error:function(obj, msg, e){ //異常
alert("OH,NO");
}
});
});
});
/script
頁(yè)面html:
[html] view plain copy
body
form id="form1" runat="server"
div
label id="tips"/label
img id="imgFood" /
input value="點(diǎn)擊我,給你看一張圖片" type="button" width="35px" id="btnOk" /
/div
/form
/body
后臺(tái)方法:
[csharp] view plain copy
[System.Web.Services.WebMethod]
public static string GetImg(string ext)
{
System.Threading.Thread.Sleep(5000);//為了有點(diǎn)等待的效果,延遲5秒
StringComparer sc = StringComparer.OrdinalIgnoreCase;
string[] extArr = new string[] { "php", "asp", "aspx", "txt", "bmp" };
bool f = extArr.Any(s=sc.Equals(s,ext)); //判斷傳入的后綴名是否存在
if (f)
{
return "image/54222860.jpg";
}
return "image/star1.jpg";
}
方法三:AjaxPro (也是ajax)
第一步:下載AjaxPro.dll(或者AjaxPro.2.dll),并且添加引用到項(xiàng)目
第二步:修改配置文件web.config
[csharp] view plain copy
system.web
httpHandlers
!--注冊(cè)ajaxPro.2--
add verb="*" path="*.ashx" type="AjaxPro.AjaxHandlerFactory,AjaxPro.2"/
/httpHandlers
/system.web
第三步:對(duì)AjaxPro在頁(yè)P(yáng)age_Load事件中進(jìn)行運(yùn)行時(shí)注冊(cè)。如:
[csharp] view plain copy
protected void Page_Load(object sender, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(AjaxDemo)); //注冊(cè)
}
第四步:創(chuàng)建服務(wù)器方法,并且用[AjaxPro.AjaxMethod]標(biāo)注
[csharp] view plain copy
[AjaxPro.AjaxMethod]
public string GetImgByAjaxPro()
{
return "image/54222860.jpg";
}
第五步:前臺(tái)JS的調(diào)用:
[javascript] view plain copy
function GetMethodByAjaxPro() {
var a = JustTest.AjaxDemo.GetImgByAjaxPro();//JustTest是當(dāng)前的名字空間,AjaxDemo表示后臺(tái)類(lèi)
document.getElementById("imgAjaxPro").src = a.value;
}