首页 > Web开发 > 详细

有关Ajax实现的两种方法

时间:2016-10-20 14:33:26      阅读:147      评论:0      收藏:0      [点我收藏+]

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

 1 /**
 2  *AJAX
 3  */
 4 function showLastTime(){
 5     var facilityId = $(‘*[name="facilityId"]‘).val();  //页面取值
 6     var mainteType = $("#mainteType").val();  
 7     var mainteWorkNm = $("#mainteWorkNm").val();  
 8     var url = AP_BASE_URL + "c412s/showLastYmd/";  //url的生成
 9     if(facilityId !=""&&mainteType !=""&&mainteWorkNm !=""){
10         $.ajax({
11             async:false,  //false为同步(用户需要等待刷新完才能操作),true为异步(不需要等待,可以进行其他操作)
12             url: url,     //请求的URL
13             type: ‘POST‘, //两种方式POST和GET,POST方式为隐形传输,GET会将所传参数和值拼写在url中(推荐POST)
14             data: {
15                 //以下为所需传递的参数
16                 ‘facilityId‘:facilityId,
17                 ‘mainteTypeCd‘:mainteType,
18                 ‘mainteWorkId‘:mainteWorkNm
19             },
20             //cache: false,
21             error: function(XMLHttpRequest, textStatus, errorThrown){
22                 ajaxError(XMLHttpRequest, textStatus, errorThrown);
23             },
24             success: function(data) {    //data为后台传回的数据
25                 $(".info").html(data);    //收到回传数据后执行的操作
26             }
27         });
28     }else{
29         $(".info").text("");
30     }
31     return false;
32 }

其次为普通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代码取值

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

 

有关Ajax实现的两种方法

原文:http://www.cnblogs.com/liangchao01/p/5980238.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!