JS ajax 例子

用 js ， jQuery 编写 ajax 的样式，三种写法，例子：

//用 js 原生写法
function sendGet(url){
    xhr.onreadystatechange =function(){
	    if(xhr.readyState == 4 && xhr.status == 200){
	    //获取服务器响应
	    document.querySelector("#show").innerHTML = xhr.responseText;
	    }
	};
    //发送异步请求
	xhr.open("GET",url,true);
	//发送请求
	xhr.send();
}

//jQuery 写法
function sendGet(url){
	$.get(url,function(data){
	document.querySelector("#show").innerHTML = data;
});

function sendGet(url){
    //用 ajax 写
    $.ajax(
    {
	    url:url,
	    method:'get',
	    success: function(data){
		    document.querySelector("#show").innerHTML = data;
	    },
	    error:function(err){
		    alert(err);
	    }					
    });
}

整体的代码：将项目放在 TomCat 下的 root 文件夹下，浏览器输入 localhost:8080/history.html 即可运行。

history.html 代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>首页</title>
		<script src="jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">			
			table{
				display: inline-table;
				width: 320px;
				border: 1px solid lightgray;
				border-collapse: collapse;
				vertical-align: top;
				margin-right: 0px;
			}
			td{
				padding: 15px;
				cursor: pointer;
				border: 1px solid lightgray;
				
			}
			tr{
				background: linear-gradient(to right,#f6f6f6,#fff);
			}
			tr:hover{
				background: linear-gradient(to right,#eee,#f6f6f6);
			}
			
			div>div{
				display: inline-block;
				width: 400px;
				height: 300px;
				padding: 10px;
				box-sizing: border-box;
				border: 1px solid lightgray;
				margin-left:0px ;			
			}			
		</style>				
	</head>
	<body>	
		<div style="width: 725px;">
			<table border="1" cellspacing="0" cellpadding="0">
				<tr><td title="java">疯狂java 讲义</td></tr>
				<tr><td title="ee">java ee</td></tr>
				<tr><td title="android"> android</td></tr>
				<tr><td title="html">  html </td></tr>
				<tr><td title="front">front</td></tr>				
			</table>
			<div id="show">				
			</div>
		</div>			
		<script type="text/javascript">		
			var xhr = new XMLHttpRequest();
			window.onload = function(){
				//页面加载时，替换 history 的状态
				history.replaceState(null,"首页","history.html?id=java");
			}
			//获取页面上所有td元素
			var tdList = document.querySelectorAll("td");
			//遍历所有的 td 元素， 为他们的 onclick 时间绑定处理函数
			for(var i =0;i< tdList.length;i++){
				tdList[i].onclick = function(src){
					//以当前单元格的 title为参数发送异步请求
					sendGet("books.jsp?id=" + src.target.title);
					//想 history 压入状态
					history.pushState({"cellTitle":src.target.title},
						"首页","history.html?id="+ src.target.title);
				//取消所有td元素的背景色
				var tdList = document.querySelectorAll("td");
				for(var i=0;i <tdList.length; i++){
					tdList[i].style = undefined;
				}
				//为当前单击的单元格设置背景色
				src.target.style.background = 
						"linear-gradient(to right,#ddd, #eee)";
				}
			}
			/*
			//用 js 原生写法
			function sendGet(url){
				xhr.onreadystatechange =function(){
					if(xhr.readyState == 4 && xhr.status == 200){
						//获取服务器响应
						document.querySelector("#show").innerHTML = xhr.responseText;
					}
				};
				
				//发送异步请求
				xhr.open("GET",url,true);
				//发送请求
				xhr.send();
			}
			*/
			
			//jQuery 写法
			function sendGet(url){
				//$.get(url,function(data){
				//	document.querySelector("#show").innerHTML = data;
				//});	
				
				//用 ajax 写
				$.ajax(
				{
					url:url,
					method:'get',
					success: function(data){
						document.querySelector("#show").innerHTML = data;
					},
					error:function(err){
						alert(err);
					}					
				});
			}
			
			//为窗口的 popstate 事件绑定监听器
			window.addEventListener("popstate",function(){
				//获取history 的状态数据
				var curTitle = history.state["cellTitle"];
				var tdList = document.querySelectorAll("td");
				//取消所有单元格的背景色，只设置被选中的单元格的背景色
				for(var i = 0;i <tdList.length ; i++){
					if(tdList[i].title == curTitle){
					tdList[i].style.background ="linear-gradient(to right,#ddd,#eee)";
					}
					else{
						tdList[i].style = undefined;
					}
				}	
					//通过窗口地址栏获取请求参数
					queryStr = window.location.href.split("?")[1];
					//发送异步请求	
					sendGet("books.jsp?"+ queryStr);
			});			
		</script>					
	</body>
</html>

book.jsp 代码：

<%@page pageEncoding="UTF-8"%>
<%
	String id = request.getParameter("id");
	String result =null;
	if (id.equals("java")) {
		result = "java 书，111111111111111111111111";
	}else if (id.equals("ee")){
		result = "java ee书，2222222222222222222222";
	}else if (id.equals("android")){
		result = "android 书，33333333333333333333333";
	}else if (id.equals("html")){
			result = "html 书，4444444444444444444444444444";
	}else if (id.equals("front")){
			result = "front 书，55555555555555555";    
	}
	out.println(result);	
%>

猜你喜欢