有关Ajax实现的两种方法

时间:2023-03-08 21:21:55

首先我们来常见的Jquery式的Ajax写法,以及在java后台的取值

 /**
*AJAX
*/
function showLastTime(){
var facilityId = $('*[name="facilityId"]').val(); //页面取值
var mainteType = $("#mainteType").val();
var mainteWorkNm = $("#mainteWorkNm").val();
var url = AP_BASE_URL + "c412s/showLastYmd/"; //url的生成
if(facilityId !=""&&mainteType !=""&&mainteWorkNm !=""){
$.ajax({
async:false, //false为同步(用户需要等待刷新完才能操作),true为异步(不需要等待,可以进行其他操作)
url: url, //请求的URL
type: 'POST', //两种方式POST和GET,POST方式为隐形传输,GET会将所传参数和值拼写在url中(推荐POST)
data: {
//以下为所需传递的参数
'facilityId':facilityId,
'mainteTypeCd':mainteType,
'mainteWorkId':mainteWorkNm
},
//cache: false,
error: function(XMLHttpRequest, textStatus, errorThrown){
ajaxError(XMLHttpRequest, textStatus, errorThrown);
},
success: function(data) { //data为后台传回的数据
$(".info").html(data); //收到回传数据后执行的操作
}
});
}else{
$(".info").text("");
}
return false;
}

其次为普通JS的Ajax的写法

function showLastTime2(){
var mainteType = $("#mainteType").val();
var mainteWorkNm = $("#mainteWorkNm").val();
var facilityId = $('*[name="facilityId"]').val();
var url = AP_BASE_URL + "c412s/showLastYmd2/";
var xmlhttp;
//创建XMLHttpRequest 对象
if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{ // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if(facilityId !=""&&mainteType !=""&&mainteWorkNm !=""){
xmlhttp.open("POST",url,false); //向服务器发送请求,false为同步(用户需要等待刷新完才能操作),true为异步(不需要等待,可以进行其他操作)
xmlhttp.setRequestHeader("CONTENT-TYPE", "application/x-www-form-urlencoded"); //如果使用POST方式必须添加该行代码,向请求添加 HTTP 头
xmlhttp.send("mainteTypeCd="+mainteType+"&mainteWorkId="+mainteWorkNm+"&facilityId="+facilityId); //传参
xmlhttp.onreadystatechange=function(){ //如果服务器状态改变触发事件
if(xmlhttp.readyState==4 && xmlhttp.status==200){ //不懂查看下表,大意为在请求完成并且状态为OK时
$(".info").html(xmlhttp.responseText); //xmlhttp.responseText为服务器传回的值
}
};
}else{
$(".info").text("");
}
属性 描述
onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成,且响应已就绪
status

200: "OK"

404: 未找到页面

后台Java代码取值

 public String showLastYmd2(HttpServletRequest request HttpServletResponse response){
request.getParameter("facilityId");
request.getParameter("mainteTypeCd");
request.getParameter("mainteWorkId");
response.write("data"); //传回参数
}