java实现ajax_Ajax&Java

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 + “
“;

}

}

其中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”);

}

}

客户端代码：

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 + “
“;

}

}

}

window.onload = function () {

var button = document.getElementById(“button”);

button.onclick = function () {

loadGetHttp(“AddServlet”, cfunc);

}

}

这里写了两个通用的函数loadGetHttp和loadPostHttp来实现请求的加载，这样在使用时只要传人对应的URL和回调函数即可。

这里只是简单的举例子，实际使用中会将数据打包成XML或JSON格式，也有很多方便的实现Ajax的类库(如Jquery、EXT.JS……)