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. 在Centos7服务器上搭建网关服务

    准备搭建网关的服务器环境介绍: OS:Centos7.1 网络:一块网卡,能够上网(能够连接到更外层网络),IP为192.168.7.54 内存.CPU随意 以下命令的作用依次是: 开启ip_forw ...

  2. JavaScript- jquery easyui 可编辑表格插件 easyui.editgrid

    最近项目前端使用 jquery+easyui来做,用了几个月,觉得easyui是一个很不错的开源前端UI框架, 虽然偶尔会遇到一些小问题,但是凭借多年前端开发的实力积累 都一一解决了,其中比较典型的就 ...

  3. java中filter的用法 内部资料 请勿转载 谢谢合作

    filter过滤器主要使用于前台向后台传递数据是的过滤操作.程度很简单就不说明了,直接给几个已经写好的代码: 一.使浏览器不缓存页面的过滤器 Java代码   import javax.servlet ...

  4. bzoj3223 文艺平衡树

    传送门 :http://www.lydsy.com/JudgeOnline/problem.php?id=3223 splay区间翻转的基础题,然而我还是调了一晚上(蒟蒻的悲哀) #include & ...

  5. jmeter agent配置

    Agent端配置 修改配置文件:JMETER_HOME/bin/jmeter.properties 中如下信息即可完成配置执行机远程启动端口(默认为 1099) server_port=1029 se ...

  6. mariadb用户和权限管理

    mysql -u root -p insert into mysql.user(Host,User,Password) values('localhost','guest',password('123 ...

  7. CSS学习心得

    CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题 外 ...

  8. [QT学习]拷贝文件

    sourceDir源绝对路径,toDir目标绝对路径 //拷贝文件: bool FileOperation::copyFileToPath(QString sourceDir ,QString toD ...

  9. Cheatsheet: 2016 11.01 ~ 11.30

    Web Getting Started With Vapor: A Swift Web Framework Front-end vs Back-end vs Network Performance S ...

  10. Adding a Controller

    MVC stands for Model, View, Controller. MVC is a pattern for developing applications such that each ...