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. jquery_ui_api中文

    http://files.cnblogs.com/files/xjyggd/JQuery_UI_API.rar

  2. IOS 类似微博，#话题#，@人，[表情] 网址 正则匹配

    /** *获取需要处理的子字符串和子串的range */ -(NSArray<NSTextCheckingResult *> *)getBBSLetterSubStrRangeArrWit ...

  3. css+div解决文字溢出控制显示字数

    一.一般的文字截断(适用于内联与块):  Example Source Code [www.mb5u.com] .text-overflow {display:block;/*内联对象需加*/widt ...

  4. easyui 日期控件清空值

    最近用了Easyui的日期控件datebox,项目中要将选中值清空,于是就研究了一下. 1,调用方法清空 $('#yourId').combo('setText',''); 2,更改js文件 从官网下 ...

  5. python 中的metaclass和baseclasses

    提前说明: class object  指VM中的class 对象,因为python一切对象,class在VM也是一个对象,需要区分class对象和 class实例对象. class instance ...

  6. linux -- nano

    今天在git commit的时候碰到了一种编辑方式 -- 不会用 T.T,然后找了下相关的文档. ^G -- ctrl+g 帮助文档 ^O -- ctrl+o 写出,会出现下面的一行提示,是否保存,直 ...

  7. Boost学习笔记（五） progress_display

    progress_display可以在控制台显示程序的执行进度,如果程序执行很耗费时间,那么它能够提供一个友好的用户界面 #include <boost\timer.hpp> #inclu ...

  8. html局部打印

    html页面局部打印的小栗子 只要修改点击打印的按钮和打印的div区域的id就行啦 <!DOCTYPE html> <html> <head> <title& ...

  9. C#引用C++开发的DLL

    C#语言使用方便,入门门槛较代,上手容易,并且语法与C,java有很类似的地方,IDE做的也好,通用性好,是MS下一代开发的主要力量.但是其开源代码较少,类库不是十分完美,在架构方面还有一些需要做的工 ...

  10. c语言练习

    #include<stdio.h> struct student{ ]; int No; ]; int sum; }; int strcmp(char *s, char *t) { int ...