入门级别的AJAX小例子
实现方式:最原始的JS,Jquery
返回形式:字符串,XML
JSP页面:
<input type="text" name="user" id="username" size="20"/>
<input type="button" name="check" id="check" value="校验" οnclick="verify()"/><br /><br />
<div id="result"></div>
1、返回类型是字符串的情况:
Servlet
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
String name = request.getParameter("name");
if(name==null || name.length()==0){
out.println("用户名不能为空!");
}else {
if(name.equals("admin")){
out.println("用户名"+name+"已经存在,请选择其他的用户名进行注册!");
}else{
out.println("用户名"+name+"尚未存在,你可以使用该用户名");
}
}
out.flush();
out.close();
}
使用最原始的JS方法进行请求:
var xmlHttp ; function verify(){ //通过dom方式获取文本框中的值 var name = document.getElementById("username").value; //1、创建XMLHTTPRequest对象 //针对IE和其他类型的浏览器建立这个对象的不同方式写代码 if(window.XMLHttpRequest){ //针对于Firefox,Mozilalr,Opera,Safari,IE7,IE8 xmlHttp = new XMLHttpRequest(); //针对某些特定版本的Mozillar浏览器的BUG进行修正 if(xmlHttp.overrideMimeType){ xmlHttp.overrideMimeType("text/xml"); } }else if(window.ActiveXObject){ //针对于IE6,IE5.5,IE5 //两个可以用于创建XMLHttpRequest对象的挂件名称保存在一个加js的数据里,前面的版本较新 var activexName =["MSXML2.XMLHTTP","Microsoft.XMLHTTP"]; for(var i=0;i<activexName.length;i++){ try{ xmlHttp = new ActiveXObject(activexName[i]); break; }catch(e){ } } } if(!xmlHttp){ alert("XMLHttpRequest创建失败!"); alert(xmlHttp); return ; } //2、注册回调函数 xmlHttp.onreadystatechange = callback; /****************GET方式请求开始*********************************/ //3、设置连接信息 //第一个参数:http的请求方式,支持所有http的情切方式,主要使用get和post //第二个参数:请求的URL,get方式请求的参数也在url中,当需要传递很多参数时,可以在URL后面罗列 //第三个参数:采用异步还是同步方式交互,true表示异步 //xmlHttp.open("GET","AjaxTest?name="+name,true); //4、发送数据,开始跟服务器进行交互 //同步方式下,send这句话会在服务器端数据回来之后执行 //异步方式下,send这句话会立即完成执行 //xmlHttp.send(null); /****************GET方式请求结束*********************************/ /****************POST方式请求开始*********************************/ //POST方式请求数据 xmlHttp.open("POST","AjaxTest",true); //设置http的请求头 xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //发送数据:POST方式传递多个参数时,如果使用多个send方法进行传递是不起作用的,可以借鉴于get方法,将需要传递的参数在send方法后面罗列,如xmlHttp.send(“name=” +name+”&sex=”+sex+”&age=”+age) xmlHttp.send("name="+name);//所有的参数都通过这个方法传给服务器 /****************POST方式请求结束*********************************/ } //回调函数:处理返回的结果 function callback(){ //判断对象的状态是交互完成 if(xmlHttp.readyState==4){ //判断http的交互是否成功 if(xmlHttp.status == 200){ //获取服务器端返回的数据 //获取服务器端输出的纯文本数据 var responseText = xmlHttp.responseText; //将数据显示在页面上 document.getElementById("result").innerHTML = responseText; //document.getElementById("username").value=" "; } } }
使用Jquery的GET方法进行请求(POST方法类似):
function verify(){ //1.获取文本框中的内容 //dom方式:name=document.getElementById("username"); //jquery查找节点的方式 var name = $("#username").val(); alert("获取到的数据为:"+name); //2、将文本框中的数据发送给服务器的servlet //使用jquery的XMLHTTPRequest对象get请求的封装 //第一个参数表示要连接的URL, //第二个为传过去的数据,此处因为在第一个参数中已经带了数据,所以第二个就不要传参了 //第三个是回调函数,data从服务器返回的数据 $.get("AjaxTest?name="+name,null,function(data){ $("#result").html(data); }); } //回调函数,相当于上面的function(data),这个是把回调函数独立成了一个方法。 function callback(data){ alert("回调函数!"); //3、接收服务器返回的数据 alert("返回的数据是:"+data); //4、将服务器返回的数据动态的显示到jsp页面中 $("#result").html(data); }
2、返回形式是XML的情况:
Servlet:
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//response.setContentType("text/html;charset=utf-8");
//修改点1:修改相应的content-type必须是text/xml格式的
response.setContentType("text/xml;charset=utf-8");
PrintWriter out = response.getWriter();
String name = request.getParameter("name");
//修改点2:返回的数据必须拼接成xml格式的
StringBuffer builder = new StringBuffer();
builder.append("<message>");
if(name==null || name.length()==0){
builder.append("用户名不能为空").append("</message>");
}else {
if(name.equals("admin")){
builder.append("用户名["+name+"]已经存在,请选择其他的用户名进行注册!").append("</message>");
}else{
builder.append("用户名["+name+"]尚未存在,你可以使用该用户名").append("</message>");
}
}
out.println(builder.toString());
out.flush();
out.close();
}
原始JS的Ajax请求跟字符串的类似,就是回调函数不一样,也就是处理方式不一样。
// 回调函数 function callback() { // 判断对象的状态是交互完成 if (xmlHttp.readyState == 4) { // 判断http的交互是否成功 if (xmlHttp.status == 200) { // 使用responseXML的方式来接收XML数据对象的DOM对象 var responseXml = xmlHttp.responseXML; if(responseXml!=null){ // 获取根元素节点:使用dom中的getElementsByTagName根据标签名来获取元素节点,返回的是一个数组 var messageNodes = responseXml.getElementsByTagName("message"); if(messageNodes.length!=0){ // message标签中的文本在dom中是message标签所在的元素节点的子节点,通过firstChild方法获取它的第一个子节点 // 通过以下方式可以获取到文本内容所对应的节点 var textNode = messageNodes[0].firstChild; // 对于文本节点,可以通过nodeValue的方式返回文本节点的文本内容 var c = textNode.nodeValue; // 将数据显示在页面上 document.getElementById("result").innerHTML = responseMessage; // document.getElementById("username").value=" "; }else{ alert("XML数据格式错误,原始文本为:"+xmlHttp.responseText); } }else{ alert("XML数据格式错误,原始文本为:"+xmlHttp.responseText); } } } }
Jquery的POST方法进行处理:
Ajax: $.ajax({ type:"POST", //请求方式 url:"AjaxTestXML", //请求路径 data:"name="+name, //传递给服务器的数据 dataType:"xml", //告诉jquery返回的数据格式 success:callback //定义交互完成,并且服务器正确返回数据时调用的回调函数 }); //回调函数,相当于上面的function(data) function callback(data){ // alert("回调函数!"); //3、接收服务器返回的数据 // alert("返回的数据是:"+data); //因为是xml格式的数据,需要将data这个dom对象中的数据解析出来 //首先需要将dom对象转换成jquery对象 var jqueryObj = $(data); //获取message节点 var message = jqueryObj.children(); //获取message中的文本信息 var text = message.text(); //4、将服务器返回的数据动态的显示到jsp页面中 //$("#result").html(data); $("#result").html(text); }
这个例子是最简单的,却不是最好的解决方法。随着Jquery的越来越牛X,把Ajax包装的越来越好,Ajax的请求和处理也越来越简单,越来越丰富化。当然咱们要学的也就越多了!哎,祝咱们好运吧!