jQuery AJAX应用实例总结
程序员文章站
2022-03-20 17:58:07
本文实例总结了jquery ajax应用。分享给大家供大家参考，具体如下：ajax是指一种创建交互式网页应用的网页开发技术。ajax=异步javascript和xml（标准通用标记语言的子集）。aja...
本文实例总结了jquery ajax应用。分享给大家供大家参考，具体如下：
ajax
是指一种创建交互式网页应用的网页开发技术。
ajax=异步javascript和xml（标准通用标记语言的子集）。
ajax是一种用于创建快速动态网页的技术。
ajax是一种在无需重新加载整个网页的情况下，能够更新部份网页的技术。
通过在后台与服务器进行少量数据交换，ajax可以使用网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新，也就是：按需更新。
ajax解析纯文本数据
<script>
$(document).ready(function() {
//获取页面中所有a元素中的第一个，并添加点击事件
document.getelementbytagname('a')[0].οnclick=function() {
//1、获取xhr对象
var request = new xmlhttprequest();
//2、配置ajax请求参数：请求类型，请求的url资源，请求方式，默认为true，即异步
request.open('get','url',true);
request.open('get',this.href+'?'+(new date()),true);//每次请求都是最新数据
//3、将ajax请求发送到服务器，get请求不需要参数，可以传空或null
request.send();
//4、ajax对象的事件属性onreadystatechange，不断监听服务器端的响应
request.onreadystatechange = function() {
//当请求状态为4，且响应码为200时，表示服务器响应成功，并返回了用户数据
if (request.readystate == 4 && request.status == 200) {
//根据数据类型，更新当前页面中的dom节点信息
document.getelementbytagname('h3')[0].innerhtml=request.responsetext;
}
};
return false;//取消a元素的默认点击行为
};
});
</script>
<body>
<a href=''></a>
<h3></h3>
</body>
ajax访问html文件
<script>
$(document).ready(function() {
//获取页面中所有a元素，并添加点击事件
var anodes = getelementbytagname('a');
//获取当前页面需要更新的dom节点
var content = getelementbyid('content');
//给所有a元素添加点击事件，每个链接都会访问到一个不同的html文件
for (var i=0;i<anodes.length;i++) {
anodes[i].onclick = function {
//1、获取xhr对象
var request = new xmlhttprequest();
//2、配置ajax请求参数：请求类型，请求的url资源，请求方式，默认为true，即异步
//request.open('get','url',true);
request.open('get',this.href+'?'+(new date()),true);//每次请求都是最新数据
//3、将ajax请求发送到服务器，get请求不需要参数，可以传空或null
request.send();
//4、ajax对象的事件属性onreadystatechange，不断监听服务器端的响应
request.onreadystatechange = function() {
//当请求状态为4，且响应码为200时，表示服务器响应成功，并返回了用户数据
if (request.readystate == 4 && request.status == 200) {
//根据数据类型，更新当前页面中的dom节点信息
document.getelementbytagname('h3')[0].innerhtml=request.responsetext;
}
return false;//取消a元素的默认点击行为
}
};
});
</script>
<body>
<a href='1.html'></a>
<a href='2.html'></a>
<a href='3.html'></a>
<div id='content'></div>
</body>
ajax访问xml格式数据
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ajax---xml</title>
<script src="jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//获取页面中所有a元素中的第一个，并添加点击事件
document.getelementsbytagname('a')[0].οnclick=function() {
//1、获取xhr对象
var request = new xmlhttprequest();
//2、配置ajax请求参数：请求类型，请求的url资源，请求方式，默认为true，即异步
// request.open('get','url',true);
request.open('get',this.href+'?='+(new date()),true);//每次请求都是最新数据
//3、将ajax请求发送到服务器，get请求不需要参数，可以传空或null
request.send();
//4、ajax对象的事件属性onreadystatechange，不断监听服务器端的响应
request.onreadystatechange = function() {
//当请求状态为4，且响应码为200时，表示服务器响应成功，并返回了用户数据
if (request.readystate == 4 && request.status == 200) {
var result = request.responsexml;
//解析当前xml文件中的每个节点数据，保存到对应变量中，xml支持所有dom操作
var name = result.getelementsbytagname('name')[0].childnodes[0].nodevalue;
var age = result.getelementsbytagname('age')[0].childnodes[0].nodevalue;
var job = result.getelementsbytagname('job')[0].childnodes[0].nodevalue;
//根据数据类型，更新当前页面中的dom节点信息
document.getelementbyid('name').innerhtml=name;
document.getelementbyid('age').innerhtml=age;
document.getelementbyid('job').innerhtml=job;
}
};
return false;//取消a元素的默认点击行为
};
});
</script>
</head>
<body>
<a href="1.xml" rel="external nofollow" >我的信息</a>
<div>
<p id='name'></p>
<p id='age'></p>
<p id='job'></p>
</div>
</body>
</html>
xml文件：
<?xml version="1.0" encoding="utf-8" ?> <info> <name>zhang</name> <age>28</age> <job>php</job> </info>
ajax访问json格式数据
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>json</title>
<script src="jquery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
document.getelementbyid('btn').onclick = function(event) {
//第一种
var data = {
'name':'zhang',
'age':'28',
'hobby':['跑步','睡觉'],
'job':{
'php':'mysql',
'html':'jquery'
}
};
//第二种
var json = '{\
"name":"zhang",\
"age":"28",\
"hobby":["跑步","睡觉"],\
"job":{\
"php":"mysql",\
"html":"jquery",\
}\
}';
var data = 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;
//第三种
var request = new xmlhttprequest;
request.open('get','demo.json',true);
request.send(null);
request.onreadystatechange = function() {
if (request.readystate==4 && request.status==200) {
var data = 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;
}
}
}
});
</script>
</head>
<body>
<button type="button" name="button" id="btn">我的信息</button>
<p id="name"></p>
<p id="age"></p>
<p id="hobby"></p>
<p id="job"></p>
</body>
</html>
ajax访问中的$.ajax()函数
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>$.ajax()</title>
<script src="jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(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('获取失败！');
}
});
});
});
</script>
</head>
<body>
<button type="button" name="button" id="btn">我的信息</button>
<p id="name"></p>
<p id="age"></p>
<p id="hobby"></p>
<p id="job"></p>
</body>
</html>
ajax访问中的load()方法
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>get</title>
<script src="jquery/jquery-1.8.3.min.js"></script>
<script type='text/javascript'>
$(function() {
$('button').click(function() {
//1、获取纯文本文件的内容
$('div').load('hello.txt');
//2、获取html文件的内容，可以使用jquery选择器，按需获取
$('div').load('hello.html');//获取html文件全部内容
$('div').load('hello.html li:first','?'+(new date()));//获取第一个li的内容
$('div').load('hello.html li:eq(2)');/获取索引为2的li内容
$('div').load('hello.html li:odd','?'+(new date()));//获取全部li中索引为奇数的内容
//3、获取xml中的数据，与访问html一样，也可以使用选择器
$('div').load('1.xml');//返回xml,全部同行显示
$('div').load('1.xml work');//显示指定标签名的数据
$('div').load('1.xml work',function() {
$(this).css('color','red');
});//可以使用回调函数
//4、获取json数据，json不能直接使用，必须通过回调函数来进行解析后再使用
$('div').load('demo.json',function(data) {
//将获取到的json字符串解析为js对象
var jsonobj = json.parse(data);
$(this).empty()
$(this).append('<p>姓名：<span>'+jsonobj.name"'</span></p>')
});
});
});
</script>
</head>
<body>
<button type="button" name="button">测试</button>
<div id="con"></div>
</body>
</html>
ajax访问中的$.get()方法
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>get</title>
<script src="jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function() {
$('button').click(function(event) {
//1、从服务器中返回纯文本或html
$.get('1.php',function(data) {
$('#con').html(data);
});
//2、服务器返回xml格式数据
$.get('1.php',function(data) {
//将xml数据转为jquery对象，并获取内部的数据
var name = $(data).children('name').text();
//将解析出的数据拼接成需要显示的html代码
var html = '<p>'+name+'</p>';
//将html代码插入到指定节点
$('#con').html(html);
});
//3、服务器返回json格式数据
$.get('1.php',function(data) {
var jsonobj = json.parse(data);//返回一个json格式字符串，需要先解析成js对象
$('#con').empty().append('<p>姓名:'+jsonobj.name+'</p>');
});
});
});
</script>
</head>
<body>
<button type="button" name="button">测试</button>
<div id="con"></div>
</body>
</html>
1.php:
<?php
echo 'hello world!';//纯文本
//xml格式数据
echo <<<'xml'
<?xml version="1.0" encoding="utf-8" ?>
<info>
<name>zhang</name>
<age>28</age>
<job>php</job>
</info>
xml;
//json格式数据
echo '{"name":"zhang","age":"28","hobby":["跑步","睡觉"],"job":{"php":"mysql","html":"jquery"}}';
?>
ajax中的$.getjson()函数
<script>
$.getjson('1.php',function(data) {
$('#con').empty().append('<p>姓名:'+data.name+'</p>');
});
</script>
ajax中的$.post()方法
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>post</title>
<script src="jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function() {
$('#name').change(function(event) {
$.post(
'check.php',
{
'name':$(this).val()
},
function(data) {
console.log(data);
$('#name').next().empty();
$('#name').after(data);
}
);
});
$('#sub').click(function(event) {
var name = $('#name').val();
if ('' == name && null == name) {
$('#name').after('<span>用户名不能为空</span>');
return false;
}
});
});
</script>
</head>
<body>
<form action="" method="post">
姓名：<input type="text" name="name" value='' id='name'><br/>
密码：<input type="password" name="password" value="" id='ps'><br>
<input type="submit" name="" value='提交' id='sub'>
<input type="reset" name="">
</form>
</body>
</html>
check.php
<?php
$info = $_post;
$name = isset($info['name']) ? $info['name'] : '';
$arr_name = ['zhang','li'];
if (!empty($name) && in_array($name, $arr_name)) {
echo '<script>alert("名称已存在");window.history.back(-1);</script>';
} elseif (empty($name)) {
echo '<script>alert("不可为空");window.history.back(-1);</script>';
} else {
echo '<span style="color:blue">名称可用</span>';
}
?>
上一篇： DFS（四）：剪枝策略
下一篇： SpringMVC的自动配置解析