Ajax 概念


Ajax的全称:

Asynchronous JavaScript and XML(异步的JavaScript和XML)

有了下面这个对象之后,才出现了异步处理请求的方式。
XMLHttpRequest对象
var request=new XMLHttpRequest();//这种方式在IE6,IE5不支持
所以可以定义如下:

Ajax不是某种编程语言,是一种在无需重新加载整个网页的情况之下能够更新部分网页的技术。

var request;
if(window.XMLHttpRequest)
{
	request=new XMLHttpRequest();//IE7+,Firefox,Chrome,Opera
}else{
	request=new ActiveXObject("Microsoft.XMLHTTP");//IE6,IE5
}

定义一个Ajax函数,因为针对不同的浏览器的创建方式不同,所以我们创建XmlHttpRequest如下:
function createXmlHttpRequest(){
				   var xmlHttp;
				   try{    //Firefox, Opera 8.0+, Safari
						   xmlHttp=new XMLHttpRequest();
					}catch (e){
						   try{    //Internet Explorer
								  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
							}catch (e){
								  try{
										  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
								  }catch (e){}  
						   }
					}
				   return xmlHttp;
				  }

使用这个函数我们就可以直接调用var xmlHttpRequest=createXmlHttpRequest();这样我们就创建出来需要的
函数,xmlHttpRequest有4种状态,xmlHttpRequest.onreadystatechange表示的是每次状态的变化触发的事件,
xmlHttpRequest.readyState表示当前所处的状态,当这个值等于4并且xmlHttpRequest.status==200||xmlHttpRequest.status==304,
就表示成功回传信息,发送的数据成功得到响应。
window.οnlοad=function(){//这个是页面加载完了过后再执行
		 		document.getElementById("checkusername").οnclick=function(){
		 			var xhr=createXmlHttpRequest();
		 			xhr.onreadystatechange=function()
		 			{
		 				if(xhr.readyState==4)//当有成功得到相应的状态后就执行这里面的操作
		 				{
		 					if(xhr.status==200||xhr.status==304){
			 					var data =xhr.responseText;
			 					document.getElementById("divcheck").innerHTML=data;
		 					}
		 				}
		 			}
		 			
		 			//打开和服务器的连接,加Time是让每次请求信息不一样,请求信息一样得不到响应
		 			xhr.open("POST","${pageContext.request.contextPath}/ajaxServlet?time="+new Date().getTime());
		 			//设置请求头信息
		 			xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
		 			var username=document.getElementById("username").value;
		 			//发送数据,使用post的话在前面设置serRequestHeader,使用get的话这里就是send(null)
		 			xhr.send("username="+username);
		 			
		 		}
		 	}

这样我们就将页面输入的username通过Ajax传给servlet去处理,处理完后通过Servlet中的PrintWriter out =
response.getWriter();  out.write("data");这个方法将数据传回到页面,页面通过

var data =xhr.responseText;得到数据并进行处理,就完成一次ajax请求。




                
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值