Ajax&Java
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML)
是一种基于浏览器的XMLHttpRequest对象实现的创建交互式网页应用的网页开发技术。
用JS创建XMLHttpRequest对象并调用其方法实现基本的Ajax请求:
xmlhttp = new XMLHttpRequest(); //创建XMLHttpRequest对象
xmlhttp.onreadystatechange = f; //设置请求完成后的回调函数
xmlhttp.open("GET", url, true); //打开指定的url
xmlhttp.send(); //发送请求
这发送的是一个GET请求,如果要发送POST请求要记得设置请求投(GET请求数据可以通过url附加,POST请求可以发送时附加)
xmlhttp = new XMLHttpRequest(); //创建XMLHttpRequest对象
xmlhttp.onreadystatechange = f; //设置请求完成后的回调函数
xmlhttp.open("POST", url, true); //打开指定的url
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded") //设置请求头
xmlhttp.send(data); //发送请求,并附加数据
注意:回调函数务必在发送请求前设置
回调函数的内容:
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
var data = xmlhttp.responseText;
var test = document.getElementById("test");
test.innerHTML += data + "<br>";
}
}
其中xmlhttp.readyState表示请求执行的状态(4表示请求完成),而xmlhttp.status表示http的响应返回状态码。
下面写一个小例子实现Ajax向后端请求数据:
服务端代码(Java实现)
@WebServlet(name = "AddServlet", urlPatterns = "/AddServlet")
public class AddServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
} protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.getWriter().write("helloworld");
}
}
客户端代码:
<html>
<head>
<script> var xmlhttp; function loadGetHttp(url, f) {
xmlhttp = new XMLHttpRequest(); //创建XMLHttpRequest对象
xmlhttp.onreadystatechange = f; //设置请求完成后的回调函数
xmlhttp.open("GET", url, true); //打开指定的url
xmlhttp.send(); //发送请求
} function loadPostHttp(url, data, f) {
xmlhttp = new XMLHttpRequest(); //创建XMLHttpRequest对象
xmlhttp.onreadystatechange = f; //设置请求完成后的回调函数
xmlhttp.open("POST", url, true); //打开指定的url
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded") //设置请求头
xmlhttp.send(data); //发送请求,并附加数据
} function cfunc() {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
var data = xmlhttp.responseText;
var test = document.getElementById("test");
test.innerHTML += data + "<br>";
}
}
} window.onload = function () {
var button = document.getElementById("button");
button.onclick = function () {
loadGetHttp("AddServlet", cfunc);
}
} </script>
</head>
<body> <input type="button" id="button" value="test"/> <div id="test"></div> </body>
</html>
这里写了两个通用的函数loadGetHttp和loadPostHttp来实现请求的加载,这样在使用时只要传人对应的URL和回调函数即可。
这里只是简单的举例子,实际使用中会将数据打包成XML或JSON格式,也有很多方便的实现Ajax的类库(如Jquery、EXT.JS......)
Ajax&Java的更多相关文章
- End-to-End Tracing of Ajax/Java Applications Using DTrace
End-to-End Tracing of Ajax/Java Applications Using DTrace By Amit Hurvitz, July 2007 Aja ...
- ajax java base64 图片储存
js代码 //利用formdata上传 var dataUrl = $('#canvas').getDataUrl(); var img = $('<img>').attr('src', ...
- Struts2 Spring Hibernate Ajax Java总结(实时更新)
1. 在form表单的onload属性里的方法无法执行? 若忘记了在<%=request.getSession().getAttribute("userName")%> ...
- React+ajax+java 上传图片并预览
之前有在网上找ajax上传图片的资料,大部分的人写得都是用jQuery,但是在这里用JQuery就大才小用了,所以我就自己写了,先上图. 由上图,首先点击上面的选择文件,在选择图片之后,将会自动上传图 ...
- JWT ajax java spingmvc 简洁教程
1.添加依赖 <dependency> <groupId>io.jsonwebtoken</groupId> <artifactId>jjwt</ ...
- html5 ajax Java接口 上传图片
html5图片上传[文件上传]在网上找了很多资料,主要也就2种 1.from表单提交的方式 <form action="pushUserIcon" method=" ...
- Ajax+Java实现大文件切割上传
技术体系:html5(formdata) + java + servlet3.0+maven + tomcat7 <!DOCTYPE html> <html> <head ...
- 利用AJAX JAVA 通过Echarts实现豆瓣电影TOP250的数据可视化
mysql表的结构 数据(数据是通过爬虫得来的,本篇文章不介绍怎么爬取数据,只介绍将数据库中的数据可视化): 下面就是写代码了: 首先看一下项目目录: 数据库层 业务逻辑层 pac ...
- extjs ajax java简单精美验证码实现 有图
前端:利用ExtJs的autoEl功能加载图片. var imgCheckValid = new Ext.create('Ext.Component',{ width: 70, //图片宽度 heig ...
随机推荐
- centos7 卸载openJDK 安装jdk7
[root@cms02 root]# rpm -qa | grep jdk java--openjdk-headless-1.7.0.75-2.5.4.2.el7_0.x86_64 java--ope ...
- 在VS中添加lib库的三种方法
注意: 1.每种方法也要复制相应的DLL文件到相应目录,或者设定DLL目录的位置,具体方法为:"Properties" -> "Configuration Prop ...
- 基于layerpage 前后端异步分页
#下载jquery 和 layerpage1.核心分页方法 laypage({ cont: 'page1', //容器.值支持id名.原生dom对象,jquery对象. pages: json.tot ...
- Java 基础 Map 练习题
第一题 (Map)利用Map,完成下面的功能: 从命令行读入一个字符串,表示一个年份,输出该年的世界杯冠军是哪支球队.如果该 年没有举办世界杯,则输出:没有举办世界杯. 附:世界杯冠军以及对应的夺冠年 ...
- Node.js怎么处理数据库中日期类型
问题描述:在数据库里存储时间的时候明明显示的是类如2016-12-22的形式,读取出来后却变成了大概是这样的:Fri May 17 2016 14:12:33 GMT+0800 (中国标准时间) 处理 ...
- sublime text3 C语言环境配置
{ "cmd": ["gcc", "-W", "-Wall", "-Werror","${ ...
- Python mysql sqlite 数据没有更新
原因 MySQL事务隔离级别 解决方案 conn.commit() conn.close()
- 【线段树区间合并】HDU1540-Tunnel Warfare
一.题目 Description During the War of Resistance Against Japan, tunnel warfare was carried out extensiv ...
- 如何在win7上安装ant-design
1.首先要安装务必确认 Node.js 已经升级到 v4.x 或以上. 2.打开cmd,输入"npm install antd-init -g",安装antd(可以自己先指定安装目 ...
- wordcount 过程
hdfs原始数据 hello a hello b map阶段: 输入数据:<0,"hello a"> <8,"hello b"> key ...