ajax的get和post请求方式

Ajax的GET和POST请求方式(1)
这个表单包含了一个操作（Operator）的数据，而这个操作一定是属于某个目录（Dir），因此需要一个下拉列表来选择操作所属的目录。

管理操作功能面板
ID		名称		类型		所属目录	<% for(int i=0;i Dir dir = (Dir)dirList.get(i); %> <%=dir.getName() %> <% } %>
链接			类名全称

以上面这个表单的添加功能为例，试图将表单的数据通过调用addOperator()函数，将数据传送到JavaScript中，然后拼接出URL，进行Ajax的异步请求调用。
GET请求方式
下面是以GET方式异步请求Action。
首先需要创建一个XMLHttpRequest对象，调用下面的函数：
function createXMLHttp() {
if (typeof XMLHttpRequest != "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(aVersions[i]);
}
catch (e) {
alert("error");
}
}
}
}
}
接着实现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.getElementById("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.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 = "表单数据不完整，不能添加!!!";
return false;
}
if(isNaN(addOperatorId)) {
document.getElementById("tipsInfo").style.height = "25px";
document.getElementById("tipsInfo").innerText = "操作ID必须是数字!!!";
return false;
}
// 拼接URL
var url = "&operatorId=" + addOperatorId
+ "&operatorName=" + addOperatorName
+ "&operatorType=" +addOperatorType
+ "&operatorClsName=" + addOperatorClsName
+ "&operatorURL=" + addOperatorURL
+ "&dirId=" +　dirId;
if(xmlHttp == null) {
xmlHttp = createXMLHttp();
}
xmlHttp.open("GET", "manageOperator.do?method=addOperator" + encodeURI(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 = document.getElementById(selectId);
var options = select.getElementsByTagName("option");
var id = null;
for(var i=0;i if(options[i].selected) {
id = options[i].value;
break;
}
}
return id;
}
说明：
提取表单中的数据，拼接好url，使用GET方式请求：
xmlHttp.open("GET", "manageOperator.do?method=addOperator" + encodeURI(encodeURI(url)), true);
这里，使用encodeURI()方式对url实现两次编码，因为表单数据有中文字符，发送到Action中以后还要对其进行解码操作。如果假设operatorName为中文字符，例如：
String operatorName = .URLDecoder(request.getParameter("operatorName"),"UTF-8");
这样，才能将encodeURI(encodeURI(url))中的中文字符解码，不出现乱码问题。
因为使用GET请求，所以不需要通过send()函数发送数据，如下：
xmlHttp.send(null);
POST请求方式
但是，对于POST方式，就不同了，代码片段如下所示：
xmlHttp.open("POST", "manageOperator.do?method=addOperator", true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-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-www-form-urlencoded");
而且，还要通过send()函数将拼接好的URL发送到Action，如下：
xmlHttp.send(url);
至于在页面上如何动态显示添加的记录，你就可以通过DOM来方便地实现，可以在记录列表中插入一个行，将获取到的表单中的数据对应地显示在这个行里面，因为是异步请求，页面不需要刷新，用户体验肯定是不错的。