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. json字符串转java对象数组

    需要引入json-lib-2.2-jdk15.jar和ezmorph-1.0.6.jar包 String itemStar = request.getParameter("itemStar& ...

  2. bzoj 1079 着色方案

    题目: 有n个木块排成一行,从左到右依次编号为1~n.你有k种颜色的油漆,其 中第i 种颜色的油漆足够涂ci 个木块.所有油漆刚好足够涂满所有木块,即c1+c2+-+ck=n.相邻两个木块涂相同色显得 ...

  3. 处理session跨域几种的方案

    常用跨域共用session的是登录模块,我相信很多开发的朋友的都遇到过,只需要一个地方登录,相关联的网站也是处于登录状态.两种情况:一种9streets.cn和a.9streets.cn之间,另一种是 ...

  4. 简单介绍一下R中的几种统计分布及常用模型

    统计学上分布有很多,在R中基本都有描述.因能力有限,我们就挑选几个常用的.比较重要的简单介绍一下每种分布的定义,公式,以及在R中的展示. 统计分布每一种分布有四个函数:d――density(密度函数) ...

  5. VIM常用设置

    批量替换:  #:%s/source_pattern/target_pattern/g "My Custom Configuration filetype plugin indent on ...

  6. 通过nginx代理之后，获取客户端ip

    1.相关nginx配置(通过header将客户端ip,host等信息传入) location ~ .*.do$ { proxy_set_header X-Real-IP $remote_addr; p ...

  7. iOS - PackIpa App 打包

    前言 打包 ipa 的前提 证书的申请和设置和 "App 上架" 文章的一样 从第一步到第四步都是一样的.还有第六步的 1-3 都是一样的,从第四步开始变化. 1.Archive ...

  8. 内存屏障 & Memory barrier

    Memory Barrier http://www.wowotech.net/kernel_synchronization/memory-barrier.html 这里面讲了Memory Barrie ...

  9. C# 类型转换

    int 转换 string 转换有两种: 一种是隐式, ; string b = a.ToString(); 一种是显示. sting b=Convert.ToString();

  10. iOS开发 二维码生成

    基于libqrencode的二维码生成 + (void)drawQRCode:(QRcode *)code context:(CGContextRef)ctx size:(CGFloat)size { ...