快捷導(dǎo)航

javascript請(qǐng)求servlet實(shí)現(xiàn)ajax示例(分享)

更新時(shí)間：2017年06月03日 10:58:45 投稿：jingxian

下面小編就為大家?guī)?lái)一篇javascript請(qǐng)求servlet實(shí)現(xiàn)ajax示例(分享)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

ajax請(qǐng)求是一種無(wú)刷新式的用戶體驗(yàn)，可以發(fā)送GET和POST兩種異步請(qǐng)求，現(xiàn)記錄如下：

GET請(qǐng)求：

function sendRequestByGet(){
     //定義異步請(qǐng)求對(duì)象
    var xmlReq;
    //檢測(cè)瀏覽器是否直接支持ajax
    if(window.XMLHttpRequest){//直接支持ajax
      xmlReq=new XMLHttpRequest();
    }else{//不直接支持ajax
      xmlReq=new ActiveObject('Microsoft.XMLHTTP');
    }
    
     //設(shè)置回調(diào)函數(shù)
     xmlReq.onreadystatechange=function(){
       if (xmlReq.readyState==4&&xmlReq.status==200) {
         //獲取服務(wù)器的響應(yīng)值
        var result=xmlReq.responseText;
         //后續(xù)操作
         alert(result);
      }
     };
     
     //創(chuàng)建異步get請(qǐng)求
     var url="Hello?name=zhangsan";
     xmlReq.open("GET",url,true);
     //發(fā)送請(qǐng)求
     xmlReq.send(null);
   }

POST請(qǐng)求：

function sendRequestByPost(){
     //定義異步請(qǐng)求對(duì)象
    var xmlReq;
    //檢測(cè)瀏覽器是否直接支持ajax
    if(window.XMLHttpRequest){//直接支持ajax
      xmlReq=new XMLHttpRequest();
    }else{//不直接支持ajax
      xmlReq=new ActiveObject('Microsoft.XMLHTTP');
    }
    
     //設(shè)置回調(diào)函數(shù)
     xmlReq.onreadystatechange=function(){
       if (xmlReq.readyState==4&&xmlReq.status==200) {
         //獲取服務(wù)器的響應(yīng)值
        var result=xmlReq.responseText;
         //后續(xù)操作
         alert(result);
      }
     };
     
     //創(chuàng)建異步Post請(qǐng)求
     var url="Hello";
     xmlReq.open("POST",url,true);
     xmlReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
     //發(fā)送請(qǐng)求
     var data="name=lisi";
     xmlReq.send(data);
   }

ajax請(qǐng)求的servlet：

@Override
  protected void doPost(HttpServletRequest req, HttpServletResponse resp)
      throws ServletException, IOException {
    String name=req.getParameter("name");
    PrintWriter out = resp.getWriter();
    out.print(name);
  }

效果：