首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Ajax >

ajax的简要封装

2012-08-28 
ajax的简洁封装我相信大家都用过jquery的ajax,觉得很简练吧,不过我今天也对ajax进行了封装,跟jquery的ajax

ajax的简洁封装
我相信大家都用过jquery的ajax,觉得很简练吧,不过我今天也对ajax进行了封装,跟jquery的ajax非常类似。
            
对ajax的封装如下:

var $= { createXmlHttp : function () { var xmlHttp = null; try { xmlHttp = new XMLHttpRequest(); } catch (e) {   try { xmlHttp = new ActiveXObject('Msxml2.XMLHTTP');   }catch (ee) { xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');   } } return xmlHttp; }, ajax: function(ajaxInfo) {   var xmlObj = $.createXmlHttp();   if (!xmlObj){   alert("很抱歉,你的浏览器暂时不支持Ajax。");   return;   }   var method = ajaxInfo.method.toUpperCase();   var method=ajaxInfo.method;  var data = null;   xmlObj.open(method,ajaxInfo.url, true);   if(method == "POST"){ data = ajaxInfo.data;  xmlObj.setRequestHeader("CONTENT-TYPE", "application/x-www-form-urlencoded");   }   xmlObj.send(data);   xmlObj.onreadystatechange = function () {   if(xmlObj.readyState == 4) {  if(xmlObj.status == 200) {    var type = ajaxInfo.type.toUpperCase();    if(type == "TEXT") {    ajaxInfo.success(xmlObj.responseText);    }else if(type == "XML") {    ajaxInfo.success(xmlObj.responseXML);    }else{     alert("无法识别的返回方式");        }       xmlObj = null; }           }          }; } }

使用ajax的Post请求:
$.ajax({       method:"POST",       url:"servlet/AjaxServlet?time="+new Date().getTime(),       data:"username=abc&password=123",       type:"TEXT",       success:function (data) { var jason = data ; alert(jason);       }           });

  使用ajax的Get请求:
$.ajax({       method:"GET",       url:"servlet/AjaxServlet?username=abc&password=123&time="+new Date().getTime(),       data:null,       type:"TEXT",               success:function (data) {       var jason = data ;          alert(jason);               }                    });
  
为了简单演示ajax的请求,在这里只是在AjaxServlet中作一个简单的验证。
AjaxServlet的代码:
package com.lrh.servlet;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class AjaxServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doPost(request,response);}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {  String username=request.getParameter("username");  String password=request.getParameter("password");  PrintWriter out=response.getWriter();  if(username.equals("abc")&&password=="123"){  System.out.println("该用户已经存在");  out.print("该用户已被注册!");  }  out.flush();  }   } 

AjaxServlet在web.xml中的配置:
 <servlet>    <servlet-name>AjaxServlet</servlet-name>    <servlet-class>com.lrh.servlet.AjaxServlet</servlet-class>  </servlet>  <servlet-mapping>    <servlet-name>AjaxServlet</servlet-name>    <url-pattern>/servlet/AjaxServlet</url-pattern>  </servlet-mapping>

热点排行