明輝手游網(wǎng)中心:是一個(gè)免費(fèi)提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺(tái)!

怎么靈活使用Web的AJAX_JQuery調(diào)用Web service完成AJAX完成圖文詳細(xì)教程詳細(xì)說(shuō)明

[摘要]怎樣使用Web的AJAX_JQuery調(diào)用Web service實(shí)現(xiàn)AJAX實(shí)現(xiàn)教程詳解隨著軟件運(yùn)行環(huán)境越來(lái)越復(fù)雜,webse州ce為分布式應(yīng)用、跨平臺(tái)交互、軟件間的整合提供了一種解決方案。思路就是...

怎樣使用Web的AJAX_JQuery調(diào)用Web service實(shí)現(xiàn)AJAX實(shí)現(xiàn)教程詳解

隨著軟件運(yùn)行環(huán)境越來(lái)越復(fù)雜,webse州ce為分布式應(yīng)用、跨平臺(tái)交互、軟件間的整合提供了一種解決方案。思路就是用ajax定時(shí)查看有無(wú)新內(nèi)容,如果有的用一個(gè)定時(shí)器讓文字閃動(dòng)(通過(guò)變化文件的color實(shí)現(xiàn)),如果沒(méi)有就關(guān)閉定時(shí)器,恢復(fù)文字的顏色。里郵件的獲取用到了exchange的web service 結(jié)合jquery和一般處理程序ashx的ajax。

前幾天跟一個(gè)朋友在聊Web的AJAX時(shí),很驚訝他的設(shè)計(jì)方法很原始,直接用的js直接調(diào)的.aspx,傳參來(lái)取得結(jié)果實(shí)現(xiàn)局部刷新,個(gè)人感覺(jué)這樣不好維護(hù),也沒(méi)有靈活性.

怎樣能夠做到靈活?可維護(hù)性強(qiáng)?

做一個(gè)小實(shí)例出來(lái),也加強(qiáng)一下印象.

jQuery+Web service來(lái)實(shí)現(xiàn):Web service作后臺(tái)服務(wù),用jQuery(js優(yōu)秀框架)調(diào)此web service取得結(jié)果,如下是原理圖:

怎樣靈活使用Web的AJAX_JQuery調(diào)用Web service實(shí)現(xiàn)AJAX實(shí)現(xiàn)教程詳解

現(xiàn)在開(kāi)始演示一個(gè)實(shí)例,開(kāi)發(fā)工具如下為:Visual studio S 2008+jQuery1.4.1

1.新建一項(xiàng)目:MyService

怎樣靈活使用Web的AJAX_JQuery調(diào)用Web service實(shí)現(xiàn)AJAX實(shí)現(xiàn)教程詳解

2.Web service后臺(tái)代碼如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

namespace MyService
{
///


/// Summary description for Service1
///

[WebService]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]//此處需要設(shè)定為ScriptService類(lèi)型,js才能夠從web service取得值
public class Service1 : System.Web.Services.WebService
{

[WebMethod]
public string GetMessage(string name)
{
return "Hello,"+name;
}

[WebMethod]
public List GetMembers() {
List personList = new List();
personList.Add("AGAN");
personList.Add("MS");
personList.Add("ZURI");
personList.Add("JILI");
personList.Add("Who are you!");
return personList;
}

[WebMethod]
public string GetYourAge(string name) {
int age = 0;
switch(name.ToUpper()){
case "AGAN":
age = 18;
break;
case "MS":
age = 28;
break;
case "ZURI":
age = 25;
break;
case "JILI":
age = 23;
break;
default:
age = 30;
break;
}
return age.ToString();
}
}
}

 

注意在web.config中配置好默認(rèn)文檔Service1.asmx,否則IIS中測(cè)試會(huì)報(bào)錯(cuò)403的錯(cuò)誤.






 

3.在項(xiàng)目解決方案中添加一Web setup項(xiàng)目MyServiceSetup,如下圖:

怎樣靈活使用Web的AJAX_JQuery調(diào)用Web service實(shí)現(xiàn)AJAX實(shí)現(xiàn)教程詳解

右鍵點(diǎn)擊MyServiceSetup安裝包,有Install(安裝),unInstall(卸載)點(diǎn)擊即可發(fā)布到IIS中或中IIS移除.

怎樣靈活使用Web的AJAX_JQuery調(diào)用Web service實(shí)現(xiàn)AJAX實(shí)現(xiàn)教程詳解

瀏覽已發(fā)布的這個(gè)Web service可以看到已公開(kāi)的這方個(gè)方法,如圖所示:

怎樣靈活使用Web的AJAX_JQuery調(diào)用Web service實(shí)現(xiàn)AJAX實(shí)現(xiàn)教程詳解

現(xiàn)在我們來(lái)測(cè)試一下GetMambers()這個(gè)方法,如圖:

怎樣靈活使用Web的AJAX_JQuery調(diào)用Web service實(shí)現(xiàn)AJAX實(shí)現(xiàn)教程詳解

點(diǎn)"調(diào)用"后結(jié)果如下:

怎樣靈活使用Web的AJAX_JQuery調(diào)用Web service實(shí)現(xiàn)AJAX實(shí)現(xiàn)教程詳解

這說(shuō)明發(fā)布的這個(gè)Web service已沒(méi)有問(wèn)題,現(xiàn)在我們用jQuery來(lái)調(diào)這個(gè)服務(wù)來(lái)實(shí)現(xiàn)AJAX局部刷新的效果。

[page]
 

現(xiàn)在下載jQuery插件jquery-1.4.1.js

下載地址:http://www.6down.net/soft/html/13684.html

4. 建一個(gè)測(cè)試的項(xiàng)目來(lái)測(cè)試web service:TestMyService:

怎樣靈活使用Web的AJAX_JQuery調(diào)用Web service實(shí)現(xiàn)AJAX實(shí)現(xiàn)教程詳解

用js調(diào)用web service,一個(gè)按鈕取得ArrayOfString中的列表數(shù)據(jù),點(diǎn)擊列表項(xiàng)調(diào)GetYourAge()方法取得某個(gè)人的相關(guān)信息(年齡),添加一html文件,把jquery-1.4.2.js把到j(luò)s,

代碼和jquery代碼如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TestMyService._Default" %>












<script src="js/jquery-1.4.1.js" type="text/javascript"></script>


<script type="text/javascript">

function GetDataList()
{
$.ajax({
type:"POST",
contentType:"application/json",
url:"http://localhost/MyServiceSetup/Service1.asmx/GetMembers",//GetMembers是web service的方法名
data:"",//無(wú)參數(shù)類(lèi)型
datatype:'json',
success:function(result){
try{
$('#listMembers').empty();
$(result.d).each(function() {//遍歷取得的結(jié)果
$("#listMembers").append("

學(xué)習(xí)教程快速掌握從入門(mén)到精通的電腦知識(shí)