Ajax的简单使用

1.简介

AJAX = Asynchronous JavaScript And XML（异步 JavaScript 及 XML）

AJAX 是 Asynchronous JavaScript And XML 的首字母缩写。

AJAX 并不是一种新的编程语言，而仅仅是一种新的技术，它可以创建更好、更快且交互性更强的 web 应用程序。

AJAX 使用 JavaScript 在 web 浏览器与 web 服务器之间来发送和接收数据。

通过在幕后与 web 服务器交换数据，而不是每当用户作出改变时重载整个 web 页面，AJAX 技术可以使网页更迅速地响应。

2.使用方法

接下来做一个用Ajax实现页面单机按钮显示用户是否存在的实例.

2.1 创建 XMLHttpRequest 对象

XMLHttpRequest对象是Ajax技术的关键,其作用是用于在后台与服务器交换数据.该对象的创建方式如下:

1 function ajaxFunction(){
2     var xmlReq;
3     try{
4         xmlReq = new XMLHttpRequest();
5     }catch(e){
6         xmlReq = new new ActiveXObject("MSXML2.XMLHTTP.3.0");
7     }
8     return xmlReq;
9 }

2.2 与服务器交换数据

通过XMLHttpRequest对象和服务器交换信息的过程分为5步:
1.获取XMLHttpRequest对象.

2.onreadystatechange 事件:时刻返回相应状态.
3.打开与服务器连接.

4.发送信息给服务器.

5.得到服务器的信息.

具体步骤可查看W3School教程:http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_send.asp

 1 window.onload = function(){
 2         document.getElementById("ajax").onclick = function(){
 3             var xmlReq = ajaxFunction();
 4             //onreadystatechange 事件,当返回状态为4时表示成功
 5             xmlReq.onreadystatechange = function(){
 6                 if(xmlReq.readyState == 4){
 7                     if(xmlReq.status == 200 || xmlReq.status == 304){
 8                         //得到服务器发送的数据
 9                         var info = xmlReq.responseText;
10                         //页面显示
11                         document.getElementById("usernameView").innerHTML = info;
12                     }
13                 }
14             };
15             //打开与一个Servlet的交互
16             xmlReq.open("post", "../servlet/AjaxServlet?timeStamp="+new Date().getTime(),true);
17             //设置请求头，这样xmlReq.send()方法发送的数据，服务器才能接受到
18             xmlReq.setRequestHeader("content-type", "application/x-www-form-urlencoded");
19
20             var username = document.getElementById("username").value;
21             //项服务器发送数据
22             xmlReq.send("username="+username);
23
24         };
25 };

2.3 Servlet处理请求

Servlet用于对传过来的数据进行处理,一般都是查询数据库进行比对,这里只是个Demo,所以没用数据库.

 1 package cn.itcast.web.servlet;
 2
 3 import java.io.IOException;
 4
 5 import javax.servlet.ServletException;
 6 import javax.servlet.http.HttpServlet;
 7 import javax.servlet.http.HttpServletRequest;
 8 import javax.servlet.http.HttpServletResponse;
 9
10 public class AjaxServlet extends HttpServlet {
11
12     public void doGet(HttpServletRequest request, HttpServletResponse response)
13             throws ServletException, IOException {
14         request.setCharacterEncoding("utf-8");
15         response.setCharacterEncoding("utf-8");
16         response.setContentType("text/html;charset=utf-8");
17         //得到请求值
18         String username = request.getParameter("username");
19         if("sa".equals(username)){
20             response.getWriter().println("用户名已经存在");
21         }else{
22             response.getWriter().println("用户名可用");
23         }
24
25     }
26
27     public void doPost(HttpServletRequest request, HttpServletResponse response)
28             throws ServletException, IOException {
29         doGet(request, response);
30     }
31  }

3.Ajax优缺点

1.使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变的信息。
2.Ajax不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行.
3.对应用Ajax最主要的批评就是，它可能破坏浏览器的后退功能.

详细信息可查看维基百科:http://zh.wikipedia.org/zh/AJAX

Ajax的简单使用