DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX基礎知識 >> javascript請求servlet實現ajax示例(分享)
javascript請求servlet實現ajax示例(分享)
編輯:AJAX基礎知識     

ajax請求是一種無刷新式的用戶體驗,可以發送GET和POST兩種異步請求,現記錄如下:

GET請求:

function sendRequestByGet(){
     //定義異步請求對象
    var xmlReq;
    //檢測浏覽器是否直接支持ajax
    if(window.XMLHttpRequest){//直接支持ajax
      xmlReq=new XMLHttpRequest();
    }else{//不直接支持ajax
      xmlReq=new ActiveObject('Microsoft.XMLHTTP');
    }
    
     //設置回調函數
     xmlReq.onreadystatechange=function(){
       if (xmlReq.readyState==4&&xmlReq.status==200) {
         //獲取服務器的響應值
        var result=xmlReq.responseText;
         //後續操作
         alert(result);
      }
     };
     
     //創建異步get請求
     var url="Hello?name=zhangsan";
     xmlReq.open("GET",url,true);
     //發送請求
     xmlReq.send(null);
   }

POST請求:

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

ajax請求的servlet:

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

效果:

以上這篇javascript請求servlet實現ajax示例(分享)就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved