ajax的get和post请求方式

1、 4/4ajax的get和post请求方式 Ajax的GET和POST请求方式(1) 这个表单包含了一个操作（Operator）的数据，而这个操作一定是属于某个目录（Dir），因此需要一个下拉列表来选择操作所属的目录。 以上面这个表单的添加功能为例，试图将表单的数据通过调用addOperator()函数，将数据传送到JavaScript中，然后拼接出URL，进行Ajax的异步请求调用。GET请求方式下面是以GET方式异步请求Action。首先需要创建一个XMLHttpRequest对象，调用下面的函数：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); 接着实现

3、addOperator()函数：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下拉列表中 被选中的项，get()函数在后面有实现 / 验证表单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 = 表单数据不完整

6、，不能添加!; return false; if(isNaN(addOperatorId) document.getElementById(tipsInfo).style.height = 25px; document.getElementById(tipsInfo).innerText = 操作ID必须是数字!; 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()函数如下所示：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;说明：提取表单中的数据，拼接好url，使用GET方式请求：xmlHttp.open(GET, manageOperator.do?method=addOperator + encodeURI(encodeURI(url

9、), true);这里，使用encodeURI()方式对url实现两次编码，因为表单数据有中文字符，发送到Action中以后还要对其进行解码操作。如果假设operatorName为中文字符，例如：String operatorName = http:/./doc/4a126f360b4c2e3f5727630b.html .URLDecoder(request.getParameter(operatorName),UTF-8);这样，才能将encodeURI(encodeURI(url)中的中文字符解码，不出现乱码问题。因为使用GET请求，所以不需要通过send()函数发送数据，如下：xmlH

10、ttp.send(null);POST请求方式但是，对于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()中请求URL只需要制指定请求的Action。同时，需要设置请求头，以实现URL内容的正确编码：xmlHttp.setRequestHeader(Content-Type,application/x-