首页 > 代码库 > Ajax的简单使用
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
