ajax+json前端分页小实例

gdqsh

浏览: 17590 次
性别:
来自: 北京

最近访客更多访客>>

happinessllw

Hather-Clare

呵呵呵呵xx

wanghao123

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

web前端

Ajax json XML IE .net

前端jsp

<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>11111</title>
<link href="../css/style.css" rel="stylesheet" type="text/css">
<script language="javascript" src="function/ajax_func.js"></script>
<script language="javascript" src="function/json.js"></script>
<script language="javascript">
//页面加载，获取第一页的新闻列表
function winload() {
	send_request("get","newsManager?currentPage=1",null,"XML",populateList);
}
//将所获取的新闻列表填充到页面的相应位置
function populateList() {
	if (http_request.readyState == 4) { // 判断对象状态
		if (http_request.status == 200) { // 信息已经成功返回，开始处理信息
			var jsonCon = http_request.responseText.parseJSON();
			var jsonObj = eval(jsonCon);
						
            
			var currentPage = jsonObj.currentPage;
			var totalPage = jsonObj.totalPage;
			var prePage = parseInt(currentPage) - 1;
			var nextPage = parseInt(currentPage) + 1;
			var newslist = jsonObj.news;
			var innerHTML = "";
			if((newslist!=null)&&(newslist.length!=0)) {
				innerHTML += "<table width=\"100%\" cellpadding=\"2\" cellspacing=\"0\" border=\"0\">\r\n";
				innerHTML += "<tr><td width='10%' height='25'>ID</td><td width='65%'>标题</td></tr>";
				for(var i=0;i<newslist.length;i++) {
					var id = jsonObj.news[i].id;
					var title = jsonObj.news[i].name;
					innerHTML += "<tr>";
					innerHTML += "<td width='10%' height='25'>"+id+"</td>";
					innerHTML += "<td width='65%' height='25'>"+title+"</td>";
					innerHTML += "</tr>";
				}
				innerHTML += "</table>\r\n";
			}else {
				innerHTML += "暂时没有任何信息";
			}
			//Download by http://www.codefans.net
			//window.alert(currentPage+"|"+nextPage+"|"+prePage+"|"+totalPage);
			document.getElementById("newslist").innerHTML = innerHTML;
			document.getElementById("prePage").innerHTML="<a href=\"javascript:void(0)\" onClick=\"goToPage('"+prePage+"')\">上一页</a>";
			document.getElementById("nextPage").innerHTML="<a href=\"javascript:void(0)\" onClick=\"goToPage('"+nextPage+"')\">下一页</a>";
			document.getElementById("lastPage").innerHTML="<a href=\"javascript:void(0)\" onClick=\"goToPage('"+totalPage+"')\">最末页</a>";
			//window.alert(currentPage);
			
		} else { //页面不正常
			alert("您所请求的页面有异常。");
		}
	}
}
//页面跳转
function goToPage(page) {
	send_request("get","newsManager?currentPage="+page,null,"XML",populateList);
}
</script>
</head>

<body onLoad="winload()">
<table width="500" border="0" cellspacing="0" cellpadding="4">
  <tr>
    <td align="center">1111</td>
  </tr>
</table>
<table width="500" border="0" cellspacing="0" cellpadding="4">
  <tr>
    <td align="center" height="200" valign="top">
		<label id="newslist"></label>
		</td>
  </tr>
</table>
<table width="500" border="0" cellspacing="0" cellpadding="4">
  <tr>
    <td align="center">
		<label id="firstPage">[url=javascript:void(0)]第一页[/url]</label>
		<label id="prePage">上一页</label>
		<label id="nextPage">下一页</label>
		<label id="lastPage">最末页</label>
		</td>
  </tr>
</table>
</body>
</html>

ajax_func.js

//定义XMLHttpRequest对象实例
var http_request = false;
//定义可复用的http请求发送函数
function send_request(method,url,content,responseType,callback) {//初始化、指定处理函数、发送请求的函数
	http_request = false;
	//开始初始化XMLHttpRequest对象
	if(window.XMLHttpRequest) { //Mozilla 浏览器
		http_request = new XMLHttpRequest();
		if (http_request.overrideMimeType) {//设置MiME类别
			http_request.overrideMimeType("text/xml");
		}
	}
	else if (window.ActiveXObject) { // IE浏览器
		try {
			http_request = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try {
				http_request = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e) {}
		}
	}
	if (!http_request) { // 异常，创建对象实例失败
		window.alert("不能创建XMLHttpRequest对象实例.");
		return false;
	}
	if(responseType.toLowerCase()=="text") {
		//http_request.onreadystatechange = processTextResponse;
		http_request.onreadystatechange = callback;
	}
	else if(responseType.toLowerCase()=="xml") {
		//http_request.onreadystatechange = processXMLResponse;
		http_request.onreadystatechange = callback;
	}
	else {
		window.alert("响应类别参数错误。");
		return false;
	}
	// 确定发送请求的方式和URL以及是否异步执行下段代码
	if(method.toLowerCase()=="get") {
		http_request.open(method, url, true);
	}
	else if(method.toLowerCase()=="post") {
		http_request.open(method, url, true);
		http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	}
	else {
		window.alert("http请求类别参数错误。");
		return false;
	}
	http_request.send(content);
}
// 处理返回文本格式信息的函数
function processTextResponse() {
	if (http_request.readyState == 4) { // 判断对象状态
		if (http_request.status == 200) { // 信息已经成功返回，开始处理信息
			//alert(http_request.responseText);
			alert("Text文档响应。");
		} else { //页面不正常
			alert("您所请求的页面有异常。");
		}
	}
}
//处理返回的XML格式文档的函数
function processXMLResponse() {
	if (http_request.readyState == 4) { // 判断对象状态
		if (http_request.status == 200) { // 信息已经成功返回，开始处理信息
			//alert(http_request.responseXML);
			alert("XML文档响应。");
		} else { //页面不正常
			alert("您所请求的页面有异常。");
		}
	}
}
servlet  


package com.eamoi.ajax;



import java.io.BufferedReader;

import java.io.File;

import java.io.FileReader;

import java.util.ArrayList;

import java.util.HashMap;

import java.util.List;

import java.util.Map;



import net.sf.json.JSONArray;

import net.sf.json.JSONObject;





public class NewsJsonService {

	

	public NewsJsonService(){

		

	}

	public List getNews(){

		StringBuffer sb = new StringBuffer();

		List l = new ArrayList();

		try{

//			File f = new File(System.getProperty("user.dir")+File.separator+"src"+File.separator+"news.txt");

//			FileReader fr = new FileReader(f);

//			BufferedReader bf = new BufferedReader(fr);

//			String strObj;

//			while ((strObj = bf.readLine()) != null) {

//				sb.append(strObj);

//			}

			Map map1 = new HashMap();

			map1.put("0", "aa");

			map1.put("1", "bb");

			Map map2 = new HashMap();

			map2.put("0", "aa2");

			map2.put("1", "bb2");

			Map map3 = new HashMap();

			map3.put("0", "aa3");

			map3.put("1", "bb3");

			Map map4 = new HashMap();

			map4.put("0", "aa4");

			map4.put("1", "bb4");

			Map map5 = new HashMap();

			map5.put("0", "aa6");

			map5.put("1", "bb6");

			Map map6 = new HashMap();

			map6.put("0", "aa6");

			map6.put("1", "bb6");

			Map map7 = new HashMap();

			map7.put("0", "7aa");

			map7.put("1", "b7b");

			Map map8 = new HashMap();

			map8.put("0", "a8a");

			map8.put("1", "b8b");

			Map map9 = new HashMap();

			map9.put("0", "a9a");

			map9.put("1", "b9b");

			Map map10 = new HashMap();

			map10.put("0", "a00a");

			map10.put("1", "b00b");

			Map map11 = new HashMap();

			map11.put("0", "a111a");

			map11.put("1", "b111b");

			l.add(map1);

			l.add(map2);

			l.add(map3);

			l.add(map4);

			l.add(map5);

			l.add(map6);

			l.add(map7);

			l.add(map8);

			l.add(map9);

			l.add(map10);

			l.add(map11);

//			for(int i= 0;i<2;i++){

//				map.put(i+"", i+"s");

//			}

//			

//			l = new ArrayList();

//			for(int j=0;j<10;j++){

//				l.add(map);

//			}

			

		}catch (Exception e){

			e.printStackTrace();

		}

		return l;

	}

	

	public static void main(String[] args){

		NewsJsonService nj = new NewsJsonService();

		nj.getNews();

		String i = "";

	}



}

分享到：

http下载小实例

2010-12-14 09:33
浏览 4235
评论(1)
分类:Web前端
查看更多

1 楼 gdqsh 2010-12-14

第一次发表文章有点乱见谅各位！！

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

ajax+json前端分页小实例

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

ajax+json前端分页小实例

评论

发表评论

相关推荐

java 上传小实例

http下载小实例

最近访客更多访客>>