Ajax

使用 jQuery 实现 Ajax.

load()

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
	$(function() {
		$("a").click(function() {
			//使用load方法处理Ajax
			var url=this.url;
			var args={"time":new Date()};
            //任何一个html 节点都可以使用load方法来加载Ajax，结果将直接插入到html 节点中
			$("#content").load(url,args);
			
			return false;
		});
	});
</script>
</head>
<body>
	<a href="helloAjax.txt">HelloAjax</a>
	<div id="content"></div>
</body>
</html>

$.get() (或$ .get()(或.post())方法

测试把xml中的index.html中的js代码用jQuery表示效果不变

<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title>Perple at Clearleft</title>
<script type="text/javascript" src="../scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
	$(function() {
		$("a").click(function() {
			var url=this.href;
			var args={"time":new Date()};
			//$.post(url,args,function(data){  这就改为post格式
			//url:
			//args: JSON格式
			//function:回调函数 放响应结束时，回调函数被触发，响应结果在data中
			$.get(url,args,function(data){
				var name=$(data).find("name").text();
				var email=$(data).find("email").text();
				var website=$(data).find("website").text();
				$("#details").empty()
					.append("<h2><a href='mailto:"+email+"'>"+name+"</a></h2>")
					.append("<a href='" + website + "'>" + website + "</a>");	
			});
			return false;
		});
	});
</script>
</head>
<body>
	<h1>People</h1>
	<ul>
		<li><a href="files/andy.xml">Andy</a></li>
		<li><a href="files/richard.xml">Richard</a></li>
		<li><a href="files/jeremy.xml">Jeremy</a></li>
	</ul>
	<div id="details"></div>
</body>
</html>

测试把json中的index.html中的js代码用jQuery表示效果不变

<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
	$(function() {
		$("a").click(function() {
			var url=this.href;
			var args={"time":new Date()};
			//url:
			//args: JSON格式
			//function:回调函数 放响应结束时，回调函数被触发，响应结果在data中
			$.getJSON(url,args,function(data){
				var name=data.person.name;
				var email=data.person.email;
				var website=data.person.website;
				$("#details").empty()
					.append("<h2><a href='mailto:"+email+"'>"+name+"</a></h2>")
					.append("<a href='" + website + "'>" + website + "</a>");	
			});
			return false;
		});
	});
</script>
</head>
<body>
	<h1>People</h1>
	<ul>
		<li><a href="files/andy.js">Andy</a></li>
		<li><a href="files/richard.js">Richard</a></li>
		<li><a href="files/jeremy.js">Jeremy</a></li>
	</ul>
	<div id="details"></div>
</body>
</html>

总结
- 1.什么是Ajax? 不用刷新页面，但可以和服务器进行通信的方式
  使用ajax的主要方式是XMLHttpRequest对象
- 2.使用XMLHttpRequest对象实现Ajax[了解]
- 3.Ajax传输数据的3种方式：
  - ①：XML: 笨重，解析困难，但XML是通用的数据交换格式
  - ②HTML : 不需要解析可以直接放到文档种。若仅更新一部分区域，但传输的数据不是很方便，且HTML代码需要拼装完成
  - ③JSON: 小巧，有面向对象的特征，且有很多第三方的jar包可以把Java对象或集合转为JSON字符串
- 4.使用jQuery完成Ajax操作
  - ①load方法 :可以用于HTML文档的元素节点，把结果直接加为对应节点的子元素。通常而言，load方法加载后的数据是一个HTML片段
    
    var $obj=..
    var url=...
    var args={key:value,...};
    $obj.load(url,args);
  - ② $.get,$ .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){

});
```

Ajax-使用 jQuery 实现 Ajax

Ajax

使用 jQuery 实现 Ajax.

相关推荐