javascript实现ajax

关键步骤:

1 创建xmlHttpRequest对象;

2 添加回调函数;

3 创建链接;

4 设置请求头信息;

5 发送数据;

var xmlHttpRequest;
function chaj(){	
	if(f1.name.value==null||f1.name.value==""){
		alert("不能为空 ");
		return false;
	}
	if(window.XmlHttpRequest){
		xmlHttpRequest=new XmlHttpRequest();
	}else{
		xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
	}
	
	xmlHttpRequest.onreadystatechange=callBack;
	var url="My";
	xmlHttpRequest.open("post",url,true);
	xmlHttpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	xmlHttpRequest.send("name="+f1.name.value+"&timeStamp="+(new Date()).getTime());
	
}

function callBack(){
		
	if(xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){	
		var result=xmlHttpRequest.responseText;
		result=result.replace(/(^\s*)|(\s*$)/g, "");
		alert(result);
		//alert(result);
	}
}

注意:xmlHttpServlet为全局变量,在发送数据前不要忘记设置requestHeadder信息。

            open("post",url,true)第一个参数为提交方式,也可以为get提交,把参数写在url里;第三个默认也是true,true代表异步请求,false为同步请求;


服务器端:

通过PrintWriter回传信息;

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		String name1=request.getParameter("name");
		String timeStamp1=request.getParameter("timeStamp");
		System.out.println(name1+timeStamp1);		
		PrintWriter out=response.getWriter();		
		out.print("成功");
		out.flush();
		out.close();
	}

可以在后台拼接json格式字符串,前端同样用responseText接收数据;用eval函数把字符串形式转换成真正json;

result=eval("("+result+")" );


传送给客户端json数据:

服务端代码

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		String name1=request.getParameter("name");
//		String timeStamp1=request.getParameter("test");
		System.out.println(name1);		
		PrintWriter out=response.getWriter();	
		String str="{\"key1\":\"value1\"}";
		System.out.println(str);
		out.print(str);
		out.flush();
		out.close();
	}

}

客户端回调函数代码(其他相同)

function callBack(){
		
	if(xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){	
		var result=xmlHttpRequest.responseText;
		result=result.replace(/(^\s*)|(\s*$)/g, "");
		var json1=eval("("+result+")");
		for(var i in json1){
			alert(json1[i]);
		}
		
	}
}



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值