Ajax簡介：
- Ajax: Asynchronous JavaScript and XML
synchronous / asynchronous 同步 / 異步
HTML - Hyper-Text Markup Language
XML - eXtensible Markup Language
XML最為重要的用途是在兩個異構(gòu)的系統(tǒng)之間交換數(shù)據(jù)
現(xiàn)在這項(xiàng)功能基本上被JSON和YAML格式替代了
（百度建議功能波势，京東的瀑布式加載就是Ajax做的）
通過JavaScript代碼向服務(wù)器發(fā)起異步請求并獲得數(shù)據(jù)
- 異步請求：在不中斷用戶體驗(yàn)的前提下向服務(wù)器發(fā)出請求
獲得數(shù)據(jù)后可以通過DOM操作對頁面進(jìn)行局部刷新新加載服務(wù)器返回的數(shù)據(jù)
一辟灰、Ajax加載美女圖片（原生JavaScript）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button id="ok">換一組</button>
<div id="container"></div>
<!-- HTML: Hyper-Text Markup Language -->
<!-- XML: eXtensible Markup Language -->
<!-- XML最為重要的用途是在兩個異構(gòu)的系統(tǒng)之間交換數(shù)據(jù) -->
<!-- 現(xiàn)在這項(xiàng)功能基本上被JSON和YAML格式替代了 -->
<!-- Ajax: Asynchronous JavaScript and XML -->
<!-- 通過JavaScript代碼向服務(wù)器發(fā)起異步請求并獲得數(shù)據(jù) -->
<!-- 異步請求：在不中斷用戶體驗(yàn)的前提下向服務(wù)器發(fā)出請求 -->
<!-- 獲得數(shù)據(jù)后可以通過DOM操作對頁面進(jìn)行局部刷新加載服務(wù)器返回的數(shù)據(jù) -->
<script>
(function() {
var div = document.getElementById('container');
var button = document.getElementById('ok');
button.addEventListener('click', function() {
// 1. 創(chuàng)建異步請求對象
var xhr = new XMLHttpRequest();
if (xhr) {
var url = 'http://api.tianapi.com/meinv/?key=*************************************&num=10';
// 2. 配置異步請求
xhr.open('get', url, true);
// 3. 綁定事件回調(diào)函數(shù)（服務(wù)器成功響應(yīng)后要干什么）
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
div.innerHTML = '';
// 5. 解析服務(wù)器返回的JSON格式的數(shù)據(jù)
var jsonObj = JSON.parse(xhr.responseText);
var array = jsonObj.newslist;
// 6. 通過DOM操作實(shí)現(xiàn)頁面的局部刷新
for (var i = 0; i < array.length; i += 1) {
var img = document.createElement('img');
img.src = array[i].picUrl;
img.width = '250';
div.appendChild(img);
}
}
};
// 4. 發(fā)出請求
xhr.send();
} else {
alert('使用垃圾瀏覽器還想看美女惶桐，做夢后雷！');
}
});
})();
</script>
</body>
</html>
二哺呜、Ajax加載美女圖片（jQuery）
- 獲取內(nèi)容的兩種方式：
$.getJSON函數(shù)與$.ajax函數(shù)
-
$.ajax({})的參數(shù)是一個對象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<button type="button" id="ok">換一組</button>
<div id="container">
</div>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#ok').on('click', function(){
// $.ajax函數(shù)
// $.ajax({})的參數(shù)是一個對象
$.ajax({
'url': 'http://api.tianapi.com/meinv/',
// type支持patch,put,delete,get,post
'type': 'get',
'data': {
'key': '***************************',
'num': 12,
},
'dataType': 'json',
// 成功的回調(diào)函數(shù)
'success': function(jsonObj){
$('#container').empty();
$.each(jsonObj.newslist, function(index, elem){
$('#container').append(
$('<img>').attr('width', '500').attr('src', elem.picUrl)
);
});
},
// 'error': function(){}, // 失敗的回調(diào)函數(shù)
});
// getJSON函數(shù)
// var url = 'http://api.tianapi.com/meinv/?key=***************************&num=10';
// $.getJSON(url, function(jsonObj){
// $('#container').empty();
// $.each(jsonObj.newslist, function(index, elem){
// $('#container').append(
// $('<img>').attr('width', '500').attr('src', elem.picUrl)
// );
// });
// });
});
});
</script>
</body>
</html>
三排嫌、Ajax加載周公解夢
- 中文在API接口獲取或者傳輸時妹田，需要進(jìn)行二進(jìn)制編解碼，方法為：
encodeURIComponent(str, 'utf-8')
decodeURIComponent(百分號編碼, 'utf-8')
Ajax自動完成了編解碼志珍，不需要使用上面代碼
<!-- encodeURIComponent(str, 'utf-8')
decodeURIComponent(百分號編碼, 'utf-8')-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="div1">
<input type="text" name="text" id="" value="" />
<button type="button">周公解夢</button>
</div>
<div id="result">
<p></p>
</div>
<script src="js/jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
$('#div1 button').on('click', function(){
var text = $('#div1 input').val();
$.ajax({
'url': 'http://api.tianapi.com/txapi/dream/',
'type': 'get',
'data': {
'key': '******************************',
'word': text,
},
'dataType': 'json',
'success': function(jsonObj){
$('#result p').empty();
if (jsonObj.code != 250){
newText = jsonObj.newslist[0].result;
$('#result p').text(newText);
} else {
$('#result p').text('輸入內(nèi)容不正確');
}
},
});
});
});
</script>
</body>
</html>
