`
JenHui
  • 浏览: 8863 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

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 {
	
		@Override
		protected void doGet(HttpServletRequest request, HttpServletResponse response)
				throws ServletException, IOException {
			doPost(request,response);
		
		}
	
		@Override
		protected 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>
分享到:
评论

相关推荐

    对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解

    虽然jquery的较新的api已经很好用了, 但是在实际工作还是有做二次封装的必要,好处有:1,二次封装后的API更加简洁,更符合个人的使用习惯;2,可以对ajax操作做一些统一处理,比如追加随机数或其它参数。同时在...

    原生js+ajax通用函数+php

    本函数封装了js的ajax,php为处理后台数据,仅支持post,代码很简洁

    jsp+servlet+ajax实现登录

    该案列使用jsp+servlet+ajax实现登录,页面简洁大方,弹框都是封装的插件,整体案列采用三层的模式,链接数据库方面用的是dbcp的链接池,数据库时mysql,

    简洁Ajax函数处理(示例代码)

    以下是封装的一个处理函数,使用是也十分方便: 文件的名字命名为: jQuery.ajaxRequest.js . 使用方法: 代码如下:$(‘._ajax’).click(function(){ _ajax.request(this); return false; }); var _ajax = { ...

    Jquery的Ajax技术使用方法

    jquery是一个优秀的js框架,自然对js原生的ajax进行了封装,封装后的ajax的操作方法更简洁,功能更强大,与ajax操作相关的jquery方法有如下几种,但开发中经常使用的有三种: 1)$.get(url, [data], [callback], ...

    request-funjs:request-funjs是对$ Ajax的各种请求封装成一个简洁的函数,便捷开始,提高效率,诸如Request.Get,Request.Post,Request.Delete Ajax request JavaScript jQuery

    request-funjs 快速上手 安装 npm install request-funjs ... import Request from 'request-funjs' ; Vue . prototype ....//在这里需要声明一个 host 变量,作为请求的主机名称 Request .... import Request from 'request-...

    后台管理系统源码.net

    后台管理系统源码 CYQData 数据框架:是一款操作数据库用的数据框架:简洁易用、功能强大、性能优越、内置支持多数据库、多语言...个人精装封装的基类、GET方式的分页控件、通过的工具栏、简装的Ajax封装、验证脚本等。

    jQuery API文档

    jQuery API文档。jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的...它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

    简洁的商品管理系统..7z

    这是一个页面简洁的商品管理系统以struts为主要的页面跳转是一个页面简洁代码清晰安全性高的管理系统 ,用spring框架来进行处理事务的。代码对jdbc进行了轻量级的封装从而把代码更加完美。达到了指定的效果。

    HyAdmin:简洁、流畅、安全、自适应移动设备的后台管理框架(基于ThinkPHP)

    HyAdmin简洁、流畅、安全、自适应移动设备的后台管理框架(基于ThinkPHP,原名HyFrame)Document: DEMO: (ACCOUNT:123/PASSWORD:123123)Overview框架基于ThinkPHP和Metronic二次封装,集成了众多现代特性(移动...

    基于Android的物流配送管理系统(有图片和参考代码,不懂可以联系问我)

    业务层封装业务流程,为适应业务的变更,每一业务模块均有专门的接口及实现类,代码简洁且可适应不同的数据库。该系统严格按照软件开发流程:需求分析、页面设计、概要设计、详细设计、测试运行等

    jQuery Tab封装库,内含动画版选项卡及滑动门

    内容索引:脚本资源,jQuery,Tab,选项卡,滑动门 本Javascript UI库是基于jQuery的扩展,完成jQuery Tab功能,已封装成库,使用非常方便,内含动画版的选项卡及滑动门,当前很流行的网页设计模式,风格越简洁,当然你...

    Web前端开发技术-认识JQuery.pptx

    它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。 1.什么是jQuery 认识jQuery 1.什么是jQuery 认识jQuery 什么是jQuery jQuery的特点: ...

    jQuery(JavaScript框架)基础讲解

    它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。 jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的...

    jquery.min.js 3.6.4版本

    它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。 jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的...

    jquery.1.11.1.js 和 jquery.1.11.1.min.js

    它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。 jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的...

    jQuery 1.4.4 中文API参考手册

    它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。 jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的...

    jQuery权威指南

    它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的...

    jquery1.8.3+api

    它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。 jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的...

    jquery-1.11.1.min.js文件

    它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。 jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的...

Global site tag (gtag.js) - Google Analytics