利用Ajax实现前后端异步数据传输

利用Ajax实现前后端异步数据传输

一、Ajax简介

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。下面我将以一个新增用户名密码的实例来说明如何使用Ajax技术。

二、Ajax使用

实现Ajax的方法有两种一种是javascript，一种是JQuery，因为这个演示实例非常简单，因此使用javascript来实现前端的功能
网页HTML代码：

用户名 <input type="text" id="uname"/>
密码<input type="password" id="upwd" />
<input type="button" onclick="register()" value="提交" />

网页脚本代码：

function register(){
xml_http=new XMLHttpRequest();//创建XMLHttpRequest的全局实例，通过该实例的内置方法实现Ajax
//----获取网页的文本框信息
var uname=document.getElementById("uname").value;
var upwd=document.getElementById("upwd").value;
//--当异步请求提交到后台后引发网页状态变化时的处理函数，状态值范围：0--4
xml_http.onredaystatechange=state；
//--xml_http内置方法open：创建后台链接：
//--第一个参数有“POST”和“GET”两种，类似于form表单的method属性。
//--第二个参数表示数据传递的服务器地址。
//--第三个参数表示是否使用异步传输的方式。
xml_http.open("POST","http://localhost:8080/servlet",true);
//--配置异步上传的网页头信息
xml_http.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//---向服务器后端发送数据,这里仅支持向后台发送字符串类型参数
//--传参形式 key=value
xml_http.send("uname="+uname+"&upwd="+upwd);

}
function state（）{
//--如果异步上传已完成，且已经接收来自服务器的反馈后
if(xml_http.readyState==4 && xml_http.status==200){
var data=xml_http.responseText;
if(data=="false"){alert("数据插入失败");

}
else{alert("数据插入成功");}
}
}

这里我们要注意的时，当XMLHttpRequest对象调用send方法后，会从服务端接收到返回值并保存在该对象的两个属性：
responseText：格式为String的响应信息。
responseXML：格式为xml的响应信息。
通过这两个属性值可以判断数据是否已顺利传送至后台服务器中。

三、后台处理代码

通过Ajax提交到后台的处理方式，与通过form表单提交的方式基本一致，这里我们使用的java的servlet来进行处理，如下仅写出Servlet的核心实现doGet（）方法。

//---设置接收到的请求以及响应的编码格式以及响应文档的文档类型
request.setCharacterEncoding("utf-8");
  response.setCharacterEncoding("utf-8");
  response.setContentType("text/html; charset=utf-8"); 
//--创建数据库通用对象，利用该对象已创建好的插入方法，将从前台网页获取的用户名和密码插入到数据库中。
  
 DBUtil db=new DBUtil();
 String uname=request.getParameter("uname");
 String upwd=request.getParameter("upwd");
Object[] params= {uname,upwd};
db.insert(sql,params);

这里所提到的数据库通用对象可以自己编写也可以使用既有框架的内置类（比如：apache的DBUtils）来实现。