日期: 2020-06-22 17:51:02
本文实例总结了jQuery AJAX应用。分享给大家供大家参考,具体如下:
是指一种创建交互式网页应用的网页开发技术。
AJAX=异步JavaScript和XML(标准通用标记语言的子集)。
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>
<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>
<!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>
<!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>
<!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>
<!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>
<!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"}}'; ?>
<script> $.getJson('1.php',function(data) { $('#con').empty().append('<p>姓名:'+data.name+'</p>'); }); </script>
<!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>'; } ?>
更多关于jQuery相关内容可查看本站专题:《jquery中Ajax用法总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。