Ajax学习笔记-JQuery中的Ajax

JQuery对Ajax操作进行了封装，在JQuery的最底层的方法是$.ajax(),第二层是load() $.get() $.post(),第三层是$.getScript()和$.getJSON().

<!DOCTYPEhtml>
<html>
<head>
<Metacharset="UTF-8">
<title>Inserttitlehere</title>
<scripttype="text/javascript"src="../js/jquery-1.11.1.min.js"></script>
<scripttype="text/javascript">
$(function(){
	$("a").click(function(){
		varurl=this.href;
		varargs={"time":newDate()};
		$("#content").load(url,args);
		returnfalse;
	});
});
</script>
</head>
<body>
<ahref="helloAjax.txt">hello</a>
<divid="content"></div>
</body>
</html>

load()方法是JQuery中最为简单和常用的Ajax方法，能载入远程的HTML代码并插入到DOM中。它的结构是 load（url[,data][,callback]）

url （String）请求HTML页面的URL地址

data（可选）(Object)发送到服务器的key/value数据

callback（可选） (Function)请求完成时的回调函数，无论请求成功或失败

可以使用url selector

<!DOCTYPEhtml>
<html>
<head>
<Metacharset="UTF-8">
<title>Inserttitlehere</title>
<scripttype="text/javascript"src="../js/jquery-1.11.1.min.js"></script>
<scripttype="text/javascript">
$(function(){
	$("a").click(function(){
		//varurl=this.href;//默认全选择
		//varurl=this.href+"h2";//选择h2部分
		varurl=this.href+"h2a";//选择h2中的a部分
		varargs={"time":newDate()};
		$("#details").load(url,args);
		returnfalse;
	});
})
</script>
</head>
<body>
	<ul>
		<li><ahref="a.html">百度</a></li>
	</ul>
	<divid="details"></div>
</body>
</html>

a.html

<ahref="http://www.baidu.com">http://www.baidu.com</a>
<h2>
H2Test
<ahref="http://www..com">QQ</a>
</h2>

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

$.get()方法使用GET方式来进行异步请求，结构是$.get(url[,callback][,type])

url （String）请求HTML页面的URL地址

data（可选）(Object)发送到服务器的key/value数据,数据位作为QueryString附加到请求的url中

callback（可选） (Function)载入成功时的回调函数（只有当reponse的返回状态是success时才调用该方法）自动将请求结果和状态传递给该方法

type(可选)(String)服务器返回内容的格式，包括xml、html、script、json、text、default

textstatus代表请求状态，包括success error notmodify timeout

$.get() $.post() 是JQuery中的全局函数

find() 等方法都是对JQuery对象进行操作的方法

<!DOCTYPEhtml>
<html>
<head>
<Metacharset="UTF-8">
<title>Inserttitlehere</title>
<scripttype="text/javascript"src="../js/jquery-1.11.1.min.js"></script>
<scripttype="text/javascript">
	$(function(){
		$("a").click(function(){
			varurl=this.href;
			varargs={"time":newDate()};
			//args:JSON格式
			//function回调函数，当相应结束时被触发。响应结果在data中
			$.post(url,args,function(data){
			//$.get(url,function(data){//这里使用post和get无区别
				varname=$(data).find("name").text();
				varwebsite=$(data).find("website").text();
				varemail=$(data).find("email").text();
				
				$("#details").empty().append("<h2><ahref='mailto:"+email+"'>"+name+"</a></h2>")
				.append("<ahref='"+website+"'>"+website+"</a>");
			});
			returnfalse;
		});
	})
</script>
</head>
<body>
	<ul>
		<li><ahref="andy.xml">andy</a></li>
	</ul>
	<divid="details"></div>
</body>
</html>

andy.xml

<?xmlversion="1.0"encoding="UTF-8"?>
<details>
	<name>AndyBudd</name>
	<website>http://www.baidu.com</website>
	<email>umgsai@126.com</email>
</details>

下面使用json格式数据来实现上面的功能

<!DOCTYPEhtml>
<html>
<head>
<Metacharset="UTF-8">
<title>Inserttitlehere</title>
<scripttype="text/javascript"src="../js/jquery-1.11.1.min.js"></script>
<scripttype="text/javascript">
	$(function(){
		$("a").click(function(){
			varurl=this.href;
			varargs={"time":newDate()};
			//args:JSON格式
			//function回调函数，当相应结束时被触发。响应结果在data中
			$.getJSON(url,function(data){
				varname=$(data).person.name;
				varwebsite=$(data).person.website;
				varemail=$(data).person.email
				
				$("#details").empty().append("<h2><ahref='mailto:"+email+"'>"+name+"</a></h2>")
				.append("<ahref='"+website+"'>"+website+"</a>");
			});
			returnfalse;
		});
	})
</script>
</head>
<body>
	<ul>
		<li><ahref="andy.json">andy</a></li>
	</ul>
	<divid="details"></div>
</body>
</html>

andy.json

{"person":{
"name":"umgsai","website":"http://www.baidu.com","email":"umgsai@126.com"
}
}

小结：

什么是Ajax？不用刷新页面，但可以和服务器端进行通信的方式。使用Ajax的主要方式是XMLHttpRequest对象
使用XMLHttpRequest对象实现Ajax（了解）。现在一般使用JQuery或者其他的JS框架来获取。
Ajax传输数据的三种方式
①XML：笨重，解析困难。但XML是通用的数据交换格式
②HTML：不需要解析可以直接放到文档中，若仅更新一部分区域，但传输的数据不是很方便，切HTML代码需要拼装完成。
③JSON：小巧，有面向对象的特征，并且提供很多第三方的Jar包把Java对象或集合转成Json字符串。是目前使用最多的方式。
使用JQuery完成Ajax操作
①load方法：可以用于HTML文档的元素结点，把结果直接加为对应结点的子元素。通常load方法加载的数据是HTML片段。
var $obj = ...
var url = ...
var agrs = {key:value,...};
$obj.load(url,args);
② $.get $.post $.getJSON 更加灵活。除去使用load方法的情况，大部分使用这三个方法。

//url:Ajax请求的目标URL
//args：传递的参数 JSON类型
//data: Ajax响应成功后的数据，可能是XML HTML JSON
$.get(url,function(data){

});
请求JSON数据
$.get(url,function(data){

},"JSON");

$.post(url,"JSON")

$.getJSON(url,function(data){

})

本文出自 “优赛工作室” 博客，请务必保留此出处http://www.jb51.cc/article/p-nfhqbmtf-qg.html

原文链接：https://www.f2er.com/ajax/162444.html

Ajax学习笔记-JQuery中的Ajax

猜你在找的Ajax相关文章