案列一：从服务器的得到输出的数据

Jsp界面

    <script type="text/javascript" src="test.js"></script>   //引入js中的script语句

  <body>

      <form action="AjaxServlet">   //这里提交到哪里和下面的和谁连接没啥关系，这里改成AjaxServlet1

          <input type="button" value="ok" id="ok">    //下面不变照样能够得到一样结果

      </form>

  </body>

AjaxServlet界面

 public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        System.out.println("connection succces");

        response.getWriter().print("connection ok");  //这里为什么是write因为下面是responseText

}

test.Js界面

/**

 *  Ajax建立与服务器端的连接  接收服务器的请求 处理服务器返回的数据

 *      开发步骤：

 *         1.创建XMLHttpRequest对象

 *         2.打开和服务器的连接

 *         3.发送数据

 *         4.接收服务器端的响应

 */

/**

 * 1.创建XMLHttpRequest 对象

 */

function createXMLHttpRequest() {       //万能模板

    var XMLHttpReq;

    if (window.XMLHttpRequest) {   // 是Mozilla浏览器

        XMLHttpReq = new XMLHttpRequest();

    } else if (window.ActiveXObject()) { // IE浏览器

        try {

            XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP"); //因为ie也会出现不兼容所以抛异常

        } catch (e) {

            XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");  //微软的，记住就好

        }

}

    return XMLHttpReq;

}

    //ok按钮点击时触发事件，这里我和之前所想的思维都不一样，因为正常情况window.onload一旦加载下面没有点击onclick，那么该方法不执行，然而后面当你点击按钮时，因为已经加载结束了，按道理来讲就算里面为onclick这个方法也不会执行，因为你在window.onload里面，大方法都没有执行，方法里面的方法是不会执行的，但这里还是触发了时间，这也说明老师说的window.onload除了有加载情况下，还有监听的作用，一点触发事件就会触发该方法，这点要明白，同时如果当你去window.onload=function，这个外层的方法，就算你触发事件也不会有反应，因为 document.getElementById("ok")是要放在方法里，而不是放在外面。

    window.onload=function(){       //加载时运行，同时具有监听的作用

     document.getElementById("ok").onclick=function(){ //通过按钮触发事件

          //1.创建XMLHttpRequest对象

         var xmlReq=createXMLHttpRequest();

         //2.打开和服务器端的连接

         xmlReq.open("GET","AjaxServlet",true);//有GTE和POST方法，中间代表连接路径，true代表异步

         //3.发送数据

         xmlReq.send(null); //因为采用的是get方法，所以方法为null

         //4.接收服务器的响应

         xmlReq.onreadystatechange=function(){

             if(xmlReq.readyState==4){//判断对象状态是否完成

               if(xmlReq.status==200){     //信息已经成功返回

                var xmltext =xmlReq.responseText;  //得到AjaxServlet往外输出的数据

                     alert("data-"+xmltext);  //输出结果：data-connection ok

             }
         }
      }
   }
 }

基础2.通过Ajax获得servlet数据（最基础）的更多相关文章

  1. ajax和servlet交互，表单日历插件，表单验证，form.js

    我的index.jsp <body> <a>点我获取数据</a> <table border=1px> <tr> <td>ID& ...

  2. ajax和servlet交互

    网上有比较多的教程来将如何实现ajax与servlet的交互了,这里和这里的教程可以参考参考,在此处我只简单说明一下,并记录一下我这次遇到的问题. 整个思路是:写个js函数,在里面使用XHR(ajax ...

  3. Jquery+ajax+json+servlet原理和Demo

    Jquery+ajax+json+servlet原理和Demo 大致过程: 用户时间点击,触发js,设置$.ajax,开始请求.服务器响应,获取ajax传递的值,然后处理.以JSON格式返回给ajax ...

  4. {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)

    Django基础七之Ajax 本节目录 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解) 一 Ajax简介 ...

  5. Ajax+Jsp+servlet+json技术的使用

    Ajax+Jsp+servlet+json技术的使用 在使用json的时候,记得必须导入如下几个.jar包,最好是手动复制.jar包只lib路径下,否则可能出现异常. commons-beanutil ...

  6. Django基础七之Ajax

    一 Ajax简介 1.简介 AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步的Javascript和XML”.即使用Javascript语言与服务器进行异 ...

  7. ajax 请求后台数据返回异常 及 提示404方法名不存在

    1.正常使用 Ajax 调取后台数据时,提示方法名不存在,Ajax前端正常,方法类bean注入正常,方法注解正常.但参数解析时出现异常. @RequestMapping(value="/ge ...

  8. ajax 发送json数据时为什么需要设置contentType: "application/json”

    1. ajax发送json数据时设置contentType: "application/json”和不设置时到底有什么区别? contentType: "application/j ...

  9. ajax发送json数据时为什么需要设置contentType: "application/json”

    1. ajax发送json数据时设置contentType: "application/json”和不设置时到底有什么区别?contentType: "application/js ...

随机推荐

  1. CentOS 7 Git安装

    Git安装 yum -y install git 安装后,在srv目录下建立Git的目录. 初始化一个git空仓库 git init --bare project.git 增加用于访问git仓库的用户 ...

  2. SecureCRT 常用命令

    常用命令:一.ls 只列出文件名 (相当于dir,dir也可以使用) -A:列出所有文件,包含隐藏文件. -l:列表形式,包含文件的绝大部分属性. -R:递归显示. --help:此命令的帮助. 二. ...

  3. Ninject学习（一） - Dependency Injection By Hand

    大体上是把官网上的翻译下而已. http://www.ninject.90iogjkdcrorg/wiki.html Dependency Injection By Hand So what's Ni ...

  4. 三年回首：C基础

    atoi 实现注意: 要可以表示负数:处理到空格要结束:空串""返回0:NULL直接seg fault:溢出判断(atoi(2147483648)实际得到的是-2147483648 ...

  5. codeforces 484D Kindergarten （dp、贪心）

    题意:给n个数,分成若干个连续组,每组获益为max-min,输出最大获益. 参考:http://blog.csdn.net/keshuai19940722/article/details/408735 ...

  6. [Sass]混合宏

    [Sass]混合宏-声明混合宏 如果整个网站中有几处小样式类似,比如颜色,字体等,在 Sass 可以使用变量来统一处理,那么这种选择还是不错的.但当你的样式变得越来越复杂,需要重复使用大段的样式时,使 ...

  7. axure rp8.0 序列号，亲测可以用

    转载自:https://zhidao.baidu.com/question/428326076480233092.html aaa 2GQrt5XHYY7SBK/4b22Gm4Dh8alaR0/0k3 ...

  8. 安卓真机调试 出现Installation error: INSTALL_FAILED_UPDATE_INCOMPATIBLE....

    [2016-08-20 14:38:39 - hybrid-android] Installation error: INSTALL_FAILED_UPDATE_INCOMPATIBLE[2016-0 ...

  9. 利用代码添加autolayout约束

    1.概述 通常我们通过storyboard能够完成的,代码也能够完成,所以这里介绍下代码实现约束的添加,通常我们不这么干(在不使用第三方框架的情况下,使用系统自带的类添加约束特别繁琐),所以这里仅仅简 ...

  10. 【转】Js获取当前日期时间及格式化操作

    (转自:http://www.cnblogs.com/qinpengming/archive/2012/12/03/2800002.html) var myDate = new Date(); myD ...