Prototype AJAX 示例

GET 示例

<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;
}

POST 示例

<!--这里的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);
            }
		});
    }