AJAX培训笔记

7.10
--------
Ajax:Asynchronous JavaScript And XML
异步的 JavaScript 和 XML

1：编写ajax遵守基本标准习惯
 标签名全小写，标签必须有结束标签，属性名必须小写，属性值必须位于“”或''内
2：创建ajax服务端代码：AjaxServer.java
   和普通的servlet类似，区别在于，普通servlet返回的是页面，而ajax返回的
   是我们想要的数据
   ajax框架：dwr,dojo,ext,prototype,jquery
3、编写页面：ajax.html
   A:编写js：verify.js
   B:在页面中引入该js
4、精简js：verify.js--->verify1.js
5、不使用jquery框架，直接使用ajax的异步对象XMLHttpRequest对象去实现ajax应用
步骤：
 A：创建XMLHttpRequest对象
 B：注册回调函数
 C：设置连接信息
 D：发送数据到服务端进行交互
 E：接受数据
 创建js：verifyown.js

相关代码：
------------
var xmlHttp;

function verify()
{
	//使用dom方式获取username的值
	var username = document.getElementById("username").value;
	//A：创建XMLHttpRequest对象
	xmlHttp = getXMLHttpRequest();
	//判断该异步对象是否创建成功
	if(xmlHttp)
	{
		// B：注册回调函数
		xmlHttp.onreadystatechange = callback;
		// C：设置连接信息
		xmlHttp.open("get","ajaxServer?username="+username,true);
		//D：发送数据到服务端进行交互
		xmlHttp.send(null);

		//xmlHttp.open("post","ajaxServer",true);
		//设置请求头
		//xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		//xmlHttp.send("username="+username);
	
	}
	
	
}

//D：发送数据到服务端进行交互
function callback()
{
	//判断数据是否交互完成
	if(xmlHttp.readyState == 4)
	{
		//判断http交互是否成功
		if(xmlHttp.status == 200)
		{
			//返回响应数据
			//alert(xmlHttp.responseText);
			var text = xmlHttp.responseText;
			//alert(text);
			document.getElementById("result").innerHTML = text;
		}
	
	}
}

//A：创建XMLHttpRequest对象
function getXMLHttpRequest()
{
	var xmlHttp = null;
	try
	{
		//FF Safari Opera IE
		xmlHttp = new XMLHttpRequest();
	}
	catch(e)
	{
		try
		{
			//IE 5,6
			xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch(e)
		{
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	return xmlHttp;
}

6:接收返回值类型为xml格式的数据
 A：AjaxServer.java--->AjaxXMLServer.java
 B:配置web.xml
 c：verifyown.js--->verifyXML.js
function callback()
{
//判断数据是否交互完成
if(xmlHttp.readyState == 4)
{
	//判断http交互是否成功
	if(xmlHttp.status == 200)
	{
		//返回响应数据 xml返回的是个对象
		//alert(xmlHttp.responseText);
		var xml = xmlHttp.responseXML;
		//var xml = xmlHttp.responseText;
		//alert(xml);
		var msgs = xml.getElementsByTagName("message");
		if(msgs.length > 0)
		{
		textNode = msgs[0].firstChild;
		//alert(textNode.nodeValue);
		var msg = textNode.nodeValue;
		//alert(msgs.length);
		document.getElementById("result").innerHTML = msg;
		}
		else
		{
		alert("xml数据解析错误，原始内容为："+xmlHttp.responseText);
		}
	}

}
}

7.11
------------
7、使用jquery的ajax方法实现文本数据的返回
 verify.js---->verifyJquery.js

$.ajax({
	//type:"get",
	//url:"ajaxServer?username="+username,
	type:"post",
	url:"ajaxServer",
	data:"username="+username,
	success:function(data)
	{
	//alert(data);
	$("#result").html(data);
	}
});

8、使用jquery的ajax方法实现xml数据的返回
verifyJquery.js---->verifyJqueryXML.js
$.ajax({
	//type:"get",
	//url:"ajaxServer?username="+username,
	type:"post",
	url:"ajaxXMLServer",
	data:"username="+username,
	dataType:"xml",
	success:callback
});

function callback(data)
{
	//dom--->jquery $(dom)
	//jquery-->dom jquery.get(0)
	var jqueryObj = $(data);
	var msgs = jqueryObj.children();
	var text = msgs.text();
	$("#result").html(text);
}

9、缓存问题：
   FF每次都发送请求。IE到哪个请求路径一样时，会调用缓存
   解决方案：时间戳
function convertURL(url)
{
	var timestamp = new Date().getTime();
	//将该时间戳加到url上
	if(url.indexOf("?") >= 0)
	{
		url += "&t="+timestamp;
	}
	else
	{
		url += "?t="+timestamp;
	}
	return url
}

简单的Math.Random()
var url = "ajaxServer?username="+username+"&t="+Math.random();

10、解决中文乱码问题
    get/post
//服务器端解码一次
username = URLDecoder.decode(username, "utf-8");
//在js端编码2次
username = encodeURI(username);
username = encodeURI(username);

字节码编码的原理：
在文本框中输入“中”


11：jQuery部分方法练习
    test1.html
-------
//1、简单：伪类
//：first
var firstul = $("ul:first");
//alert(firstul.get(0).id);
//:last
var lastul = $("ul:last");
//alert(lastul.get(0).id);
var ul = $("ul").get(1);
//alert(ul.id);
//:not
//var notul = $("ul:not");
var notul = $("#newsList li:not(.highlight)");
//alert(notul.length);
//alert(notul.text());
//手动遍历该集合
notul.each(function(){
	//alert(this.innerHTML);
	//alert($(this).html());
});

//将记录的间隔显示不同颜色
//：odd(单数) even(双数)
var uls = $("li:even");
//alert(uls.length); //5
/*	uls.each(function(){
	this.className="highlight"; //添加class属性值
});
*/
//使用隐式递归
//uls.addClass("highlight");	//为每个元素添加class属性值 
//alert($("span").html());
//$("span").text("<font color='red'>haha</a>");
//$("span").html("<font color='red'>haha</a>");
//$("li:first").addClass("highlight");
//$($("li").get(2)).addClass("highlight");
//$("li:eq(2)").addClass("highlight");
//$("li:gt(2)").addClass("highlight");
//$("li:lt(2)").addClass("highlight");
//获取所有的h标签
//var hs = $("h1,h2,h3,h4,h5,h6");
//hs.addClass("head");
//$(":header").addClass("head");

//内容
//contains
//var nodes = $("li:contains(4)");
//nodes.addClass("highlight");

//var ele = $(":hidden");
//var ele = $(":visible");
//表单
//var ele = $(":text");
//var ele = $(":input");

//表单对象属性
//var fms = $("form").get(0);
//alert(fms.elements.length);
//alert($("input:checked").length);
//alert($("form :checked").length);
//var eles = $("li:contains(4)");
//eles.css("color","red");
----------------

//链式调用源码分析
function Demo()
{
		
}

Demo.prototype={
	setName:function(name)
	{
		this.name = name;
		//返回对象本身
		return this;
	}
	,
	getName:function()
	{
		return this.name;
	}
	,
	setAge:function(age)
	{
		this.age = age;
		return this;
	}
	,
	getAge:function()
	{
		return this.age;
	}
}

//工厂函数
function D()
{
	return new Demo();
}

var o = D().setName("xwq").setAge("14");
alert(o.getName()+" "+o.getAge());
});

-------------
1：应用案例1：弹出窗口
A：编写页面：jqueryWin.html
B:编写css：win.css
C:编写js：jqueryWin.js

function showWin()
{
	var winNode = $("#win");
	//方法一 修改css
	//winNode.css("display","block");
	//方法二 show()
	//winNode.show("slow");  //slow normal fast 可选
	//方法三：fadeIn();
	//winNode.fadeIn("slow");
	//方法四 slideDown
	winNode.slideDown(3000);
}

function hide()
{
	var winNode = $("#win");
	//方法一 修改css
	//winNode.css("display","none");
	//方法二
	//winNode.hide();
	//方法三：fadeOut();
	//winNode.fadeOut();
	winNode.slideUp();
} 

7.12
------
2、应用案例2 弹出菜单
A：编写页面：jqueryMenu.html
B:编写css：menu.css
C:编写js:menu.js
完善点1：单击ul节点任何位置都会触发click事件
完善点2：为二级菜单添加连接，单击后将相关页面在类似与iframe中显示

jQuery(function()
//$(document).ready(function()
{
	//var uls = $("ul");
	var as = $("ul>a");
	as.click(function()
	{
		//取得当前的点击的ul
		var ulNode = $(this);
		//找到当前ul下所有li子元素集合 toggle() 切换的显示和隐藏
		//ulNode.children("li").toggle("slow");
		
		//完善点一 方法一、nextAll() prevAll()所有li兄弟元素
		ulNode.nextAll("li").toggle("slow");
		//方法二、parent() 父元素
		//ulNode.parent().children("li").toggle("slow");
	});
	//完善点二
	//给子菜单绑定click事件
	$("li>a").click(function()
	{
		//load事件不能用于 $(document).ready
		//$("#content").load(this.id);
		$("#content").load($(this).attr("id"));
	});
});

3、应用案例3：编辑文本框
  A：编写html页面-jqueryEdit.html
  B:编写css：edit.css
逻辑：
1、让这两个td绑定一个click事件
2、获取当前点击的td对象
3、取出当前td的值，存入临时变量
4、清空td的内容
5、创建一个input输入域
6、将临时变量的值赋给input输入域的value值
7、将该input元素插入到当前td中
8、取消绑定到该td上的click事件
完善点1：修改后单击回车键，修改过的值写入td，input消失,
	重新单击时，又可以进入编辑状态
完善点2：文本框内容高亮显示
jQuery(function()
{ 
	//绑定事件方法
	//$("td").click(tdclick);
	//可以绑定多个
	$("td").bind(
	{
		click:tdclick
	});
	//
});


function tdclick()
{
	//获取当前对象中的值
	var td = $(this);
	var text = td.text();
	//var len = text.length;
	//清空当前对象中的内容
	td.empty();
	//创建一个input输入域
	var input = $("<input>");
	//设置
	input.attr("value",text);
	//给input绑定keyup事件
	input.keyup(function(event)
	{
		//解决多浏览器获取事件的差异
		var myEvent = event||window.event;
		//判断是否按下回车键
		if(myEvent.keyCode == 13)
		{
			//保存input元素的内容
			var value = input.val();
			td.html(value);
			//重新获取click事件
			td.click(tdclick);
		}
	});
	//将input插入到当前td中
	input.appendTo(td);
	//td.append(input);
	//文本框内容高亮显示
	input.get(0).select();
	//取消绑定的事件
	td.unbind("click");
	//另一种方法
	//td.html("<input value='"+text+"' size='"+len+"' />");
}

---------------
jQuery(function()
{
	$("td").click(tdclick);
});

function tdclick()
{
	var td = $(this);
	var text = td.text();
	td.html("<input value='"+text+"'/>");
	var input = td.children();
	input.keyup(function(event)
	{
		var e = event||window.event;
		if(e.keyCode == 13)
		{
			var value = input.val();
			td.html(value);
			td.click(tdclick);
		}
	});
	td.unbind("click");
}

4：jquery综合案例1：模拟股票涨跌功能
 A：建立一个封装股票信息对象：Stock.java
 B: 编写服务端的servlet:用于返回实时更新的股票信息 GetStockInfo.java
 C:配置web.xml
 D：编写页面：jqueryStock.html
完善点1：每隔一秒自动刷新指数
完善点2：当前价格低于昨天收盘价，显示绿盘，否则显示红盘
第二部分：
实现当鼠标移到某个链接后，填出窗口，显示该股票的具体信息
   A:修改jqueryStock.html,加入弹出窗口div
   B:jqueryStock.js----》jqueryStock1.js
   C:编写css,修饰该弹出框：stock.css
   D:通过js可控制弹出框的位置
   E:返回的JSON格式的值是数组或对象的不同处理方式
var obj;
var sid;
jQuery(function(){
	//alert(1);
	var stockNode=$("#stock");
	//隐藏该弹出框
	stockNode.hide();
	var as=$("a");
	as.mouseover(function(event){		
		var aNode=$(this);		
		//alert(aNode);
		var divNode=aNode.parent();
		//对象格式
		//sid=divNode.attr("id");
		//数组格式
		sid=divNode.attr("name");
		//更新弹出框
		updateDIV();
		//通过js可控制弹出框的位置
		//A:直线移动
		//创建该链接的偏移量
		//var offset=aNode.offset();
		//设置弹出框的left,top
		//stockNode.css("left",offset.left+"px")
		//.css("top",offset.top+aNode.height()+"px");
		//B：平面移动
		//FF/IE兼容
		var myEvent = event||window.event;
		//alert("x:"+myEvent.clientX+"y:"+myEvent.clientY);
		stockNode.css("left",myEvent.clientX+5+"px")
		.css("top",myEvent.clientY+5+"px");
		//显示该弹出框
		stockNode.show();
		
	});
	as.mouseout(function(){
		//隐藏该弹出框
		stockNode.hide();		
	});
	getInfo();
	setInterval(getInfo,1000);
});

function getInfo()
{
	$.get("getStockInfo",null,function(data)
	{
		//data=[{name:"上证指数",yes:2067.2,tod:2056.3,now:2046.71},
		// {name:"美利纸业",yes:5.12,tod:5.23,now:5.44}]
		//将返回的字符串解析成js对象
		var obj = eval(data);
		//获取该集合中的具体的股票对象(数组格式)
		var szzs = obj[0];
		var mlzy = obj[1];
		//对象格式
		//data=
		//{
	//       "000001":{name:"上证指数",yes:2067.2,tod:2056.3,now:2051.3},
	//	 "000815":{name:"美利纸业",yes:5.12,tod:5.32,now:5.34}
		}
		//var szzs = obj["000001"];
		//var mlzy = obj["000815"];
		var span1 = $("#000001").children("span");
		span1.html(szzs.now);
		var span2 = $("#000815").children("span");
		span2.html(mlzy.now);
		//当前价格低于昨天收盘价，显示绿盘，否则显示红盘
		if(szzs.now > szzs.yes)
		{
			span1.css("color","red");
		}
		else
		{
			span1.css("color","green");
		}
		if(mlzy.now > mlzy.yes)
		{
			span2.css("color","red");
		}
		else
		{
			span2.css("color","green");
		}
		//更新弹出框
		updateDIV();
	});
}

//更新弹出框
function updateDIV(){
	var stockObj = obj[sid];
	//alert(stockObj.name);
	for(var proname in stockObj){
		//alert(proname);
		if(proname !="name"){
			//找到div节点
			var spanDiv=$("#"+proname).children("span");
			spanDiv.html(stockObj[proname]);
			//重新设置红绿盘
			if(stockObj.now > stockObj.yes){
				$("#now").children("span").css("color","red");				
			}
			else{
				$("#now").children("span").css("color","green");
			}
		}
	}
}

5、jquery综合案例2:模拟下拉框自动补全功能
A：编写服务端代码：AutoComplete.java
B:配置web.xml
C:配写数据文件：word.xml
D：编写页面：jqueryAutoComplete.html
E:编写js:jqueryAuto.js
F:编写补全框的样式：使用js的css方法
G:增加键盘事件：jqueryAuto.js---》jqueryAuto1.js
//定义一个当前高亮显示的节点的索引号
var highlightindex = -1;
jQuery(function()
{
	var timeout; //定时器
	var wordInput = $("#word");
	//获取该输入框的偏移量
	var wordInputOffset = wordInput.offset();
	//获取autodiv节点对象
	var autoNode = $("#auto");
	//将自动提示框先隐藏
	autoNode.hide().css("border","1px black solid")
		.css("backgroundColor","gray")
		.css("position","absolute")
		.css("left",wordInputOffset.left+"px")
		.css("top",wordInputOffset.top+wordInput.height()+7+"px")
		.css("width",wordInput.width()+2+"px");
		//.width(wordInput.width()+"px");
	wordInput.keyup(function(event)
	{
		var myEvent = event||window.event;
		var code = myEvent.keyCode;
		//判断是否是a-z，退格键，delete键
		if(code >=65 && code<=90 || code==8 || code ==46)
		{
			var word = wordInput.val();
			//将该值交给ajax引擎请求后台服务器
			if(word != "")
			{
			clearTimeout(timeout);
			//服务器请求加上延时，最后一个keyup再发送请求
			timeout = setTimeout(function()
			{
			$.post("autoComplete",null,function(data)
			{
			var jqueryObj = $(data);
			//找到所有的word节点
			var wordNodes = jqueryObj.find("word");
			//清空该提示框
			autoNode.empty();
			wordNodes.each(function()
			{
			var text = $(this).text();
			if(text.indexOf(word) == 0)
			{
				//$("<div>").html(text).appendTo(autoNode);
				$("<div>").text(text).appendTo(autoNode);
			}
			});
			autoNode.show();
			});
			},500);
			}
			else
			{
				autoNode.hide();
			}
		}
		//单独处理向上和向下键
		//向上键
		else if(code == 38)
		{
			var autoNodes = autoNode.children("div");
			if(highlightindex == -1)
			{
				//将索引值置为长度-1
				highlightindex = autoNodes.length -1;
			}
			else
			{
			//将原来的记录背景还原为白色
			autoNodes.eq(highlightindex).css("background-color","white");
			highlightindex--;
			autoNodes.eq(highlightindex).css("background-color","blue");
			}
		}
		else if(code == 40)
		{
			var autoNodes = autoNode.children("div");
			autoNodes.eq(highlightindex).css("background-color","white");
			if(highlightindex == autoNodes.length-1)
			{
				highlightindex = -1;
			}
			highlightindex++;
			autoNodes.eq(highlightindex).css("background-color","blue");
		}
		else if(code == 13)
		{
			if(highlightindex >=0 )
			{
				var autoNodes = autoNode.children("div");
				var wordText = autoNodes.eq(highlightindex).text();
				wordInput.val(wordText);
				autoNode.hide();
				highlightindex = -1;
			}
			else
			{
				alert(wordInput.val());
				wordInput.blur();
			}
		}
	});
	//给按钮绑定click事件
	$("input[type='button']").click(function()
	{
		alert(wordInput.val());
	});
});


补充
---------
//js中定义一个对象的方法
var obj={name:"mike",age:12};

jquery中的两大特性：链式调用和隐式递归

html() html(val) //匹配第一个元素
text() text(val) //匹配所有的元素
val() val(val)  //匹配第一个元素

jquery中的相当于js中的onload方法
//jQuery(function()
$(document).ready(function()

/*让相邻框合并*/
border-collapse: collapse;

$():返回一个空的jQuery对象。
$(html):根据提供的HTML字符串,创建DOM 元素,如:$(“<h1>Hello</h1>")
$(elements):将一个或多个DOM元素转化为jQuery对象,如:$(document.body)

//web.xml中的启动时就加载 1是优先级
<servlet>
	<servlet-name>getStockInfo</servlet-name>
	<servlet-class>com.itany.servlet.GetStockInfo</servlet-class>
	<load-on-startup>1</load-on-startup>
</servlet>

---------
1、使用第三方jar包提供的方法实现将java对象转成JSON格式字符串
A:test.jsp
B:test.js
C:javabean:Person.java,Address.java
D:编写servlet:DemoServlet.java
E:web.xml

servlet
------
resp.setContentType("text/html;charset=utf-8");
        //设置该页面无缓存
        resp.setHeader("cache-control", "no-cache");
        //初始化Person对象
        Person p = new Person("xwq","男",24,new Address("江苏省","南京市","浦口区"));
        Person p1 = new Person("sj","女",22,new Address("江苏省","南京市","浦口区"));
        //将该值存入list集合
        List<Person> ps = new ArrayList<Person>();
        ps.add(p);
        ps.add(p1);
        //将该集合转成json数组对象
        JSONArray jsonArray = JSONArray.fromObject(ps);
        //将sjon数据传给客户端
        JSONObject jsonObject = new JSONObject();
        jsonObject.put("person", jsonArray);
        resp.getWriter().print(jsonObject.toString());
	//resp.getWriter().print(JsonUtil.list2json(ps));

js
----
function addPerson()
{
	$.ajax(
	{
		type:"post",
		url:"demoServlet",
		dataType:"json",
		success:function(data)
		{
			//获取person对象集合
			var ps = data.person;
			$("#planTable").empty();
			$.each(ps,function(i,p)
			{
				//拷贝行
				var row = $("#tr").clone();
				//对该行的每个子元素设置
				row.find("#name").text(p.name);
				row.find("#age").text(p.age);
				row.find("#gendar").text(p.gendar);
				row.find("#address").text(p.address.province
					+p.address.city+p.address.country);
				//将该tr追加到table
				row.appendTo("#planTable");
			});
		}
	});
}