jQuery AJAX應用實例總結(jié)
更新時間：2020年05月19日 10:16:40 作者：人生如初見_張默
這篇文章主要介紹了jQuery AJAX應用,結(jié)合實例形式總結(jié)分析了jQuery 使用AJAX訪問各種格式數(shù)據(jù)相關(guān)應用操作實現(xiàn)技巧,需要的朋友可以參考下
本文實例總結(jié)了jQuery AJAX應用。分享給大家供大家參考，具體如下：
AJAX
是指一種創(chuàng)建交互式網(wǎng)頁應用的網(wǎng)頁開發(fā)技術(shù)。
AJAX=異步JavaScript和XML（標準通用標記語言的子集）。
AJAX是一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術(shù)。
AJAX是一種在無需重新加載整個網(wǎng)頁的情況下，能夠更新部份網(wǎng)頁的技術(shù)。
通過在后臺與服務器進行少量數(shù)據(jù)交換，AJAX可以使用網(wǎng)頁實現(xiàn)異步更新。這意味著可以在不重新加載整個網(wǎng)頁的情況下，對網(wǎng)頁的某部分進行更新，也就是：按需更新。
AJAX解析純文本數(shù)據(jù)
<script>
$(document).ready(function() {
//獲取頁面中所有a元素中的第一個，并添加點擊事件
document.getElementByTagName('a')[0].οnclick=function() {
//1、獲取XHR對象
var request = new XMLHttpRequest();
//2、配置AJAX請求參數(shù)：請求類型，請求的URL資源，請求方式，默認為true，即異步
request.open('GET','URL',true);
request.open('GET',this.href+'?'+(new Date()),true);//每次請求都是最新數(shù)據(jù)
//3、將AJAX請求發(fā)送到服務器，GET請求不需要參數(shù)，可以傳空或null
request.send();
//4、AJAX對象的事件屬性onreadystatechange，不斷監(jiān)聽服務器端的響應
request.onreadystatechange = function() {
//當請求狀態(tài)為4，且響應碼為200時，表示服務器響應成功，并返回了用戶數(shù)據(jù)
if (request.readyState == 4 && request.status == 200) {
//根據(jù)數(shù)據(jù)類型，更新當前頁面中的DOM節(jié)點信息
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節(jié)點
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請求參數(shù)：請求類型，請求的URL資源，請求方式，默認為true，即異步
//request.open('GET','URL',true);
request.open('GET',this.href+'?'+(new Date()),true);//每次請求都是最新數(shù)據(jù)
//3、將AJAX請求發(fā)送到服務器，GET請求不需要參數(shù)，可以傳空或null
request.send();
//4、AJAX對象的事件屬性onreadystatechange，不斷監(jiān)聽服務器端的響應
request.onreadystatechange = function() {
//當請求狀態(tài)為4，且響應碼為200時，表示服務器響應成功，并返回了用戶數(shù)據(jù)
if (request.readyState == 4 && request.status == 200) {
//根據(jù)數(shù)據(jù)類型，更新當前頁面中的DOM節(jié)點信息
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格式數(shù)據(jù)
<!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請求參數(shù)：請求類型，請求的URL資源，請求方式，默認為true，即異步
// request.open('GET','URL',true);
request.open('GET',this.href+'?='+(new Date()),true);//每次請求都是最新數(shù)據(jù)
//3、將AJAX請求發(fā)送到服務器，GET請求不需要參數(shù)，可以傳空或null
request.send();
//4、AJAX對象的事件屬性onreadystatechange，不斷監(jiān)聽服務器端的響應
request.onreadystatechange = function() {
//當請求狀態(tài)為4，且響應碼為200時，表示服務器響應成功，并返回了用戶數(shù)據(jù)
if (request.readyState == 4 && request.status == 200) {
var result = request.responseXML;
//解析當前XML文件中的每個節(jié)點數(shù)據(jù)，保存到對應變量中，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;
//根據(jù)數(shù)據(jù)類型，更新當前頁面中的DOM節(jié)點信息
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格式數(shù)據(jù)
<!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()函數(shù)
<!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',//要獲取數(shù)據(jù)的URL
data:null,//不給URL添加任何數(shù)據(jù)
dataType:'json',//將獲取到的數(shù)據(jù)當作JSON類型處理
success:function(data) {//完成時調(diào)用
$('#name').text(data.name);
$('#age').text(data.age);
$('#hobby').text(data.hobby[1]);
$('#job').text(data.job.php);
},
error:function(data) {//失敗時調(diào)用
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、獲取純文本文件的內(nèi)容
$('div').load('hello.txt');
//2、獲取html文件的內(nèi)容，可以使用jquery選擇器，按需獲取
$('div').load('hello.html');//獲取html文件全部內(nèi)容
$('div').load('hello.html li:first','?'+(new Date()));//獲取第一個li的內(nèi)容
$('div').load('hello.html li:eq(2)');/獲取索引為2的li內(nèi)容
$('div').load('hello.html li:odd','?'+(new Date()));//獲取全部li中索引為奇數(shù)的內(nèi)容
//3、獲取XML中的數(shù)據(jù)，與訪問HTML一樣，也可以使用選擇器
$('div').load('1.xml');//返回xml,全部同行顯示
$('div').load('1.xml work');//顯示指定標簽名的數(shù)據(jù)
$('div').load('1.xml work',function() {
$(this).css('color','red');
});//可以使用回調(diào)函數(shù)
//4、獲取JSON數(shù)據(jù)，json不能直接使用，必須通過回調(diào)函數(shù)來進行解析后再使用
$('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格式數(shù)據(jù)
$.get('1.php',function(data) {
//將XML數(shù)據(jù)轉(zhuǎn)為jQuery對象，并獲取內(nèi)部的數(shù)據(jù)
var name = $(data).children('name').text();
//將解析出的數(shù)據(jù)拼接成需要顯示的html代碼
var html = '<p>'+name+'</p>';
//將html代碼插入到指定節(jié)點
$('#con').html(html);
});
//3、服務器返回JSON格式數(shù)據(jù)
$.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格式數(shù)據(jù)
echo <<<'XML'
<?xml version="1.0" encoding="UTF-8" ?>
<info>
<name>Zhang</name>
<age>28</age>
<job>php</job>
</info>
XML;
//JSON格式數(shù)據(jù)
echo '{"name":"zhang","age":"28","hobby":["跑步","睡覺"],"job":{"php":"Mysql","html":"jQuery"}}';
?>
AJAX中的$.getJSON()函數(shù)
<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>';
}
?>
更多關(guān)于jQuery相關(guān)內(nèi)容可查看本站專題：《jquery中Ajax用法總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
相關(guān)文章
Raphael一個用于在網(wǎng)頁中繪制矢量圖形的Javascript庫
Raphael是一個用于在網(wǎng)頁中繪制矢量圖形的Javascript庫,它使用 SVG W3C 推薦標準和 VML 作為創(chuàng)建圖形的基礎(chǔ)，你可以通過 JavaScript 操作 DOM 來輕松創(chuàng)建出各種復雜的柱狀圖、餅圖、曲線圖等各種圖表,接下來詳細介紹，感興趣的朋友可以了解下哦2013-01-01
JQuery為textarea添加maxlength屬性并且兼容IE
textarea默認不支持maxlength屬性，JQuery為textarea添加maxlength,并且兼容IE，具體實現(xiàn)祥看本文，希望可以幫助到你2013-04-04
jquery 動態(tài)合并單元格的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨query 動態(tài)合并單元格的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要介紹了jQuery Collapse1.1.0折疊插件的使用方法 ，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
jQuery validate 中文API 附validate.js中文api手冊
jQuery validate 中文API 附validate.js中文api手冊2010-07-07
jquery調(diào)用wcf并展示出數(shù)據(jù)的方法
網(wǎng)上看了很多jquery調(diào)用wcf的例子，可能是主機的原因，我用的是gd主機，所以都沒有成功，昨天自己搞了一天，終于成功了，現(xiàn)把方法和代碼和大家分享2011-07-07
這篇文章主要介紹了jQuery實現(xiàn)的文字逐行向上間歇滾動效果,涉及jQuery基于時間函數(shù)的頁面元素樣式動態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下2017-09-09
在很多時候，我們都不是一步就將所有信息填寫完整，然后提交。而是分步進行填寫表單2011-03-03
jquery dataTable 獲取某行數(shù)據(jù)
本篇文章主要介紹了jquery dataTable 獲取某行數(shù)據(jù)的相關(guān)知識，具有很好的參考價值。下面跟著小編一起來看下吧2017-05-05
利用jQuery實現(xiàn)滑動開關(guān)按鈕效果（附demo源碼下載）
這篇文章主要介紹了利用jQuery實現(xiàn)滑動開關(guān)按鈕效果，文中給出了詳細的介紹，并在文末給出了完整的demo源碼下載，有需要的朋友可以參考簡介，下面來一起看看吧。2017-02-02