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

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. 天河微信小程序入门:阿里云tomcat免费配置https

    天河君在第一时间通过了微信小程序验证,开启了我的微信小程序之旅.因为天河君之前是一名后端狗,对前端不是很了解,所以几乎可以认为是从零开始学做微信小程序.也希望有志在微信小程序方向做点事情的朋友能够和我 ...

  2. ListView加载性能优化---ViewHolder---分页

    ListView是Android中一个重要的组件,可以使用它加列表数据,用户可以自己定义列表数据,同时ListView的数据加载要借助Adapter,一般情况下要在Adapter类中重写getCoun ...

  3. 《转载》跟我学SpringMVC

    在线版目录 第一章 Web MVC简介 第二章 Spring MVC入门 第三章 DispatcherServlet详解 第四章 Controller接口控制器详解(1) 第四章 Controller ...

  4. windows 中去除Ctrl+Alt+Del才能登录

    安装windows 7后登录的时候有一样很麻烦的步骤是需要先按Ctrl+Alt+Del,才能输入用户密码进行登录.这里笔者介绍一下如何取消这个东西. 点击“开始菜单”,点击“控制面板”. [管理工具] ...

  5. vs2012 安装entity framework

    1.安装vs2012 2.打开vs2012的工具下的扩展工具 3.搜索nuget,没安装的直接在线安装 4.安装好了NuGet,程序包管理器控制台 5.执行命令Install-Package Enti ...

  6. 重写jquery的ajax方法

    //首先备份下jquery的ajax方法 var _ajax=$.ajax; //重写jquery的ajax方法 $.ajax=function(opt){ //备份opt中error和success ...

  7. 【转载】Shell判断字符串包含关系的几种方法

    http://www.cnblogs.com/ginsonwang/p/5525340.html 下面是直接copy的内容: (本来是不打算copy的,但是每次用到或看的时候都要跳转,感觉挺麻烦的.就 ...

  8. 如何编写稳定流畅的iOS移动端应用

    原文链接:http://www.jianshu.com/p/f4adce56166f 不忘初心 在过去几年间,移动应用以雷霆之势席卷全球.我们在工作和休闲时间中使用互联网的方式,已经随着移动应用的前进 ...

  9. 【笔记】ztree的使用

    引用的js和css: <!-- zTreeJS --><script type="text/javascript" src="jquery/jquery ...

  10. java方法强制传递引用参数(做为返回值),改变被传递参数值。

    Java传递参数分为2种: 值类型,Java里面也叫简单类型,这种参数类型的传递的是它的副本拷贝: 引用类型,传递的是对象引用地址,如果在方法内改变该参数对象属性即是对原引用对象的改变:如果不想这样传 ...