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. SSO之CAS单点登录实例演示

    本文目录: 一.概述 二.演示环境 三.JDK安装配置 四.安全证书配置 五.部署CAS-Server相关的Tomcat 六.部署CAS-Client相关的Tomcat 七. 测试验证SSO 一.概述 ...

  2. easyui validatebox 验证类型

    required: "必选字段",        remote: "请修正该字段",        email: "请输入正确格式的电子邮件" ...

  3. CSS2中的定位属性

    这也是一个重点!

  4. Unity3D心得分享

    本篇文章的内容以各种tips为主,不间断更新 系列文章 =========================== "Unity测试系列"文章索引 Unity-Animator深入系列 ...

  5. dynamic与匿名对象

    用dynamic接收匿名对象很方便,因为不需要去定义model了,但是也有一个弊端,就是匿名对象的作用范围是internal的,也就是只能存在于当前程序域,所以用dynimic跨程序域去接收一个匿名对 ...

  6. Windows2012 显示我的电脑

    从Windows2012开始,微软取消了服务器桌面个性化选项,如何重新调出配置界面,可以使用微软命令调出.具体方法如下: 1.同时按住键盘上的“Windows键”+“R”,调出运行窗口.在运行窗口输入 ...

  7. tomcat7+jdk1.8一键安装脚本

    #!/bin/bash #--------------------------------------------------------------------- # # Author : 大象无形 ...

  8. ubuntu gtk2.0 一个简单完整的窗口

    //gtk_main();开了线程,关闭窗口并不能退出程序,需要手动添加 //gtk2.0,window quit compelete example #include <gtk/gtk.h&g ...

  9. iOS解决NSData转NSString后字符为空

    iOS中,将NSData转NSString的一般方法为[[NSString alloc] initWithData:data encoding:NSUTF8StringEncoding];但是当dat ...

  10. Python之操作Redis、 RabbitMQ、SQLAlchemy、paramiko、mysql

    一.Redis Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API.Redis是一个key-value存储系统.和 ...