<!DOCTYPE html>
<html>

<head>
    <title>外部发送消息</title>
    <script language='javascript' src="scripts/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.jsontotable.min.js"></script>

    <style>
        .jsontotable table,
        .jsontotable th,
        .jsontotable td {
            border: 1px solid black;
            margin: 10px;
            padding: 5px;
            font-size: 12pt;
        }
        
        body {
            line-height: 75%;
            font-family: 宋体, 黑体;
            font-size: 10pt;
        }
        
        table {
            font-size: 100%;
            text-align: left;
            margin-top: 1em;
        }
        
        tr {
            margin: .50em;
            vertical-align: top;
        }
        
        td {
            margin: .50em;
            vertical-align: middle;
            background-color: #EEE;
            padding: 2px;
        }
    </style>

    <script>
        //服务器地址
        var serverURL;
        //clear outpub
        function clear() {
            $("#t_all").text("");
            $("#t_return").text("");
            $("#jsontotable-obj").html("");
        }

        $(document).ready(function() {
        	$("#t_server").val(window.location.protocol +"//" +window.location.host +"/msg");
            serverURL = $("#t_server").val();
            //=======================================匿名访问============================================
            /*使用Get形式发送消息 */
            $("#b_msg_get").click(function() {
                try {
                    clear();
                    $.ajax({
                        url: serverURL + "?to=all&msgtype=msg&msg=hello",
                        type: 'GET',
                        success: function(data, status, xhr) {
                            //返回值
                            $("#t_return").text(data);
                        },
                        error: function(xhr, error, exception) {
                            //ajax 发生错误    
                            alert(error + " " + exception.toString() + " (status:" + xhr.status + " state:" + xhr.readyState + ")");
                        }
                    });
                } catch (e) {
                    //代码发生异常
                    alert(e.name + ":" + e.message + " code:" + e.number);
                }
                return false;
            });
            $("#b_post_text").click(function() {
                try {
                    clear();
                    $.ajax({
                        url: serverURL,
                        type: 'POST',
                        data: "to=all&msgtype=msg&msg=hello",
                        success: function(data, status, xhr) {
                            if (data.substring(0, 7) == "succeed") {
                                //返回值
                                $("#t_return").text(data);
                            } else {
                                //Error 系统返回错误信息
                                alert(data)
                            }
                        },
                        error: function(xhr, error, exception) {
                            //ajax 发生错误    
                            alert(error + " " + exception.toString() + " (status:" + xhr.status + " state:" + xhr.readyState + ")");
                        }
                    });
                } catch (e) {
                    //代码发生异常
                    alert(e.name + ":" + e.message + " code:" + e.number);
                }
                return false;
            });
            $("#b_post_json").click(function() {
                try {
                    clear();
                    var data = {
                        to: "all",
                        msgtype: "msg",
                        msg: "hello"
                    };
                    var jsonStr = JSON.stringify(data);
                    $.ajax({
                        url: serverURL,
                        type: 'POST',
                        data: jsonStr,
                        contentType: 'application/json',
                        success: function(data, status, xhr) {
                            if (data.substring(0, 7) == "succeed") {
                                //返回值
                                $("#t_return").text(data);
                            } else {
                                //Error 系统返回错误信息
                                alert(data);
                            }
                        },
                        error: function(xhr, error, exception) {
                            //ajax 发生错误    
                            alert(error + " " + exception.toString() + " (status:" + xhr.status + " state:" + xhr.readyState + ")");
                        }
                    });
                } catch (e) {
                    //代码发生异常
                    alert(e.name + ":" + e.message + " code:" + e.number);
                }
                return false;
            });
        });
    </script>

</head>

<body>
    <form id="form1" runat="server">
        <h3>外部消息发送示例</h3>
        <h4>
            信息</h4>
        <textarea id="t_return" style="width: 559px; height: 70px;"></textarea>
        <h4>
            服务器URL</h4>
        <div>
            <input type="text" id="t_server" value="http://localhost:8088/msg" onchange="serverURL=this.value;" style="width:500px" /></div>
        <h4>
            外部发送消息</h4>
        &nbsp;
        <button id="b_msg_get">
        Get方式发送</button> &nbsp;
        <button id="b_post_text">
        Post方式(urlencoded)</button> &nbsp;
        <button id="b_post_json">
            Post方式(JSON)</button> &nbsp;
        <div>
            <p>
                注：示例里为了便于查看，每个按钮都编写了独立完整的代码，实际应用中可编写为一个函数传参集中调用。</p>
            <br />
        </div>
    </form>
</body>

</html>