Ajax最实用的小例子集合

今天我为大家带来了几个非常实用的ajax小例子，都是在工程中经常用到的实用的例子。适合有基础的同学，废话也不多说了，看代码

哦，对了，所有的例子都是用servlet+jsp实现的至于三大框架的，我相信，只要这个会了，那都不是事...

1、我们先用基本的ajax实现验证用户名是否存在的例子(此例子只对IE浏览器)，

例子截图

jsp的代码

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>原生的ajax</title>
<script type="text/javascript">
var xmlhttp;
//创建XMLHttpRequest对象
function createXMLHttpRequest() {try {//针对IE5、IE5.5、IE6xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");} catch (e) {try {//针对IE5、IE5.5、IE6xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");} catch (e) {try {//针对FireFox、Mozillar、Opera、Safari、IE7、IE8xmhttp = new XMLHttpRequest();//创建XMLHttpRequest对象if (xmlhttp.overrideMimeType) {//修正某些浏览器的BUGxmlhttp.overrideMimeType("text/xml");}} catch (e) {}}}
}function ajaxsub(t) {//创建一个XmlHttpRequest对象(js内置对象)createXMLHttpRequest();if (xmlhttp != null) {//确定XMLHttpRequest是否创建成功var url = "AjaxServlet";//1.是http请求的方式  POST和GET//2.是服务器的地址,可以一个servlet//3.是采用同步还是异步，true为异步xmlhttp.open("POST", url, true);//post请求要自己设置请求头  注意顺序xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");xmlhttp.onreadystatechange = callfun; //注册回调函数  callfun对应一个js的函数名字,这个函数由我们自己定义//发送请求xmlhttp.send("on=check&name=" + t.value + "&id=10");} else {alert("不能创建XMLHttpRequest对象实例")}}//回调函数
function callfun() {//获取服务器返回的数据//回调函数里面会执行多次,次数取决建立连接的时间和建立连接成功之后服务器处理的时间//获取与服务器建立连接是否成功if (xmlhttp.readyState == 4) {if (xmlhttp.status == 200) {//服务器已经成功处理请求，并返回数据var serviceData = xmlhttp.responseText;//获取服务器返回的文本数据//alert("服务器返回的数据是:" + serviceData);var vs = "";if (serviceData == "1") {vs = "不可以注册";} else {vs = "可以注册";}document.getElementById("msg_info").innerHTML = vs;}}}
</script>
</head>
<body>
用户名:<input type="text" name="username" οnblur="ajaxsub(this)"><label id="msg_info"></label>
</body>
</html>

servlet代码

String name=request.getParameter("name");response.setContentType("text/html;charset=utf-8");PrintWriter out=response.getWriter();//获取数据库的数据String sql="select * from users where username='"+name+"'";System.out.println(sql);try {ResultSet rs=DBUtil.getConn().createStatement().executeQuery(sql);

                        //判断是否存在

			if(rs.next()){out.print(1);}else{out.print(0);}} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}out.flush();out.close();

从上面的例子我们看得出原生的ajax对浏览器的兼容问题及其不好，于是jquery就为我们提供了非常方便的ajax异步得到数据的方法。
从下面的例子开始我们就用jquery提供的方法写

2、省市级联动

效果

我们可以用火狐的开发者模式看到要异步加载的数据

首先我们先引用jquery

jsp

省/直辖市
<select name="pri" id="pri">
<option>--请选择--</option>
<option value="bj">北京</option>
<option value="hn">河南</option>
<option value="hb">湖北</option>
<option value="sx">山西</option>
</select>
市/区
<select id="city" name="city">
</select>
<script type="text/javascript">
$("#pri").change(function(){

        //获取你点击的省

	var pri=$(this).val();

        //得到你异步加载的servletvar url="AjaxServlet?on=city";

       //异步加载数据$.post(url,{pri:pri},function(data){$("#city").empty();var city=data.split(",");for(var i=0;i<city.length;i++){$("#city").append("<option value='"+city[i]+"'>"+city[i]+"</option>");}});
});
</script>

servlet代码

	     String pri=request.getParameter("pri");response.setContentType("text/html;charset=utf-8");PrintWriter out=response.getWriter();//模拟数据库的数据Map<String, String> map=new HashMap<String,String>();map.put("bj", "朝阳区,昌平区,海淀区,丰台区");map.put("hn", "郑州,开封,洛阳,荥阳");map.put("hb", "武汉,湖北1,湖北2,湖北3");map.put("sx", "大同,宝鸡,山西1,山西2");//写进输出流out.print(map.get(pri));out.flush();out.close();

3、模仿百度查询提示

jsp代码

<div class="search">
<input type="text" name="title" id="searchtitle"/>
<input type="button" value="搜索" id="searchsub"/>
<div id="result">
</div>
</div

<script type="text/javascript">
$(function(){$("#searchtitle").keyup(function(){$("#result").css("display","none");//隐藏结果提示var title=$(this).val();//获取查询的内容setTimeout(function(){var url="AjaxServlet?on=tips";//异步加载servlet$.post(url,{title:title},function(data){$("#result").empty();//清除查询内容//判断结果是否是空if(data.length!=0){var arr=data.split(",");//截取字符串for(var i=0;i<arr.length;i++){$("#result").append("<div class='tips'>"+arr[i]+"</div>");}//结果提示//$("#result").css("display","block");$("#result").fadeIn("slow");//淡入slow,fast,淡出fadeOut//点击tip添加到输入框$(".tips").click(function(){var text=$(this).text();$("#searchtitle").val(text);$("#result").css("display","none");});}});},500);//延迟加载时间});
});
</script>

servlet代码

String title=request.getParameter("title");response.setContentType("text/html;charset=utf-8");PrintWriter out=response.getWriter();//默认最多出现六条数据 看你的需求  String sql="select name from items where name like'%"+title+"%' limit 6";try {ResultSet rs=DBUtil.getConn().createStatement().executeQuery(sql);StringBuffer sb=new StringBuffer();//拼Josn格式的数据while(rs.next()){sb.append(rs.getString(1)+",");}//sb.substring(0,(sb.length()-1))是一个String类型的;if(sb.length()>0){out.print(sb.substring(0,(sb.length()-1)));}} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}out.flush();out.close();

4、层级菜单

sevlet获取的数据库中的数据

String sql="SELECT cid,cname from catalog where pid='00'";List<Catalog> list=new ArrayList<Catalog>();try {ResultSet rs=DBUtil.getConn().createStatement().executeQuery(sql);Catalog cata=null;while(rs.next()){cata=new Catalog();cata.setCid(rs.getString(1));cata.setCname(rs.getString(2));list.add(cata);}request.setAttribute("list", list);}catch (Exception e) {e.printStackTrace();}request.getRequestDispatcher("jq_ajax.jsp").forward(request, response);

jsp代码

<divid="menudiv"><ul><c:forEachitems="${list }" var="v"><liclass="oneli" id="${v.cid }">${v.cname}</li><ulclass="twoul"></ul></c:forEach></ul>
</div>

<script type="text/javascript">$(function(){$(".oneli").click(function(){var id=$(this).attr("id");var mythis=this;//在回调函数不能使用this对象var l = $(mythis).next(".twoul").children("li").length;if(l==0){var url="AjaxServlet?on=menu";$.post(url,{id:id},function(data){data = eval("(" + data + ")");for(var i=0;i<data.length;i++){$(mythis).next(".twoul").append("<li>"+data[i].cname+"</li>");}});}$(this).next(".twoul").toggle();});});
</script>

用来异步获取数据的servlet

String id=request.getParameter("id");response.setContentType("text/html;charset=utf-8");PrintWriter out=response.getWriter();String sql="SELECT cid,cname from catalog where pid='"+id+"'";List<Catalog> list=new ArrayList<Catalog>();try {ResultSet rs=DBUtil.getConn().createStatement().executeQuery(sql);Catalog cata=null;while(rs.next()){cata=new Catalog();cata.setCid(rs.getString(1));cata.setCname(rs.getString(2));list.add(cata);}}catch (Exception e) {e.printStackTrace();}String jsonList=JSONArray.fromObject(list).toString();out.print(jsonList);out.flush();out.close();

5、异步分页

这个例子我用到了封装json数据的包

使用JSONObject类的对象操作JSON对象
JSONArray 用来转换json数组格式的数据
get方法根据下标获取JSONArray 对象里面的值
JSONObject用来转换json对象格式的数据

需要用到jar包

jsp代码

<div>
<center>
<table>
<thead>  <tr><td>id</td><td>所属类别</td><td>商品名称</td><td>产地</td></tr>
</thead><tbody id="example"></tbody>
</table>
</center>
<div id="page">
</div>
</div>

<script type="text/javascript">
var nowpage=1;
$(function(){getJson(1);
});
function getJson(nowpage){var url1="AjaxServlet?on=ajaxpage";$.ajax({  type: "post", async: "false",data:{page:nowpage},url: url1,  success: function(info){$("#example").empty();$("#page").empty();var obj=eval("("+info+")");var endPage=obj.page.endPage;var nowPage=obj.page.nowPage;$.each(obj.list,function(i,v){$("#example").append("<tr><td>"+v.id+"</td><td>"+v.cid+"</td><td>"+v.city+"</td><td>"+v.name+"</td></tr>");});$("#page").append("当前:"+nowPage+"/"+endPage+"页<a href='javascript: getJson(1)'>首页</a><a href='javascript: getJson("+(nowPage-1)+")'>上一页</a>");for(var i=1;i<=endPage;i++){$("#page").append("<a href='javascript: getJson("+i+")'>"+i+"</a>");}$("#page").append("<a href='javascript: getJson("+(nowPage+1)+")'>下一页</a><a href='javascript: getJson("+endPage+")'>末页</a>");}});
}</script>

servlet代码

response.setContentType("text/html;charset=utf-8");PrintWriter out=response.getWriter();String page=request.getParameter("page");int pageSize=5;//一页显示的页数int pageCount=27;//总页数List<Items> itemsList=new ArrayList<Items>();int nowPage=(page=="" || page==null)?1:Integer.parseInt(page);//计算当前页int endPage=pageCount/pageSize;//末页endPage=(pageCount%pageSize==0)?endPage:endPage+1;//计算末页,不够一页补一页nowPage=(nowPage<1)?1:nowPage;//如果当前页小于1,则返回第一页nowPage=(nowPage>=endPage)?endPage:nowPage;//如果的当前页大于末页,则返回末页Page p=new Page();p.setNowPage(nowPage);p.setEndPage(endPage);String sql="select * from items limit "+(nowPage-1)*pageSize+","+pageSize;try {ResultSet rs=DBUtil.getConn().createStatement().executeQuery(sql);Items i=null;while(rs.next()){i=new Items();i.setId(rs.getInt("id"));i.setCid(rs.getString("cid"));i.setName(rs.getString("name"));i.setCity(rs.getString("city"));itemsList.add(i);}} catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}Map<String,Object> map=new HashMap<String,Object>();map.put("page", p);map.put("list", itemsList);String jsonList=JSONObject.fromObject(map).toString();System.out.println(jsonList);out.print(jsonList);

由于现在写的太多了，所以没本法放个文档，对于JSONArray和JSONObect不懂得可以微博联系我，我给你文档....

想要源代码的亦可以给我发微博

希望大家一起学习