○ 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で送信する1 --------------------------------------------------------

javascript―(text)→ASP.net―(xml)→javascript
後に続く2とは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で送信する2 --------------------------------------------------------

javascript―(text)→ASP.net―(xml)→javascript
1とは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#