javascript请求servlet实现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示例(分享)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 实例解读Ajax与servlet交互的方法

    本文以实例形式剖析了Ajax与servlet的交互,并且代码中有较为详细的注释,以帮助大家阅读理解.具体的实现方法如下: 1.JavaScript部分 var req; /*通过异步传输XMLHTTP发送参数到ajaxServlet,返回符合条件的XML文档*/ var url; function getResult() { var f=document.getElementById("form_pub"); var key=f.s.options[f.s.selectedIndex]

  • Javascript发送AJAX请求实例代码

    一个对AJAX的封装 //url就是请求的地址 //successFunc就是一个请求返回成功之后的一个function,有一个参数,参数就是服务器返回的报文体 function ajax(url,successFunc) { var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); xhr.open("POST",url,true); xhr.onr

  • 原生js实现ajax方法(超简单)

    上一篇文章写到原生js取代jquery的一些常用函数:原生js仿jquery一些常用方法,那么,ajax如何实现呢?如下是一个比较完整的ajax() function ajax(){ var ajaxData = { type:arguments[0].type || "GET", url:arguments[0].url || "", async:arguments[0].async || "true", data:arguments[0].d

  • 原生JS简单实现ajax的方法示例

    本文实例讲述了原生JS简单实现ajax的方法.分享给大家供大家参考,具体如下: HTML部分: <body> <input type="button" value="Ajax提交" onclick="Ajax();" /> <div id="resText" ></div> </body> 这里有个input按钮,点击会触发click事件,click事件调用Ajax(

  • javascript请求servlet实现ajax示例(分享)

    javascript请求servlet实现ajax示例(分享)

    ajax请求是一种无刷新式的用户体验,可以发送GET和POST两种异步请求,现记录如下: GET请求: function sendRequestByGet(){ //定义异步请求对象 var xmlReq; //检测浏览器是否直接支持ajax if(window.XMLHttpRequest){//直接支持ajax xmlReq=new XMLHttpRequest(); }else{//不直接支持ajax xmlReq=new ActiveObject('Microsoft.XMLHTTP')

  • jquery请求servlet实现ajax异步请求的示例

    jquery请求servlet实现ajax异步请求的示例

    ajax可以发送异步请求实现无刷新效果,但是使用javascript比较麻烦,就query提供了一些封装的方法 ,可以使得操作更为简单: $.ajax()方法: function sendRequest() { $.ajax({ url: "Hello", type: "GET", dataType: "txt", data: "name=zhangsan", complete: function(result){ alert

  • 原生Javascript封装的一个AJAX函数分享

    最近的工作中涉及到大量的ajax操作,本来该后台做的事也要我来做了.而现在使用的ajax函数是一个后台人员封装的--但他又是基于jquery的ajax,所以离开了jquery这个函数就毫无作用了.而且我觉得,jquery的ajax方法是很完善的了,可以直接用,如果都有jquery了,那么他的ajax就不用白不用了.我缺少的是一个能在没有jquery的情况下使用的ajax方法. 所以我也花一天时间写了一个,参数与调用方法类似于jquery的ajax.就叫xhr吧,因为xhr=XMLHttpRequ

  • java模拟post请求登录猫扑示例分享

    复制代码 代码如下: import java.io.BufferedReader;import java.io.File;import java.io.FileOutputStream;import java.io.IOException;import java.io.InputStream;import java.io.InputStreamReader;import java.io.OutputStreamWriter;import java.net.HttpURLConnection;im

  • javascript生成json数据简单示例分享

    复制代码 代码如下: //定义对象var finalInfo = new Object(); //为对象赋值finalInfo.purchaseInfoId = '';finalInfo.purchaseMethodType = '';finalInfo.contact = '';finalInfo.contactTel = '';finalInfo.bidInfoStr = '';//将对象转换为json格式var finalInfoStr = JSON.stringify(finalInfo

  • JS请求servlet功能示例

    本文实例讲述了JS请求servlet的方法.分享给大家供大家参考,具体如下: 前端js代码: //创建ajax请求对象 var xmlHttp; function createXMLHttpRequest(){ if(window.ActiveXObject){ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if(window.XMLHttpRequest){ xmlHttp = new XMLHttpRequest(

  • javascript实现简单的ajax封装示例

    本文实例讲述了javascript实现简单的ajax功能封装.分享给大家供大家参考,具体如下: function ajax(obj){ var xhr = (function (){//获取xhr对象,为了兼容ie6所以进行了重新封装 if(typeof XMLHttpRequest !='undefined') { return new XMLHttpRequest(); }else if(typeof ActiveXObject !='undefined') { var version =

  • Servlet获取AJAX POST请求中参数以form data和request payload形式传输的方法

    本文实例讲述了Servlet获取AJAX POST请求中参数以form data和request payload形式传输的方法.分享给大家供大家参考,具体如下: HTTP请求中,如果是get请求,那么表单参数以name=value&name1=value1的形式附到url的后面,如果是post请求,那么表单参数是在请求体中,也是以name=value&name1=value1的形式在请求体中.通过chrome的开发者工具可以看到如下(这里是可读的形式,不是真正的HTTP请求协议的请求格式)

  • history保存列表页ajax请求的状态使用示例详解

    目录 问题 优化前代码 history history.pushState() window.onpopstate 问题2 问题 最近碰到两个问题: 从首页进入列表页之后,点击下一页的时候,使用ajax请求更新数据, 然后点击浏览器“后退”按钮就直接返回到首页,实际这里想要的效果是返回列表页上一页. 在列表页分页为2的页面进入详情页,然后点击“后退”按钮,返回的事列表页分页为1的页面.没法记住之前分页状态. 优化前代码 代码如下,在页数变化的时候,去异步请求数据,渲染页面. const curr

  • JavaScript中浅讲ajax图文详解

    JavaScript中浅讲ajax图文详解

    1.ajax入门案例 1.1 搭建Web环境 ajax对于各位来说,应该都不陌生,正因为ajax的产生,导致前台页面和服务器之间的数据传输变得非常容易,同时还可以实现页面的局部刷新.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 对于JavaWeb项目而言,ajax主要用于浏览器和服务器之间数据的传输. 如果是单单地堆砌知识点,会显得比较无聊,那么根据惯例,我先不继续介绍ajax,而是来写一个案例吧. 打开

随机推荐