ajax的get和post請(qǐng)求方式

1、 4/4ajax的get和post請(qǐng)求方式 Ajax的GET和POST請(qǐng)求方式(1) 這個(gè)表單包含了一個(gè)操作（Operator）的數(shù)據(jù)，而這個(gè)操作一定是屬于某個(gè)目錄（Dir），因此需要一個(gè)下拉列表來(lái)選擇操作所屬的目錄。 以上面這個(gè)表單的添加功能為例，試圖將表單的數(shù)據(jù)通過(guò)調(diào)用addOperator()函數(shù)，將數(shù)據(jù)傳送到JavaScript中，然后拼接出URL，進(jìn)行Ajax的異步請(qǐng)求調(diào)用。GET請(qǐng)求方式下面是以GET方式異步請(qǐng)求Action。首先需要?jiǎng)?chuàng)建一個(gè)XMLHttpRequest對(duì)象，調(diào)用下面的函數(shù)：function createXMLHttp() if (typeof XMLHttpReq

2、uest != undefined) return new XMLHttpRequest(); else if (window.ActiveXObject) var aVersions = MSXML2.XMLHttp.5.0, MSXML2.XMLHttp.4.0, MSXML2.XMLHttp.3.0, MSXML2.XMLHttp, Microsoft.XMLHttp; for (var i = 0; i aVersions.length; i+) try return new ActiveXObject(aVersionsi); catch (e) alert(error); 接著實(shí)現(xiàn)

3、addOperator()函數(shù)：var xmlHttp =null;function addOperator() var addOperatorId = document.getElementById(addOperatorId).value;var addOperatorName = document.getElementById(addOperatorName).value;var addOperatorType = document.getElementById(addOperatorType).value;var addOperatorClsName = document.getEle

4、mentById(addOperatorClsName).value;var addOperatorURL = document.getElementById(addOperatorURL).value;var dirId = parseInt(get(dir),10); / 獲取id為dir的select下拉列表中 被選中的項(xiàng)，get()函數(shù)在后面有實(shí)現(xiàn) / 驗(yàn)證表單if( (addOperatorId.replace(/(s*)|(s*$)/g, ) = ) | (addOperatorName.replace(/(s*)|(s*$)/g, ) = ) | (addOperatorName

5、.replace(/(s*)|(s*$)/g, ) = ) | (addOperatorType.replace(/(s*)|(s*$)/g, ) = ) | (addOperatorClsName.replace(/(s*)|(s*$)/g, ) = ) | (addOperatorURL.replace(/(s*)|(s*$)/g, ) = ) | (dirId = 0) ) document.getElementById(tipsInfo).style.height = 25px; document.getElementById(tipsInfo).innerText = 表單數(shù)據(jù)不完整

6、，不能添加!; return false; if(isNaN(addOperatorId) document.getElementById(tipsInfo).style.height = 25px; document.getElementById(tipsInfo).innerText = 操作ID必須是數(shù)字!; return false; / 拼接URLvar url = if(xmlHttp = null) xmlHttp = createXMLHttp(); xmlHttp.open(GET, manageOperator.do?method=addOperator + encodeU

7、RI(encodeURI(url), true);xmlHttp.onreadystatechange = function () if (xmlHttp.readyState = 4) if (xmlHttp.status = 200) document.getElementById(tipsInfo).style.height = 25px; document.getElementById(tipsInfo).innerText = 添加操作成功!; ;xmlHttp.send(null);其中，get()函數(shù)如下所示：function get(selectId) var select =

8、 document.getElementById(selectId);var options = select.getElementsByTagName(option);var id = null;for(var i=0;ioptions.length;i+) if(optionsi.selected) id = optionsi.value; break; return id;說(shuō)明：提取表單中的數(shù)據(jù)，拼接好url，使用GET方式請(qǐng)求：xmlHttp.open(GET, manageOperator.do?method=addOperator + encodeURI(encodeURI(url

9、), true);這里，使用encodeURI()方式對(duì)url實(shí)現(xiàn)兩次編碼，因?yàn)楸韱螖?shù)據(jù)有中文字符，發(fā)送到Action中以后還要對(duì)其進(jìn)行解碼操作。如果假設(shè)operatorName為中文字符，例如：String operatorName = http:/./doc/4a126f360b4c2e3f5727630b.html .URLDecoder(request.getParameter(operatorName),UTF-8);這樣，才能將encodeURI(encodeURI(url)中的中文字符解碼，不出現(xiàn)亂碼問(wèn)題。因?yàn)槭褂肎ET請(qǐng)求，所以不需要通過(guò)send()函數(shù)發(fā)送數(shù)據(jù)，如下：xmlH

10、ttp.send(null);POST請(qǐng)求方式但是，對(duì)于POST方式，就不同了，代碼片段如下所示：xmlHttp.open(POST, manageOperator.do?method=addOperator, true);xmlHttp.setRequestHeader(Content-Type,application/x-form-urlencoded);xmlHttp.onreadystatechange = function () if (xmlHttp.readyState = 4) if (xmlHttp.status = 200) document.getElementById(tipsInfo).style.height = 25px; document.getElementById(tipsInfo).innerText = 添加操作成功!; ;xmlHttp.send(ur l); open()中請(qǐng)求URL只需要制指定請(qǐng)求的Action。同時(shí)，需要設(shè)置請(qǐng)求頭，以實(shí)現(xiàn)URL內(nèi)容的正確編碼：xmlHttp.setRequestHeader(Content-Type,application/x-