○ javascriptでサーバに対して送受信
button1を押すと、javascriptが動き出して、サーバに対して送受信を行い、
その結果を出力する
バックグラウンドでjavascriptが送受信するため、画面全体の再読み込みは発生しない。
■テキストで送受信する --------------------------------------------------------
javascript―(text)→ASP.net―(text)→javascript
▼ aspx抜粋
<script language="javascript" type="text/javascript">
function hoge() {
//javascriptオブジェクトを取得
try {
var http = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
var http = new XMLHttpRequest();
}
//受信時のコールバック関数を登録
http.onreadystatechange = function() {
if (http.readyState == 4 && http.status == 200) {
var data = http.responseText;
document.getElementById("TextBox1").value=data;
}
}
//送信
var pos=document.getElementById("TextBox1").value;
//文字コード変換
pos=encodeURIComponent(pos);
//呼び出すアドレスにパラメータ key=値 を追加し送信 複数のパラメータは&でつなげる
http.open("GET","Default.aspx?key="+pos);
http.send(null);
}
</script>
</head>
<body>
<asp:TextBox ID="TextBox1" runat="server" Style="position: relative"></asp:TextBox>
<input id="button1" type="button" value="button1" onclick="return hoge()" /></div>
</body>
</html>
▼ cs抜粋
Page_Loadで通常のリクエストとjavascriptからのリクエストを切り替える
アドレスにパラメータ"key"が含まれている場合にはjavascriptからのリクエストと判断する
protected void Page_Load(object sender, EventArgs e)
{
String str = Request.QueryString["key"];
if (str != null)
{
//渡された文字に1を追加して返す
str = str + "1";
Response.ContentType = "text/plain";
Response.Write(str);
Response.End();
}
}
■テキストで受取りXMLで送信する１ --------------------------------------------------------
javascript―(text)→ASP.net―(xml)→javascript
後に続く２とはXMLデータの生成方法が違う
▼ aspx抜粋
<script language="javascript" type="text/javascript">
function hoge() {
//javascriptオブジェクトを取得
try {
var http = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
var http = new XMLHttpRequest();
}
//受信時のコールバック関数を登録
http.onreadystatechange = function() {
if (http.readyState == 4 && http.status == 200) {
var data = http.responseXML.documentElement;
var str=data.childNodes[0].firstChild.nodeValue;
str+=" ";
str+=data.childNodes[1].firstChild.nodeValue;
document.getElementById("TextBox1").value=str;
}
}
//送信
var pos=document.getElementById("TextBox1").value;
//文字コード変換
pos=encodeURIComponent(pos);
http.open("GET","Default.aspx?key="+pos); //複数のパラメータは&でつなげる
http.send(null);
}
</script>
▼ cs抜粋
Page_Loadで通常のリクエストとjavascriptからのリクエストを切り替える
public class xmldata
{
public String str;
public int no;
}
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
String str = Request.QueryString["key"];
if (str != null)
{
Response.ContentType = "text/xml";
xmldata obj = new xmldata();
obj.str = "文字列";
obj.no = 4444;
System.Xml.Serialization.XmlSerializer serializer =
new System.Xml.Serialization.XmlSerializer(typeof(xmldata));
System.IO.Stream st = Response.OutputStream;
serializer.Serialize(st, obj);
Response.End();
}
}
}
■テキストで受取りXMLで送信する２ --------------------------------------------------------
javascript―(text)→ASP.net―(xml)→javascript
１とはXMLデータの生成方法が違う
▼ aspx抜粋
<script language="javascript" type="text/javascript">
function hoge() {
//javascriptオブジェクトを取得
try {
var http = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
var http = new XMLHttpRequest();
}
//受信時のコールバック関数を登録
http.onreadystatechange = function() {
if (http.readyState == 4 && http.status == 200) {
var str="";
var nodes=http.responseXML.documentElement;
for (i =0; i < nodes.childNodes.length; i++) {
var node=nodes.childNodes.item(i);
//strの値
str+=node.childNodes.item(0).firstChild.nodeValue;
str+=" ";
//noの値
str+=node.childNodes.item(1).firstChild.nodeValue;
str+="\n";
}
document.getElementById("TextBox1").value=str;
}
}
//送信
var pos=document.getElementById("TextBox1").value;
//文字コード変換
pos=encodeURIComponent(pos);
http.open("GET","Default.aspx?key="+pos); // 複数のパラメータは&でつなげる
http.send(null);
}
</script>
▼ サーバーから送信するXML
サーバーから次のXMLを作成し出力する
<?xml version="1.0" encoding="utf-8"?>
<test>
<element>
<str>String1</str>
<no>1</no>
</element>
<element>
<str>String2</str>
<no>2</no>
</element>
<element>
<str>String3</str>
<no>3</no>
</element>
</test>
▼ cs抜粋
protected void Page_Load(object sender, EventArgs e)
{
String str = Request.QueryString["key"];
if (str != null)
{
Response.ContentType = "text/xml";
System.IO.Stream st = Response.OutputStream;
System.Xml.XmlTextWriter xmlw = new System.Xml.XmlTextWriter(st, System.Text.Encoding.UTF8);
xmlw.WriteStartDocument();
{
xmlw.WriteStartElement("test");
{
xmlw.WriteStartElement("element");
{
xmlw.WriteElementString("str", "String1");
xmlw.WriteElementString("no", "1");
} xmlw.WriteEndElement();
xmlw.WriteStartElement("element");
{
xmlw.WriteElementString("str", "String2");
xmlw.WriteElementString("no", "2");
} xmlw.WriteEndElement();
xmlw.WriteStartElement("element");
{
xmlw.WriteElementString("str", "String3");
xmlw.WriteElementString("no", "3");
} xmlw.WriteEndElement();
} xmlw.WriteEndElement();
} xmlw.WriteEndDocument();
xmlw.Close();
Response.End();
}
}
■XMLで送受信する --------------------------------------------------------
javascript―(xml)→ASP.net―(xml)→javascript
▼ aspx
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>無題のページ</title>
<script language="javascript" type="text/javascript">
function hoge() {
//javascriptオブジェクトを取得
try {
var http = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
var http = new XMLHttpRequest();
}
//受信時のコールバック関数を登録
http.onreadystatechange = function() {
if (http.readyState == 4 && http.status == 200) {
var nodes = http.responseXML.documentElement;
//タグ名 str のノードを検索する
var node=nodes.getElementsByTagName("str");
var str="";
for(i=0;i<node.length;i++){
str+=node[i].childNodes[0].nodeValue+"\n";
}
document.getElementById("TextBox1").value=str;
}
}
//xml文の作成
var xmlString="<test>"+
"<str>"+"String1"+"</str>"+
"<str>"+"String2"+"</str>"+
"</test>";
//送信
http.open("POST","Default.aspx");
http.setRequestHeader("Content-Type", "text/xml");
http.send(xmlString);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server" Height="248px" TextMode="MultiLine" Width="424px"></asp:TextBox>
<input id="Submit1" type="button" value="submit" onclick="return hoge()" /></div>
</form>
</body>
</html>
▼ cs抜粋
protected void Page_Load(object sender, EventArgs e)
{
//リクエストがXMLの場合
if ("text/xml"==Request.ContentType)
{
//XMLの受信-----------------------------------
System.Xml.XmlDocument doc = new System.Xml.XmlDocument();
doc.Load(new System.IO.StreamReader(Request.InputStream, System.Text.Encoding.UTF8));
//タグ名 str のノードを検索する
System.Xml.XmlNodeList node = doc.GetElementsByTagName("str");
String pos="";
for (int i = 0; i < node.Count; i++)
{
//ノードの値にアクセス
pos += node[i].ChildNodes[0].Value+" ";
}
//XMLの送信-----------------------------------
Response.ContentType = "text/xml";
System.Xml.XmlTextWriter xmlw = new System.Xml.XmlTextWriter(Response.OutputStream, System.Text.Encoding.UTF8);
//XMLの作成
xmlw.WriteStartDocument();
{
xmlw.WriteStartElement("test");
{
xmlw.WriteElementString("str", pos);
} xmlw.WriteEndElement();
} xmlw.WriteEndDocument();
xmlw.Close();
Response.End();
}
}
▲トップページ
>
Visual BASIC と C#