jQuery AJAX应用实例总结

2023-07-24 13:28:04 77

本文实例总结了jQueryAJAX应用。分享给大家供大家参考，具体如下：

AJAX

是指一种创建交互式网页应用的网页开发技术。

AJAX=异步JavaScript和XML（标准通用标记语言的子集）。

AJAX是一种用于创建快速动态网页的技术。

AJAX是一种在无需重新加载整个网页的情况下，能够更新部份网页的技术。

通过在后台与服务器进行少量数据交换，AJAX可以使用网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新，也就是：按需更新。

AJAX解析纯文本数据

AJAX访问html文件

AJAX访问XML格式数据




	
	AJAX---xml
	
	
$(document).ready(function(){
//获取页面中所有a元素中的第一个，并添加点击事件
document.getElementsByTagName('a')[0].οnclick=function(){
//1、获取XHR对象
varrequest=newXMLHttpRequest();
//2、配置AJAX请求参数：请求类型，请求的URL资源，请求方式，默认为true，即异步
//request.open('GET','URL',true);
request.open('GET',this.href+'?='+(newDate()),true);//每次请求都是最新数据
//3、将AJAX请求发送到服务器，GET请求不需要参数，可以传空或null
request.send();
//4、AJAX对象的事件属性onreadystatechange，不断监听服务器端的响应
request.onreadystatechange=function(){
//当请求状态为4，且响应码为200时，表示服务器响应成功，并返回了用户数据
if(request.readyState==4&&request.status==200){
	varresult=request.responseXML;
//解析当前XML文件中的每个节点数据，保存到对应变量中，XML支持所有DOM操作
	varname=result.getElementsByTagName('name')[0].childNodes[0].nodeValue;
	varage=result.getElementsByTagName('age')[0].childNodes[0].nodeValue;
	varjob=result.getElementsByTagName('job')[0].childNodes[0].nodeValue;
//根据数据类型，更新当前页面中的DOM节点信息
document.getElementById('name').innerHTML=name;
document.getElementById('age').innerHTML=age;
document.getElementById('job').innerHTML=job;
}
};
returnfalse;//取消a元素的默认点击行为
};
});
	


	我的信息

xml文件：



	Zhang
	28
	php

AJAX访问JSON格式数据




	
	JSON
	
	
		$(document).ready(function(){
			document.getElementById('btn').onclick=function(event){
				//第一种
				vardata={
					'name':'zhang',
					'age':'28',
					'hobby':['跑步','睡觉'],
					'job':{
						'php':'Mysql',
						'html':'jQuery'
					}
				};
				//第二种
				varjson='{\
					"name":"zhang",\
					"age":"28",\
					"hobby":["跑步","睡觉"],\
					"job":{\
						"php":"Mysql",\
						"html":"jQuery",\
					}\
				}';
				vardata=eval('('+json+')');
				document.getElementById('name').innerHTML=data.name;
				document.getElementById('age').innerHTML=data.age;
				document.getElementById('hobby').innerHTML=data.hobby[1];
				document.getElementById('job').innerHTML=data.job.php;
				//第三种
				varrequest=newXMLHttpRequest;
				request.open('GET','demo.json',true);
				request.send(null);
				request.onreadystatechange=function(){
					if(request.readyState==4&&request.status==200){
						vardata=JSON.parse(request.responseText);
						document.getElementById('name').innerHTML=data.name;
						document.getElementById('age').innerHTML=data.age;
						document.getElementById('hobby').innerHTML=data.hobby[1];
						document.getElementById('job').innerHTML=data.job.php;
					}
				}
			}
		});
	


	我的信息

AJAX访问中的$.ajax()函数




	
	$.ajax()
	
	
		$(function(){
			$('#btn').click(function(){
				$.ajax({
					type:'GET',//http的请求方法
					url:'demo.json',//要获取数据的URL
					data:null,//不给URL添加任何数据
					dataType:'json',//将获取到的数据当作JSON类型处理
					success:function(data){//完成时调用
						$('#name').text(data.name);
						$('#age').text(data.age);
						$('#hobby').text(data.hobby[1]);
						$('#job').text(data.job.php);
					},
					error:function(data){//失败时调用
						alert('获取失败！');
					}
				});
			});
		});
	


	我的信息

AJAX访问中的load()方法




	
	get
	

$(function(){
$('button').click(function(){
//1、获取纯文本文件的内容
$('div').load('hello.txt');

//2、获取html文件的内容，可以使用jquery选择器，按需获取
$('div').load('hello.html');//获取html文件全部内容
$('div').load('hello.htmlli:first','?'+(newDate()));//获取第一个li的内容
$('div').load('hello.htmlli:eq(2)');/获取索引为2的li内容
$('div').load('hello.htmlli:odd','?'+(newDate()));//获取全部li中索引为奇数的内容
//3、获取XML中的数据，与访问HTML一样，也可以使用选择器
$('div').load('1.xml');//返回xml,全部同行显示
$('div').load('1.xmlwork');//显示指定标签名的数据
$('div').load('1.xmlwork',function(){
$(this).css('color','red');
});//可以使用回调函数

//4、获取JSON数据，json不能直接使用，必须通过回调函数来进行解析后再使用
$('div').load('demo.json',function(data){
//将获取到的json字符串解析为js对象
varjsonObj=JSON.parse(data);
$(this).empty()
$(this).append('姓名：'+jsonObj.name"'')
});
});
});
	


	测试

AJAX访问中的$.get()方法




	
	get
	
	
		$(function(){
			$('button').click(function(event){
				//1、从服务器中返回纯文本或html
				$.get('1.php',function(data){
					$('#con').html(data);
				});
				//2、服务器返回XML格式数据
				$.get('1.php',function(data){
					//将XML数据转为jQuery对象，并获取内部的数据
					varname=$(data).children('name').text();
					//将解析出的数据拼接成需要显示的html代码
					varhtml=''+name+'';
					//将html代码插入到指定节点
					$('#con').html(html);
				});
				//3、服务器返回JSON格式数据
				$.get('1.php',function(data){
					varjsonObj=JSON.parse(data);//返回一个JSON格式字符串，需要先解析成JS对象
					$('#con').empty().append('姓名:'+jsonObj.name+'');
				});
			});
		});
	


	测试

AJAX中的$.getJSON()函数

AJAX中的$.post()方法

更多关于jQuery相关内容可查看本站专题：《jquery中Ajax用法总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。