AJAX入门

        对于的一个工作的人来说当你接触到ajax的时候，你会发现除了可以用表单提交数据以外，没想到还可以用ajax提交数据，而且页面不用刷新，只改变了自己想要改变的一部分，你就会有点喜欢上它了，没错这就是ajax的强大之处。ajax使用起来很方便，不需要任何的插件；它向服务器发送请求只需传递一部分有用的数据，而不需要将整个页面提交给服务器，这样不仅降低了服务器和宽带的压力，当页面接受数据时也不需要刷新整个页面，只需改变需要改变的地方，而且提升了用户的使用感（这个地方我不知道怎么措辞）。

        今天闲着没什么事，就想着整理一下现在用到的ajax，而且现在用到的我觉得很好用，先写在这里放着，以后说不定也会用到或者给别人一些参考。

       js代码：

       

        var url="/huodongAC.d?m=choujiang&class=DafuwengHc";
	var key = "${requestScope.key}";
	$.getJSON(url,{lotteryId:lotteryId,shopJifenNumber:shopJifenNumber,key:key},function(data){
		var isStop = data.root.isStop;
		var isGetPrize = data.root.isGetPrize;		
		var isStopDieTription = data.root.isStopDieTription;
		var isFromAPP = data.root.isFromAPP;
		var isLogin = data.root.isLogin;
		var NumberNotEnough = data.root.NumberNotEnough;
		var prizeListNumber = data.root.prizeListNumber;		
		var prizeName = data.root.prizeName;
		var prizeNumber = data.root.prizeNumber;
		var pointNumber = data.root.pointNumber;
		console.log(pointNumber);
		isFromAjax = data.root.isFromAjax;
		num = prizeNumber;	
		if(round<=4){
			setTimeout(showTankuang,5200);
		}else{
			 setTimeout(showTankuang,3000);
		}      
		function showTankuang(){
			if(isStop=="true"){
				$(".js_noGetPrize").show();
				$(".js_littleTitle").text("不好意思");
				$(".js_littleContent").text(isStopDieTription);
				$(".close").hide();
				return false;
			}			
			if(isLogin=="false"){
				$(".js_noGetPrize").show();
				$(".js_littleTitle").text("不好意思");
				$(".js_littleContent").text("请先登陆");
				return false;
			}
			if(NumberNotEnough=="false"){
				$(".js_noGetPrize").show();
				$(".js_littleTitle").text("不好意思");
				$(".js_littleContent").text("您的积分不够了");
				return false;
			}
			if(prizeListNumber=="false"){
				$(".js_noGetPrize").show();
				$(".js_littleTitle").text("不好意思");
				$(".js_littleContent").text("您的积分不够了");
				return false;
			}
			if(isGetPrize=="false"){
				$(".js_shopJifen").attr("onclick","changeShopJifen()");
				$(".js_noGetPrize").show();
				$(".js_littleTitle").text("别灰心");
				$(".js_littleContent").text("换个姿势再来一次吧");				
			}
	        if(isGetPrize=="true"){
	        	$(".js_shopJifen").attr("onclick","changeShopJifen()");
				$(".js_getPrize").show();			
				$(".js_prizeDiscription").text(prizeName+"属于你");
			}	       
	        totalPoint = pointNumber;
	        $(".js_myPoint").text(pointNumber);
		}
	}); 	

$.getJSON(url,{lotteryId:lotteryId,shopJifenNumber:shopJifenNumber,key:key},function(data){

要看的主要是这句话。

url是你发送请求的地址，由于是在同一个项目中，所以没有加前缀，看起来不是那么完整，

{lotteryId:lotteryId,shopJifenNumber:shopJifenNumber,key:key}这个就是传递给服务器的参数，已key：value的形式来传递的，传递多个参数的话就以逗号隔开。

function(data){}就是请求完成后所执行的回调函数，data的形式一般是json格式的，但也可以是html或者xml格式的

</pre><pre name="code" class="javascript">后台处理请求的方法

<pre name="code" class="java">public StrMvPo choujiang(HttpServletRequest request,HttpServletResponse response,ApplicationContext ManageAppContext) throws NoSuchAlgorithmException, NoSuchPaddingException, Exception{
		StrMvPo po =new StrMvPo();
		po.setMvstr("/activityshow/dafuweng/lottery/dafuwengJson.jsp");
		String lotteryId = request.getParameter("lotteryId");
		String shopJifenNumber = StringUtil.isNullStr(request.getParameter("shopJifenNumber"))?"100":request.getParameter("shopJifenNumber");//抽奖时，所压积分的大小
		int shopJifenNumberInt = Integer.parseInt(shopJifenNumber);
		DafuwengS dfws = (DafuwengS)ManageAppContext.getBean("dafuwengS");
		WapLotteryDafuwengInfo lotteryInfo = dfws.getDafuwengInfoById(lotteryId);
		//判断活动是否结束
		Date now  = new Date();
		Date lotteryStartTime = lotteryInfo.getStarttime();
		Date lotteryEndTime = lotteryInfo.getEndtime();
		if (lotteryEndTime.after(now) && now.after(lotteryStartTime)&&"doing".equals(lotteryInfo.getIsstop())){
			request.setAttribute("isStop","false");			
		}else if (now.before(lotteryStartTime)){
			request.setAttribute("isStop","true");
			request.setAttribute("isStopDieTription","活动尚未开始");
			return po;
		}else{
			request.setAttribute("isStop","true");
			request.setAttribute("isStopDieTription","活动已经结束");
			return po;
		}
	
		//判断用户是否在正常抽奖
		String key = request.getParameter("key");//加密后的电话号码
		SoufunUser user = new SoufunUser();
		user = ActivityUtil.getUserInfoBySfut(request,response);
		String phone = "1";
		if(StringUtil.isNullStr(user.getPhone())){
			request.setAttribute("isLogin", "false");
			return po;
		}else{
			phone = DES.decodeDES(key,"9e1c0wap", "wap6g0g4");
			if(!user.getPhone().equals(phone)){
				request.setAttribute("isLogin", "false");
				return po;
			}
		}
		//判断用户的积分数是否够这次抽奖
		String point = ActivityUtil.getMyPoints(user.getUserid());
		int pointInt = Integer.parseInt(point);
		if(pointInt-shopJifenNumberInt<0){
			request.setAttribute("NumberNotEnough","false");
			return po;
		}
		//isAPP就是只在APP上推的，noAPP是在网页上也可以玩的
		String 	fromAPP = "false"	;	
		if("isAPP".equals(lotteryInfo.getPlaylimit())){
			String[] strSeq={"unlim","fang","zf","xinfang"};
			 boolean isFromAPP = ActivityTempUtil.requestOrigin(request,strSeq);
			 if(isFromAPP){
				 fromAPP = "true";
				 request.setAttribute("isFromAPP","true");
			 }else{
				 fromAPP = "false";
				 request.setAttribute("isFromAPP","false");
			 }
		}else{
			fromAPP = "true";
		}
                request.setAttribute("pointNumber", pointNumber);		
		request.setAttribute("isFromAjax", "true");
		return po;
	}

后台方法只粘贴了一半，后台处理方法大家只需注意连个地方就好了

一个地方是：String lotteryId = request.getParameter("lotteryId");这句话是接受参数的，这里的lotteryId是和ajax所传递的参数{lotteryId:lotteryId,shopJifenNumber:shopJifenNumber,key:key}中lotteryId:lotteryId第一个otteryId相对应的，如果传递参数写成id:lotteryId的形式，那么为了接受参数，后台的代码要改写成String lotteryId = request.getParameter("id");我想这点大家都懂了吧。

当后台对参数处理完毕后，如何将得出的结果传递给前端。大家一般是想将数据变为json格式的，再传递给前端，而我这里是返回的一个modeandlview对象（StrMvPo相当于ModelAndView），这就是我现在用到的和大家有所不同的地方。这里是先将得到的数据存储到request里面，如： request.setAttribute("isFromAPP","true");
再到dafuwengJson.jsp这个页面将request里面存储的数据取出来组成一个json格式的数据

dafuwengJson.jsp的内容</span>

<pre name="code" class="html" style="font-family: Arial, Helvetica, sans-serif;"><%@ taglib prefix="json" uri="http://www.atg.com/taglibs/json"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<json:object>
<json:object name="root">
	<json:property name="isStop" value="${requestScope.isStop}"/>
	<json:property name="isStopDieTription" value="${requestScope.isStopDieTription}"/>
	<json:property name="isFromAPP" value="${requestScope.isFromAPP}"/>
	<json:property name="isLogin" value="${requestScope.isLogin}"/>
	<json:property name="NumberNotEnough" value="${requestScope.NumberNotEnough}"/>
	<json:property name="prizeListNumber" value="${requestScope.prizeListNumber}"/>
	<json:property name="isGetPrize" value="${requestScope.isGetPrize}"/>
	<json:property name="prizeName" value="${requestScope.prizeName}"/>
	<json:property name="prizeNumber" value="${requestScope.prizeNumber}"/>
	<json:property name="pointNumber" value="${requestScope.pointNumber}"/>
	<json:property name="isFromAjax" value="${requestScope.isFromAjax}"/>
</json:object>
</json:object>

这样就将后台处理后的数据给取出来了，不过这还没完，因为这只是将数据放在了dafuwengJson.jsp里面，而ajax请求还没有得到这个数据，dafuwengJson.jsp只是起到一个将数据转变为json格式并暂时存储的作用。让我们回到前面的ajax请求，我们会发现在回调函数中有这样的语句

var isStop = data.root.isStop;
var isGetPrize = data.root.isGetPrize;

这几句话就是从dafuwengJson.jsp中取出后台传过来的数据其中data.root.isStop的isStop就和<json:property name="isStop" value="${requestScope.isStop}"/>的isStop相对应。

这样一个ajax请求就完成了，不知道你清楚了没。我想对于那些了解ajax的人会觉得我废话连天，但对于不懂的人来说，我多唠叨几句就可以给你解决一个迷惑，我觉得还是值得的。

你如果看了还是不清楚的话，下面是我在网上找的一段比较常用的ajax形式，我觉得写的比较好

http://www.php100.com/html/program/jquery/2013/0905/5912.html