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的更多相关文章

  1. 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 ...

  2. ajax java base64 图片储存

    js代码 //利用formdata上传 var dataUrl = $('#canvas').getDataUrl(); var img = $('<img>').attr('src', ...

  3. Struts2 Spring Hibernate Ajax Java总结(实时更新)

    1. 在form表单的onload属性里的方法无法执行? 若忘记了在<%=request.getSession().getAttribute("userName")%> ...

  4. React+ajax+java 上传图片并预览

    之前有在网上找ajax上传图片的资料,大部分的人写得都是用jQuery,但是在这里用JQuery就大才小用了,所以我就自己写了,先上图. 由上图,首先点击上面的选择文件,在选择图片之后,将会自动上传图 ...

  5. JWT ajax java spingmvc 简洁教程

    1.添加依赖 <dependency> <groupId>io.jsonwebtoken</groupId> <artifactId>jjwt</ ...

  6. html5 ajax Java接口 上传图片

    html5图片上传[文件上传]在网上找了很多资料,主要也就2种 1.from表单提交的方式 <form action="pushUserIcon" method=" ...

  7. Ajax+Java实现大文件切割上传

    技术体系:html5(formdata) + java + servlet3.0+maven + tomcat7 <!DOCTYPE html> <html> <head ...

  8. 利用AJAX JAVA 通过Echarts实现豆瓣电影TOP250的数据可视化

    mysql表的结构   数据(数据是通过爬虫得来的,本篇文章不介绍怎么爬取数据,只介绍将数据库中的数据可视化):   下面就是写代码了: 首先看一下项目目录:   数据库层   业务逻辑层   pac ...

  9. extjs ajax java简单精美验证码实现 有图

    前端:利用ExtJs的autoEl功能加载图片. var imgCheckValid = new Ext.create('Ext.Component',{ width: 70, //图片宽度 heig ...

随机推荐

  1. 使用JDOM操作XML

    JDOM介绍 JDOM是使用Java语言编写的,用于读写及操作XML的一套组件,Jdom同时具有DOM修改文件的优点和SAX读取快速的优点. JDOM的使用 首先下载JDOM的JAR包,本文使用的是j ...

  2. List 用法和实例(转载)

    写在粘贴复制前:英文的感觉也可以,也能看的懂,多看看英文资料没坏处的 Problem. You have questions about the List collection in the .NET ...

  3. java.sql.SQLException: ORA-00972: 标识符过长

    经仔细检查,发现sql语句其中两个字段之间没有逗号!

  4. Git使用指南(3)—— 使用Git命令

    暂存区替换掉工作区 git init git init newrepo 克隆仓库 git clone git clone <repo> git clone <repo> < ...

  5. mac安装 Vitual box 虚拟机(window8.1)

    首先到Oracle官网下载oracle VM VB,这是一个开源的免费项目,如果你想要了解更多的话甚至可以下载它的source code http://www.oracle.com/technetwo ...

  6. R语言拆分字符串

    R语言拆分字符串 aaa<-"aa;bb;cc"ccc<-strsplit(aaa,split=";") bbb<- unlist(strsp ...

  7. 转 unity 优化

    最近研究U3D开发,个人认为,精通一种新的技术,最快最好的方法就是看它的document,而且个人习惯不喜欢看中文的资料,原汁原味的东西是最正确的,一翻译过来很多东西就都不那么准确了.于是通读了uni ...

  8. python走起之第十四话

    HTML 标题 HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的. 实例 <h1>这是一个标题</h1> <h2> ...

  9. Nodejs学习总结

    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效. 官网 : http://node ...

  10. 程序设计入门——C语言 第7周编程练习 2 鞍点(5分)(5分)

    2 鞍点(5分) 题目内容: 给定一个n*n矩阵A.矩阵A的鞍点是一个位置(i,j),在该位置上的元素是第i行上的最大数,第j列上的最小数.一个矩阵A也可能没有鞍点. 你的任务是找出A的鞍点. 输入格 ...