Ajax

最新推荐文章于 2022-06-19 13:50:53 发布

xiongzhouxiong

最新推荐文章于 2022-06-19 13:50:53 发布

阅读量135

点赞数

本文链接：https://blog.csdn.net/xiongzhouxiong/article/details/79733344

版权

Ajax:Asynchronous JavaScript and XML

( 异步 JavaScript 和 XML）

Ajax的作用：通过Ajax技术可以通过与后台的服务器进行少量的数据交换，从而实现网页的异步更新，即可以在不用重新加载网页的情况下进行局部刷新。

一，用JavaScript实现Ajax：

1.获取Ajax对象
var xhr=null;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject("Micorsoft.XMLHttp");

}

2. 使用Ajax对象调用open("请求方式","请求路径","是否为异步")

3. 绑定状态改变事件
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
// 交互成功时执行的代码
}
}

};

4. 发送请求
xhr.send(参数);
注意：若为post提交，则必须设置请求头消息：

setRequestHeader("content-type","application/x-www-form-urlencoded");

例如：这是一个用JavaScript实现Ajax，注册用的JSP

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>注册用户</title>
<script type="text/javascript">
    function getXHR(){
    	var xhr=null;
    	if(window.XMLHttpRequest){
    		xhr=new XMLHttpRequest();
    	}else{
    		xhr=new ActiveXObject("Microsoft.XMLHttp");
    	}
    	return xhr;
    }
    
    function checkUser(obj){
    	var regName=obj.value;   // 获取填写的注册用户名
    	var xhr=getXHR();   // 获取Ajax对象
    	xhr.open("post","/AjaxProject/checkServlet",true);  //true表示为异步
    	xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");  // post请求时必须设置该请求头
    	// 绑定onreadystatechange事件
    	xhr.onreadystatechange=function(){
    		if(xhr.readyState==4){
    			if(xhr.status==200){
    				var txt=xhr.responseText;   // 获取后台传来的响应文本
    				document.getElementById("msg").innerHTML=txt;
    			}
    		}
    	};
    	xhr.send("registerName="+regName);   // 发送请求
    }
</script>
</head>
<body>
   <form action="${pageContext.servletContext.contextPath}/registerServlet" method="post">
        注册用户名：<input type="text" name="regName" οnblur="checkUser(this)"/> <span id="msg" style="color:red"></span> <br/><br/>
        注册密码：<input type="password" name="regPwd"/> <br/><br/>
        <input type="submit" value="注册"/>
   </form>
</body>
</html>

二，jQuery实现Ajax

1.使用一个HTTP GET请求从服务器加载数据
$.get( url [, data ] [, success ] )
2.使用一个HTTP POST 请求从服务器加载数据
$.post( url [, data ] [, success ] )
3.执行一个异步的HTTP（Ajax）的请求
$.ajax( [settings ] )

例如：这是一个用jQuery实现Ajax注册用的JSP

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>注册用户</title>
<script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
<script type="text/javascript">
    $(function(){
    	$("#registername").blur(function(){
    		$.ajax({
    			method:"post",
    			url:"/AjaxProject/checkServlet",
    		    data:{"registerName":$("#registername").val()},
    		    beforeSend:function(){
    		    	alert("要发送数据了啊~~~");
    		    },
    		    success:function(data){
    		    	$("#msg").html(data);
    		    }
    		});
    	});
    });
  
</script>
</head>
<body>
   <form action="${pageContext.servletContext.contextPath}/registerServlet" method="post">
        注册用户名：<input type="text" id="registername" name="regName"/> <span id="msg" style="color:red"></span> <br/><br/>
        注册密码：<input type="password" name="regPwd"/> <br/><br/>
        <input type="submit" value="注册"/>
   </form>
</body>
</html>

相比之下，很容易看出，使用jQuery要比使用JavaScript的程序简单清晰许多。