Prototype AJAX 示例

最新推荐文章于 2025-07-18 08:18:10 发布

原创最新推荐文章于 2025-07-18 08:18:10 发布 · 119 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Ajax #prototype #JSP

AJAX 专栏收录该内容

3 篇文章

订阅专栏

本文提供了GET与POST请求的示例代码，包括通过按钮触发GET请求获取客户信息的过程及使用表单提交POST请求保存数据的方法。文章还展示了如何利用Ajax处理这两种HTTP请求方式，并通过JavaScript实现与服务器端的有效交互。

[size=medium]GET 示例[/size]


<p>Enter customer ID: <input type='text' id='customerID' /></p>
<p><input type="button" value='Get Customer Info' onclick='requestCustomerInfo()' /></p>
<div id='rs'></div>

function requestCustomerInfo() {
            var sID = document.getElementById('customerID').value;
            var req = new Ajax.Request('getCustomerData.jsp', {
                method: 'get',
                parameters: 'id=' + sID,

                onSuccess: function (oXHR, oJson) {
                    displayInfo("responseText: " + oXHR.responseText + 
								"statusText: " + oXHR.statusText);
                },

                onFailure: function (oXHR, oJson) {
                    displayInfo('An error occurred: ' + oXHR.statusText);
                }
            });
}

function displayInfo(sText) {
            document.getElementById('rs').innerHTML = sText;
}

[size=medium]POST 示例[/size]


<!--这里的action没有参数哦~~-->
<form id='id_of_form_element' method='post' action='' onsubmit='sendRequest(); return false'>
    name: <input type='text' name='name' /><br />
    age: <input type='text' name='age' /><br />
    <input type='submit' value='Save' />
</form>
<div id='rs'></div>

<script type="text/javascript">
    //取得表单数据并编码
	//name=apq&age=100
    function getFormParams(oForm) {
        var rs = [];
        for (var i = 0, len = oForm.elements.length; i < len; i++) {
            var oField = oForm.elements[i];
            switch (oField.type) {
                case "button": case "submit": case "reset": break;
                case "radio": case "checkbox": if (!oField.checked) { break; }
                case "text": case "hidden": case "password":
                    rs[rs.length] = addPostParam("", oField.name, oField.value);
                    break;
                default:
                    switch (oField.tagName.toLowerCase()) {
                        case "select":
                            rs[rs.length] = addPostParam("", oField.name, oField.options[oField.selectedIndex].value);
                            break;
                        default:
                            rs[rs.length] = addPostParam("", oField.name, oField.value);
                    }
            }
        }
        return rs.join("&");
    }

    function addPostParam(sParam, sKey, sValue) {
        if (sParam.length > 0) sParam += "&";
        return sParam + encodeURIComponent(sKey) + "=" + encodeURIComponent(sValue);
    }

	function displayInfo(txt) {
		document.getElementById("rs").innerHTML = txt;
	}

function sendRequest() {
		//注意: 旧的prototype没有提供表单数据编码的方法， 所以这里要手动编下码
        /*var sFormParam = getFormParams(document.forms[0]);

        var req = new Ajax.Request('saveCustomerData.jsp', {
            method: 'post',
            parameters: sFormParam,

            onSuccess: function (oXHR, oJson) {
                displayInfo(oXHR.responseText);
            },

            onFailure: function (oXHR, oJson) {
                displayInfo('An error occurred: ' + oXHR.statusText);
            }
        });*/

		//哈哈，新的不用手动了
		new Ajax.Request('saveCustomerData.jsp', {
			method: 'post',
			//取得表单数据并编码
			parameters: $('id_of_form_element').serialize(true),
			onSuccess: function (oXHR, oJson) {
                displayInfo(oXHR.responseText);
            },

            onFailure: function (oXHR, oJson) {
                displayInfo('An error occurred: ' + oXHR.statusText);
            }
		});
    }

    </script>


//应答器
	Ajax.Responders.register({
        onCreate: function (oXHR, oJson) {
            document.getElementById('status').innerHTML = "服务器连接中...";
        },

        onComplete: function (oXHR, oJson) {
            document.getElementById('status').innerHTML = "已收到响应";
        }
    });

或者这种方式也是自动编码的
new Ajax.Request('/some_url', { method: 'get', parameters: {company: 'example', limit: 12} });


function getRequestBody(oForm) {
        var oParams = {};
        for (var i = 0, len = oForm.elements.length; i < len; i++) {
            var oField = oForm.elements[i];
            switch (oField.type) {
                case "button": case "submit": case "reset": break;
                case "radio": case "checkbox":
                    if (!oField.checked) { break; }
                case "text": case "hidden": case "password":
                    oParams[oField.name] = oField.value;
                    break;
                default:
                    switch (oField.tagName.toLowerCase()) {
                        case "select":
                            oParams[oField.name] = oField.options[oField.selectedIndex].value;
                            break;
                        default:
                            oParams[oField.name] = oField.value;
                    }
            }

        }
        return oParams;
    }

function sendRequest() {
		new Ajax.Request('saveCustomerData.jsp', {
			method: 'post',
			//取得表单数据并编码
			parameters: getRequestBody(document.forms[0]),
			onSuccess: function (oXHR, oJson) {
                displayInfo(oXHR.responseText);
            },

            onFailure: function (oXHR, oJson) {
                displayInfo('An error occurred: ' + oXHR.statusText);
            }
		});
    }