Ajax简介：
- Ajax: Asynchronous JavaScript and XML
synchronous / asynchronous 同步 / 异步
HTML - Hyper-Text Markup Language
XML - eXtensible Markup Language
XML最为重要的用途是在两个异构的系统之间交换数据
现在这项功能基本上被JSON和YAML格式替代了
（百度建议功能，京东的瀑布式加载就是Ajax做的）
通过JavaScript代码向服务器发起异步请求并获得数据
- 异步请求：在不中断用户体验的前提下向服务器发出请求
获得数据后可以通过DOM操作对页面进行局部刷新新加载服务器返回的数据
一、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最为重要的用途是在两个异构的系统之间交换数据 -->
<!-- 现在这项功能基本上被JSON和YAML格式替代了 -->
<!-- Ajax: Asynchronous JavaScript and XML -->
<!-- 通过JavaScript代码向服务器发起异步请求并获得数据 -->
<!-- 异步请求：在不中断用户体验的前提下向服务器发出请求 -->
<!-- 获得数据后可以通过DOM操作对页面进行局部刷新加载服务器返回的数据 -->
<script>
(function() {
var div = document.getElementById('container');
var button = document.getElementById('ok');
button.addEventListener('click', function() {
// 1. 创建异步请求对象
var xhr = new XMLHttpRequest();
if (xhr) {
var url = 'http://api.tianapi.com/meinv/?key=*************************************&num=10';
// 2. 配置异步请求
xhr.open('get', url, true);
// 3. 绑定事件回调函数（服务器成功响应后要干什么）
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
div.innerHTML = '';
// 5. 解析服务器返回的JSON格式的数据
var jsonObj = JSON.parse(xhr.responseText);
var array = jsonObj.newslist;
// 6. 通过DOM操作实现页面的局部刷新
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. 发出请求
xhr.send();
} else {
alert('使用垃圾浏览器还想看美女，做梦！');
}
});
})();
</script>
</body>
</html>
二、Ajax加载美女图片（jQuery）
- 获取内容的两种方式：
$.getJSON函数与$.ajax函数
-
$.ajax({})的参数是一个对象
<!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函数
// $.ajax({})的参数是一个对象
$.ajax({
'url': 'http://api.tianapi.com/meinv/',
// type支持patch,put,delete,get,post
'type': 'get',
'data': {
'key': '***************************',
'num': 12,
},
'dataType': 'json',
// 成功的回调函数
'success': function(jsonObj){
$('#container').empty();
$.each(jsonObj.newslist, function(index, elem){
$('#container').append(
$('<img>').attr('width', '500').attr('src', elem.picUrl)
);
});
},
// 'error': function(){}, // 失败的回调函数
});
// getJSON函数
// 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接口获取或者传输时，需要进行二进制编解码，方法为：
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('输入内容不正确');
}
},
});
});
});
</script>
</body>
</html>
网友评论