Ajax学习笔记

Ajax学习

1、什么是Ajax？不用刷新页面，但可以和服务器进行通信的方式。使用Ajax的主要方式是XMLHttpRequest对象

2、Ajax传输的3种方式：

1）HTML：不需要解析可以直接放到文档中，如仅更新一部分区域，单传输数据不是很方便，且HTML代码需要拼装完成；

2）XML：笨重，解析困难，但XML是通用的数据交换格式；

3）JSON：小巧，有面向对象特征，且很多第三方的jar包可以把JAVA对象或集合转为JSON字符串；

3、使用jQuery完成Ajax操作

1）load方法：可以用于HTML文档的元素几点，把结果直接加为对应节点的子元素。通常load方法加载后的数据是一个HTML片段；

var $obj=...

var url=...

var args={key:value,...};

$obj.load(url,args);

2）$.get,$,post,$,getJSON：更加灵活，除去使用load方法的情况，大部分使用这3个方法；

url：Ajax请求的目标URL

args：传递的参数：JSON类型

data：Ajax响应成功后的数据，可能是XML，HTML，JSON

$.get(url,args,function(data){

})

请求JSON数据

$.get(url,args,function(data){

},"JSON");

$.post(url,args,function(data){

},"JSON")

$.getJSON(url,args,function(data){

},"JSON")

4、eval  可以把一个字符串转为本地的JS代码来执行

var str="alert('hello eval')";

alert(str);

eval(str);

5、例子

jsp代码：

<pre name="code" class="html"><form action="" method="post">
	userName:<input type="text" name="username" >
	<br>
	<div id="message"></div>
	<br>
</form>

js代码：

$(function(){
	$(#edit_bdip"#edit_bdip).change(function(){
		var val=$.trim($("#edit_bdip").val());
		if(val!=""){
			var url="${pageContext.request.contextPath}/valiateUserName";
			var args={"userName":val,"time":new date()};
			$.post(url,args,function(data){
				$("#message").html(data);
			})
		}
	})
});