使用jquery来完成AJAX操作
jQuery对Ajax操作进行了封装，在jQuery中最底层的方法是$.ajax()，第二个是load()，$.get()和$.post()，第三层是$.getscript()和$.getJSON()。
load()方法
-load()方法是jquery中最为简单和常用的ajax方法，能载入远程的HTML并插入到DOM中，它的结构是：load(url [，data][，callback])；
url string 请求HTML页面的URL地址
data可选 object 发送到服务器的key/value数据
callback function 请求完成时的回调函数，无论请求成功或失败
-程序员只需要使用jquery选择器为HTML片段指定目标位置，然后将要加载的文件的URL作为参数传递更给load()方法即可
细节
-如果需要加载目标HTML页面内的某些元素，则可以通过load()方法的url参数来达到目的，通过url参数指定选择符，就可以方便的从加载过来的HTML文档中选出所需要的内容，load()方法的url参数的语法结构为“url selector”(注意：url和选择器之间有一个空格)
-传递方式：load()方法的传递参数根据data来自动自定，如果没有参数，采用GET方式传递，否则采用POST方式
-对于必须在加载完才能继续的操作，load()方法提供了回调函数，该函数由三个参数：代表请求返回内容的data；代表请求状态的textStatus对象和XMLHttpRequest对象
-laod()方法 只能用于 txt和html 数据传输
<body>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(function(){
//使用jquery来操作Ajax
$("a:first").on("click",function(){
var url=this.href; //直接填写url就行 默认方式是get
$("#show").load(url);
return false;
});
});
</script>
<ul>
<li><a href="content1.txt">content</a></li>
<li><a href=""></a>container</li>
<li><a href=""></a>conmand</li>
</ul>
<div id="show"></div>
</body>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(function(){
//使用jquery来操作Ajax
$("a:first").on("click",function(){
//<h2><a href="">www.zhongguo.com</a></h2>
//如果只想要a标签 可以这么写
var url=this.href+" a";
$("#show").load(url);
return false;
});
});
</script>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(function(){
//使用jquery来操作Ajax
$("a:first").on("click",function(){
var data={"time":new Date()}; //post请求JSON格式，清理缓存
//<h2><a href="">www.zhongguo.com</a></h2>
//如果只想要a标签 可以这么写
var url=this.href+" a";
$("#show").load(url,data);
return false;
});
});
</script>
$.get() $.post方法
$.get()方法使用GET方式来进行异步请求，它的结构是：$.get(url,[,data][,callback][,type]);
参数名称 类型 说明
url string 请求HTML页面的url地址
data(可选) object 发送到服务器的key/value数据作为QueryString
附加到请求url中
callback(可选) function 载入成功时，回调函数（只有当response返回
状态时，success才调用该方法）
type （可选） string 服务器返回内容的格式，包括 xml、html json
script text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(function(){
$("a:first").on("click",function(){
var url=this.href;
//解析xml数据格式使用$.get()，其中返回的对象在回调函数function中 a
$.get(url,function(a){
//获取a子元素from的文本
var name=$(a).find("from").text();
//添加到DIV中
$("#show").append(name);
});
return false;
});
});
</script>
<ul>
<li><a href="content3.xml">content</a></li>
<li><a href=""></a>container</li>
<li><a href=""></a>conmand</li>
</ul>
<div id="show"></div>
</body>
</html>
$.post()方法和$.get()方式参数都是一样的 只是请求不一样 一个是GET 一个是POST
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(function(){
$("a:first").on("click",function(){
var url=this.href;
//解析xml数据格式使用$.get()，其中返回的对象在回调函数function中 a
$.post(url,function(a){
//获取a子元素from的文本
var name=$(a).find("from").text();
//先清空div中的元素 之后在添加元素，防止多次点击的时候重复添加
$("#show").empty().append(name);
});
return false;
});
});
</script>
<ul>
<li><a href="content3.xml">content</a></li>
<li><a href=""></a>container</li>
<li><a href=""></a>conmand</li>
</ul>
<div id="show"></div>
</body>
</html>
$.getJSON()方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(function(){
$("a:first").on("click",function(){
var url=this.href;
$.getJSON(url,function(a){
//getJSON 返回的是json格式的数据，原生的js，不需要解析，而且也不需要返回jquery对象
//返回的xml对象，jquery要是想使用，必须转换jquery对象
//获取a子元素from的文本
var name=a.email;
//先清空div中的元素 之后在添加元素，防止多次点击的时候重复添加
$("#show").empty().append(name);
});
return false;
});
});
</script>
<ul>
<li><a href="content.js">content</a></li>
<li><a href=""></a>container</li>
<li><a href=""></a>conmand</li>
</ul>
<div id="show"></div>
</body>
</html>
浙公网安备 33010602011771号