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. Django进阶2

    一.ORM操作进阶 ForeignKey关联 示例models from django.db import models # Create your models here. class User(m ...

  2. angularjs checkbox 框的操作

    前言:今天遇到一个问题,需要对多选按钮进行操作,作为js菜鸟,只能做自己慢慢琢磨了-- <label class="checkbox-inline custom-checkbox no ...

  3. Easyui-combobox-checkbox-带复选框的下拉框

    $.post("getSubInsuranceTypeList.do",{parent_id:node.id},function(result){                  ...

  4. ISPA

    来自CSDN的Rachel Zhang 4. Improved SAP 算法 本次介绍的重头戏.通常的 SAP 类算法在寻找增广路时总要先进行 BFS,BFS 的最坏情况下复杂度为 O(E),这样使得 ...

  5. Android 进程常驻----native保活5.0以上方案推演过程以及代码

    正文: 上一篇我们通过父子进程间建立双管道,来监听进程死掉,经过测试,无耗电问题,无内存消耗问题,可以在设置中force close下成功拉起,也可以在获取到root权限的360/cleanmaste ...

  6. javaScript 将json字符串转换为json对象的方法解析

    JSON字符串: var str1 = '{ "name": "cxh", "sex": "man" }'; JSON对 ...

  7. WPF内置命令

    <Window x:Class="WpfCommands.MainWindow"         xmlns="http://schemas.microsoft.c ...

  8. 开发一个IONIC应用的首要操作（宏观）

    1.创建工程 2.搭建路由(routes.js) 3.添加控制(controller.js) 4.加载模块(app.js)

  9. 遗传算法在JobShop中的应用研究（part4:变异）

    下面,我们以车间调度为例来谈谈遗传算法中的另一个重要操作变异.变异操作通常发生在交叉操作之后,它的操作对象是交叉得到的新染色体.在本文中我们通过随机交换染色体的两个位置上的值来得到变异后的染色体,变异 ...

  10. gulp 安装笔记

    1.全局安装cnpm(淘宝的npm国内镜像),gulp,rimraf(卸载用插件)npm install -g cnpm --registry=https://registry.npm.taobao. ...