DoboWiki
Top
> .NETプログラミング研究/78 をテンプレートにして作成
.NETプログラミング研究/78 をテンプレートにして作成
開始行:
#title(ASP.NETでAjaxを使用したWebアプリケーションを作成す...
#navi(.NETプログラミング研究)
#contents
*ASP.NETでAjaxを使用したWebアプリケーションを作成する 1 [...
「.NETプログラミング研究」の第76号で予告したとおり(かな...
ここでは、荷物の大きさから[[ゆうパックの料金>http://www.p...
**Ajaxを使用しない方法 [#noajax]
Ajaxを使用した方法と比較するために、まずはAjaxを一切使わ...
この方法は非常に簡単で、DropDownListのAutoPostBackプロパ...
#code(vbnet){{
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional...
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
Protected Sub PackageSizeList_SelectedIndexChanged( _
ByVal sender As Object, ByVal e As EventArgs)
Dim ddl As DropDownList = CType(sender, DropDownL...
If ddl.SelectedValue <> "0" Then
Dim fee As Integer = _
Me.GetYoupackFee(Integer.Parse(ddl.Select...
ResultLabel.Text = String.Format("料金は {0}...
Else
ResultLabel.Text = ""
End If
End Sub
Public Function GetYoupackFee(ByVal packSize As Integ...
If packSize <= 60 Then
Return 600
Else If packSize <= 80 Then
Return 800
Else If packSize <= 100 Then
Return 1000
Else If packSize <= 120 Then
Return 1200
Else If packSize <= 140 Then
Return 1400
Else If packSize <= 160 Then
Return 1600
Else If packSize <= 170 Then
Return 1700
Else
Return -1
End If
End Function
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>ゆうパック送料検索</title>
</head>
<body>
<h1>ゆうパック送料検索</h1>
<p>同一都道府県内への配達、重量30kgまで</p>
<form id="form1" runat="server">
<div>
<asp:Label
ID="Label1"
runat="server"
Text="荷物の大きさ(縦・横・高さの合計): "
AssociatedControlID="PackageSizeList">
</asp:Label>
<asp:DropDownList
ID="PackageSizeList"
runat="server"
AutoPostBack="True"
OnSelectedIndexChanged="PackageSizeList_Selec...
<asp:ListItem Value="0">(選択してください)<...
<asp:ListItem Value="60">60cmまで</asp:ListIt...
<asp:ListItem Value="80">80cmまで</asp:ListIt...
<asp:ListItem Value="100">100cmまで</asp:List...
<asp:ListItem Value="120">120cmまで</asp:List...
<asp:ListItem Value="140">140cmまで</asp:List...
<asp:ListItem Value="160">160cmまで</asp:List...
<asp:ListItem Value="170">170cmまで</asp:List...
</asp:DropDownList>
<br />
<asp:Label ID="ResultLabel" runat="server"></asp:...
</div>
</form>
</body>
</html>
}}
#code(csharp){{
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional...
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void PackageSizeList_SelectedIndexChanged(
object sender, EventArgs e)
{
DropDownList ddl = (DropDownList)sender;
if (ddl.SelectedValue != "0")
{
int fee = this.GetYoupackFee(int.Parse(ddl.Se...
ResultLabel.Text = string.Format("料金は {0}...
}
else
{
ResultLabel.Text = "";
}
}
public int GetYoupackFee(int packSize)
{
if (packSize <= 60)
return 600;
else if (packSize <= 80)
return 800;
else if (packSize <= 100)
return 1000;
else if (packSize <= 120)
return 1200;
else if (packSize <= 140)
return 1400;
else if (packSize <= 160)
return 1600;
else if (packSize <= 170)
return 1700;
else
return -1;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>ゆうパック送料検索</title>
</head>
<body>
<h1>ゆうパック送料検索</h1>
<p>同一都道府県内への配達、重量30kgまで</p>
<form id="form1" runat="server">
<div>
<asp:Label
ID="Label1"
runat="server"
Text="荷物の大きさ(縦・横・高さの合計): "
AssociatedControlID="PackageSizeList">
</asp:Label>
<asp:DropDownList
ID="PackageSizeList"
runat="server"
AutoPostBack="True"
OnSelectedIndexChanged="PackageSizeList_Selec...
<asp:ListItem Value="0">(選択してください)<...
<asp:ListItem Value="60">60cmまで</asp:ListIt...
<asp:ListItem Value="80">80cmまで</asp:ListIt...
<asp:ListItem Value="100">100cmまで</asp:List...
<asp:ListItem Value="120">120cmまで</asp:List...
<asp:ListItem Value="140">140cmまで</asp:List...
<asp:ListItem Value="160">160cmまで</asp:List...
<asp:ListItem Value="170">170cmまで</asp:List...
</asp:DropDownList>
<br />
<asp:Label ID="ResultLabel" runat="server"></asp:...
</div>
</form>
</body>
</html>
}}
ゆうパックの計算は、GetYoupackFeeメソッドで行っています。...
**.NETの機能を使用せずに、Ajaxを使用する方法 [#nodotnet]
Ajaxでは、上記の例のようにサーバーにポストバックしてペー...
ここでは、Ajaxを使って、上の例と同じ事を行ってみましょう...
まず、ゆうパックの料金を取得するためのWebサービスを作成し...
#code(vbnet){{
<%@ WebService Language="VB" Class="WebService" %>
Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
<WebService(Namespace := "http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_...
Public Class WebService
Inherits System.Web.Services.WebService
<WebMethod()> _
Public Function GetYoupackFee(ByVal packSize As In...
If packSize <= 60 Then
Return 600
ElseIf packSize <= 80 Then
Return 800
ElseIf packSize <= 100 Then
Return 1000
ElseIf packSize <= 120 Then
Return 1200
ElseIf packSize <= 140 Then
Return 1400
ElseIf packSize <= 160 Then
Return 1600
ElseIf packSize <= 170 Then
Return 1700
Else
Return -1
End If
End Function
End Class
}}
#code(csharp){{
<%@ WebService Language="C#" Class="WebService" %>
using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1...
public class WebService : System.Web.Services.WebService
{
[WebMethod]
public int GetYoupackFee(int packSize)
{
if (packSize <= 60)
return 600;
else if (packSize <= 80)
return 800;
else if (packSize <= 100)
return 1000;
else if (packSize <= 120)
return 1200;
else if (packSize <= 140)
return 1400;
else if (packSize <= 160)
return 1600;
else if (packSize <= 170)
return 1700;
else
return -1;
}
}
}}
また、Web.configを以下のように書き換えて、WebサービスにHT...
#pre{{
<configuration>
<system.web>
<webServices>
<protocols>
<add name="HttpPost"/>
<add name="HttpGet"/>
</protocols>
</webServices>
</system.web>
</configuration>
}}
次に、メインとなるページを作成します。.NETの機能は一切使...
また、JavaScriptの記述は別のファイル"ajax.js"で行いますの...
補足:ここでは前のコードと比較する意味であえてASPXファイ...
#code(vbnet){{
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional...
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>ゆうパック送料検索</title>
<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
<h1>ゆうパック送料検索</h1>
<p>同一都道府県内への配達、重量30kgまで</p>
<form id="form1" runat="server">
<div>
<asp:Label
ID="Label1"
runat="server"
Text="荷物の大きさ(縦・横・高さの合計): "
AssociatedControlID="PackageSizeList">
</asp:Label>
<asp:DropDownList
ID="PackageSizeList"
runat="server">
<asp:ListItem Value="0">(選択してください)<...
<asp:ListItem Value="60">60cmまで</asp:ListIt...
<asp:ListItem Value="80">80cmまで</asp:ListIt...
<asp:ListItem Value="100">100cmまで</asp:List...
<asp:ListItem Value="120">120cmまで</asp:List...
<asp:ListItem Value="140">140cmまで</asp:List...
<asp:ListItem Value="160">160cmまで</asp:List...
<asp:ListItem Value="170">170cmまで</asp:List...
</asp:DropDownList>
<br />
<asp:Label ID="ResultLabel" runat="server"></asp:...
</div>
</form>
</body>
</html>
}}
#code(csharp){{
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional...
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>ゆうパック送料検索</title>
<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
<h1>ゆうパック送料検索</h1>
<p>同一都道府県内への配達、重量30kgまで</p>
<form id="form1" runat="server">
<div>
<asp:Label
ID="Label1"
runat="server"
Text="荷物の大きさ(縦・横・高さの合計): "
AssociatedControlID="PackageSizeList">
</asp:Label>
<asp:DropDownList
ID="PackageSizeList"
runat="server">
<asp:ListItem Value="0">(選択してください)<...
<asp:ListItem Value="60">60cmまで</asp:ListIt...
<asp:ListItem Value="80">80cmまで</asp:ListIt...
<asp:ListItem Value="100">100cmまで</asp:List...
<asp:ListItem Value="120">120cmまで</asp:List...
<asp:ListItem Value="140">140cmまで</asp:List...
<asp:ListItem Value="160">160cmまで</asp:List...
<asp:ListItem Value="170">170cmまで</asp:List...
</asp:DropDownList>
<br />
<asp:Label ID="ResultLabel" runat="server"></asp:...
</div>
</form>
</body>
</html>
}}
一番肝心の部分である、Webサービスにアクセスして料金を取得...
ここでは、以下のようなJavaScriptのコードを"ajax.js"に記述...
#code(javascript){{
var msgElement, listElement;
//onloadイベントハンドラを追加
if (window.addEventListener)
{
window.addEventListener("load", onLoad, false);
}
else if (window.attachEvent)
{
window.attachEvent("onload", onLoad);
}
else
{
window.onload = onLoad;
}
//onloadイベントハンドラ
function onLoad()
{
msgElement = document.getElementById("ResultLabel");
listElement = document.getElementById("PackageSizeLis...
if (window.addEventListener)
{
listElement.addEventListener("change", onChange, ...
}
else if (window.attachEvent)
{
listElement.attachEvent("onchange", onChange);
}
else
{
listElement.onchange = onChange;
}
}
//リストのonchangeイベントハンドラ
function onChange()
{
if (listElement.value == "0")
{
msgElement.innerHTML = "";
return;
}
msgElement.innerHTML = "読み込み中...";
//Webサービスにアクセスする
var uri = "WebService.asmx/GetYoupackFee?packSize=" +...
if (!makeRequest(uri))
{
msgElement.innerHTML = "XMLHTTPインスタンスの作成...
}
}
//XMLHttpRequestオブジェクト生成
function makeRequest(url)
{
var http_request = false;
if (window.XMLHttpRequest)
{
// Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType)
{
http_request.overrideMimeType('text/xml');
}
}
else if (window.ActiveXObject)
{
// IE
try
{
http_request = new ActiveXObject("Msxml2.XMLH...
}
catch (e)
{
try
{
http_request = new ActiveXObject("Microso...
}
catch (e)
{
}
}
}
if (!http_request)
{
return false;
}
http_request.onreadystatechange = function()
{
alertContents(http_request);
};;
http_request.open('GET', url, true);
http_request.send(null);
return true;
}
function alertContents(http_request)
{
if (http_request.readyState == 4)
{
var ret;
//正しく受信できたかしらべる
if (http_request.status == 200)
{
//XMLを解析する
var doc = http_request.responseXML;
var node = doc.getElementsByTagName('int').it...
var fee = node.firstChild.nodeValue;
ret = "料金は " + fee + "円";
}
else
{
ret = "正しく取得できませんでした。";
}
//結果を表示
msgElement.innerHTML = ret;
}
}
}}
補足:上記の例では、onloadやonchangeイベントハンドラの追...
当然のことですが、このようにAjaxでは、JavaScriptの知識が...
**参考 [#z57fa47e]
-[[An Introduction to AJAX Techniques and Frameworks for ...
-[[クライアント スクリプトを使用する ASP.NET Web ページの...
**コメント [#q1984f69]
#comment
//これより下は編集しないでください
#pageinfo([[:Category/.NET]] [[:Category/ASP.NET]],2007-1...
終了行:
#title(ASP.NETでAjaxを使用したWebアプリケーションを作成す...
#navi(.NETプログラミング研究)
#contents
*ASP.NETでAjaxを使用したWebアプリケーションを作成する 1 [...
「.NETプログラミング研究」の第76号で予告したとおり(かな...
ここでは、荷物の大きさから[[ゆうパックの料金>http://www.p...
**Ajaxを使用しない方法 [#noajax]
Ajaxを使用した方法と比較するために、まずはAjaxを一切使わ...
この方法は非常に簡単で、DropDownListのAutoPostBackプロパ...
#code(vbnet){{
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional...
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
Protected Sub PackageSizeList_SelectedIndexChanged( _
ByVal sender As Object, ByVal e As EventArgs)
Dim ddl As DropDownList = CType(sender, DropDownL...
If ddl.SelectedValue <> "0" Then
Dim fee As Integer = _
Me.GetYoupackFee(Integer.Parse(ddl.Select...
ResultLabel.Text = String.Format("料金は {0}...
Else
ResultLabel.Text = ""
End If
End Sub
Public Function GetYoupackFee(ByVal packSize As Integ...
If packSize <= 60 Then
Return 600
Else If packSize <= 80 Then
Return 800
Else If packSize <= 100 Then
Return 1000
Else If packSize <= 120 Then
Return 1200
Else If packSize <= 140 Then
Return 1400
Else If packSize <= 160 Then
Return 1600
Else If packSize <= 170 Then
Return 1700
Else
Return -1
End If
End Function
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>ゆうパック送料検索</title>
</head>
<body>
<h1>ゆうパック送料検索</h1>
<p>同一都道府県内への配達、重量30kgまで</p>
<form id="form1" runat="server">
<div>
<asp:Label
ID="Label1"
runat="server"
Text="荷物の大きさ(縦・横・高さの合計): "
AssociatedControlID="PackageSizeList">
</asp:Label>
<asp:DropDownList
ID="PackageSizeList"
runat="server"
AutoPostBack="True"
OnSelectedIndexChanged="PackageSizeList_Selec...
<asp:ListItem Value="0">(選択してください)<...
<asp:ListItem Value="60">60cmまで</asp:ListIt...
<asp:ListItem Value="80">80cmまで</asp:ListIt...
<asp:ListItem Value="100">100cmまで</asp:List...
<asp:ListItem Value="120">120cmまで</asp:List...
<asp:ListItem Value="140">140cmまで</asp:List...
<asp:ListItem Value="160">160cmまで</asp:List...
<asp:ListItem Value="170">170cmまで</asp:List...
</asp:DropDownList>
<br />
<asp:Label ID="ResultLabel" runat="server"></asp:...
</div>
</form>
</body>
</html>
}}
#code(csharp){{
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional...
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void PackageSizeList_SelectedIndexChanged(
object sender, EventArgs e)
{
DropDownList ddl = (DropDownList)sender;
if (ddl.SelectedValue != "0")
{
int fee = this.GetYoupackFee(int.Parse(ddl.Se...
ResultLabel.Text = string.Format("料金は {0}...
}
else
{
ResultLabel.Text = "";
}
}
public int GetYoupackFee(int packSize)
{
if (packSize <= 60)
return 600;
else if (packSize <= 80)
return 800;
else if (packSize <= 100)
return 1000;
else if (packSize <= 120)
return 1200;
else if (packSize <= 140)
return 1400;
else if (packSize <= 160)
return 1600;
else if (packSize <= 170)
return 1700;
else
return -1;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>ゆうパック送料検索</title>
</head>
<body>
<h1>ゆうパック送料検索</h1>
<p>同一都道府県内への配達、重量30kgまで</p>
<form id="form1" runat="server">
<div>
<asp:Label
ID="Label1"
runat="server"
Text="荷物の大きさ(縦・横・高さの合計): "
AssociatedControlID="PackageSizeList">
</asp:Label>
<asp:DropDownList
ID="PackageSizeList"
runat="server"
AutoPostBack="True"
OnSelectedIndexChanged="PackageSizeList_Selec...
<asp:ListItem Value="0">(選択してください)<...
<asp:ListItem Value="60">60cmまで</asp:ListIt...
<asp:ListItem Value="80">80cmまで</asp:ListIt...
<asp:ListItem Value="100">100cmまで</asp:List...
<asp:ListItem Value="120">120cmまで</asp:List...
<asp:ListItem Value="140">140cmまで</asp:List...
<asp:ListItem Value="160">160cmまで</asp:List...
<asp:ListItem Value="170">170cmまで</asp:List...
</asp:DropDownList>
<br />
<asp:Label ID="ResultLabel" runat="server"></asp:...
</div>
</form>
</body>
</html>
}}
ゆうパックの計算は、GetYoupackFeeメソッドで行っています。...
**.NETの機能を使用せずに、Ajaxを使用する方法 [#nodotnet]
Ajaxでは、上記の例のようにサーバーにポストバックしてペー...
ここでは、Ajaxを使って、上の例と同じ事を行ってみましょう...
まず、ゆうパックの料金を取得するためのWebサービスを作成し...
#code(vbnet){{
<%@ WebService Language="VB" Class="WebService" %>
Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
<WebService(Namespace := "http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_...
Public Class WebService
Inherits System.Web.Services.WebService
<WebMethod()> _
Public Function GetYoupackFee(ByVal packSize As In...
If packSize <= 60 Then
Return 600
ElseIf packSize <= 80 Then
Return 800
ElseIf packSize <= 100 Then
Return 1000
ElseIf packSize <= 120 Then
Return 1200
ElseIf packSize <= 140 Then
Return 1400
ElseIf packSize <= 160 Then
Return 1600
ElseIf packSize <= 170 Then
Return 1700
Else
Return -1
End If
End Function
End Class
}}
#code(csharp){{
<%@ WebService Language="C#" Class="WebService" %>
using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1...
public class WebService : System.Web.Services.WebService
{
[WebMethod]
public int GetYoupackFee(int packSize)
{
if (packSize <= 60)
return 600;
else if (packSize <= 80)
return 800;
else if (packSize <= 100)
return 1000;
else if (packSize <= 120)
return 1200;
else if (packSize <= 140)
return 1400;
else if (packSize <= 160)
return 1600;
else if (packSize <= 170)
return 1700;
else
return -1;
}
}
}}
また、Web.configを以下のように書き換えて、WebサービスにHT...
#pre{{
<configuration>
<system.web>
<webServices>
<protocols>
<add name="HttpPost"/>
<add name="HttpGet"/>
</protocols>
</webServices>
</system.web>
</configuration>
}}
次に、メインとなるページを作成します。.NETの機能は一切使...
また、JavaScriptの記述は別のファイル"ajax.js"で行いますの...
補足:ここでは前のコードと比較する意味であえてASPXファイ...
#code(vbnet){{
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional...
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>ゆうパック送料検索</title>
<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
<h1>ゆうパック送料検索</h1>
<p>同一都道府県内への配達、重量30kgまで</p>
<form id="form1" runat="server">
<div>
<asp:Label
ID="Label1"
runat="server"
Text="荷物の大きさ(縦・横・高さの合計): "
AssociatedControlID="PackageSizeList">
</asp:Label>
<asp:DropDownList
ID="PackageSizeList"
runat="server">
<asp:ListItem Value="0">(選択してください)<...
<asp:ListItem Value="60">60cmまで</asp:ListIt...
<asp:ListItem Value="80">80cmまで</asp:ListIt...
<asp:ListItem Value="100">100cmまで</asp:List...
<asp:ListItem Value="120">120cmまで</asp:List...
<asp:ListItem Value="140">140cmまで</asp:List...
<asp:ListItem Value="160">160cmまで</asp:List...
<asp:ListItem Value="170">170cmまで</asp:List...
</asp:DropDownList>
<br />
<asp:Label ID="ResultLabel" runat="server"></asp:...
</div>
</form>
</body>
</html>
}}
#code(csharp){{
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional...
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>ゆうパック送料検索</title>
<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
<h1>ゆうパック送料検索</h1>
<p>同一都道府県内への配達、重量30kgまで</p>
<form id="form1" runat="server">
<div>
<asp:Label
ID="Label1"
runat="server"
Text="荷物の大きさ(縦・横・高さの合計): "
AssociatedControlID="PackageSizeList">
</asp:Label>
<asp:DropDownList
ID="PackageSizeList"
runat="server">
<asp:ListItem Value="0">(選択してください)<...
<asp:ListItem Value="60">60cmまで</asp:ListIt...
<asp:ListItem Value="80">80cmまで</asp:ListIt...
<asp:ListItem Value="100">100cmまで</asp:List...
<asp:ListItem Value="120">120cmまで</asp:List...
<asp:ListItem Value="140">140cmまで</asp:List...
<asp:ListItem Value="160">160cmまで</asp:List...
<asp:ListItem Value="170">170cmまで</asp:List...
</asp:DropDownList>
<br />
<asp:Label ID="ResultLabel" runat="server"></asp:...
</div>
</form>
</body>
</html>
}}
一番肝心の部分である、Webサービスにアクセスして料金を取得...
ここでは、以下のようなJavaScriptのコードを"ajax.js"に記述...
#code(javascript){{
var msgElement, listElement;
//onloadイベントハンドラを追加
if (window.addEventListener)
{
window.addEventListener("load", onLoad, false);
}
else if (window.attachEvent)
{
window.attachEvent("onload", onLoad);
}
else
{
window.onload = onLoad;
}
//onloadイベントハンドラ
function onLoad()
{
msgElement = document.getElementById("ResultLabel");
listElement = document.getElementById("PackageSizeLis...
if (window.addEventListener)
{
listElement.addEventListener("change", onChange, ...
}
else if (window.attachEvent)
{
listElement.attachEvent("onchange", onChange);
}
else
{
listElement.onchange = onChange;
}
}
//リストのonchangeイベントハンドラ
function onChange()
{
if (listElement.value == "0")
{
msgElement.innerHTML = "";
return;
}
msgElement.innerHTML = "読み込み中...";
//Webサービスにアクセスする
var uri = "WebService.asmx/GetYoupackFee?packSize=" +...
if (!makeRequest(uri))
{
msgElement.innerHTML = "XMLHTTPインスタンスの作成...
}
}
//XMLHttpRequestオブジェクト生成
function makeRequest(url)
{
var http_request = false;
if (window.XMLHttpRequest)
{
// Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType)
{
http_request.overrideMimeType('text/xml');
}
}
else if (window.ActiveXObject)
{
// IE
try
{
http_request = new ActiveXObject("Msxml2.XMLH...
}
catch (e)
{
try
{
http_request = new ActiveXObject("Microso...
}
catch (e)
{
}
}
}
if (!http_request)
{
return false;
}
http_request.onreadystatechange = function()
{
alertContents(http_request);
};;
http_request.open('GET', url, true);
http_request.send(null);
return true;
}
function alertContents(http_request)
{
if (http_request.readyState == 4)
{
var ret;
//正しく受信できたかしらべる
if (http_request.status == 200)
{
//XMLを解析する
var doc = http_request.responseXML;
var node = doc.getElementsByTagName('int').it...
var fee = node.firstChild.nodeValue;
ret = "料金は " + fee + "円";
}
else
{
ret = "正しく取得できませんでした。";
}
//結果を表示
msgElement.innerHTML = ret;
}
}
}}
補足:上記の例では、onloadやonchangeイベントハンドラの追...
当然のことですが、このようにAjaxでは、JavaScriptの知識が...
**参考 [#z57fa47e]
-[[An Introduction to AJAX Techniques and Frameworks for ...
-[[クライアント スクリプトを使用する ASP.NET Web ページの...
**コメント [#q1984f69]
#comment
//これより下は編集しないでください
#pageinfo([[:Category/.NET]] [[:Category/ASP.NET]],2007-1...
ページ名:
▲
▼
[
トップ
] [
新規
|
子ページ作成
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]