AJAX
AJAX(Asynchronous JavaScript and XML): 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术 .
1.AJAX发起异步请求步骤:
(1). 创建异步请求对象
var xhr = new XMLHttpRequest();
(2). 准备建立连接
xhr.open(‘get’, url, true);
(3). 发送请求
xhr.send();
(4). 处理事件相应
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) { //请求处理完毕,响应就绪; 请求成功
var json = JSON.parse(xhr.responseText); }} ; // 将服务器返回的数据解析成JSON
扫描二维码关注公众号，回复：
2753988 查看本文章
2. 用原生JS编写AJAX请求:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#loadBtn {
width: 200px;
height: 100px;
font-size: 30px;
color: red;
background-color: blue;
}
</style>
</head>
<body>
<button id="loadBtn">点击加载图片</button>
<script src="js/mylib.js"></script>
<script>
+function() {
bind($('loadBtn'), 'click', function() {
// 创建异步请求对象
var xhr = new XMLHttpRequest();
if (xhr) {
var url = 'http://api.tianapi.com/meinv/?key=77b2a&num=50';
// 第一个参数 - 请求的方式get或post
// 第二个参数 - 请求的资源对应的URL(统一资源定位符)
// 第三个参数 - true表示异步请求(不中断用户体验的非阻塞式请求)
xhr.open('get', url, true);
// 绑定事件回调函数(服务器响应完成并成功后要对页面进行局部刷新)
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// 将服务器返回的数据解析成JSON
var json = JSON.parse(xhr.responseText);
var mmList = json.newslist;
for (var i = 0; i < mmList.length; i += 1) {
var mm = mmList[i];
// 动态创建<img>标签并绑定src属性
var img = document.createElement('img');
img.src = mm.picUrl;
img.width = 800;
document.body.insertBefore(img, $('loadBtn'));
}
}
};
xhr.send();
} else {
alert('请更换谷歌浏览器');
}
});
}();
JSON格式转换:
parse - 把字符串解析成JSON对象
stringify - 把JSON对象转成字符串3. 用jQuery编写AJAX请求:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="loadBtn">加载</button>
<script src="js/jquery.min.js"></script>
<script>
$(function() {
// var url = 'http://api.tianapi.com/meinv/?key=7b84&num=10';
$('#loadBtn').on('click', function() {
$.ajax({
type: 'get',
url: 'http://api.tianapi.com/meinv/',
data: {
key: '77231b84',
num: 10
},
dataType: 'json',
success: function(json) {
for (var i = 0; i < json.newslist.length; i += 1) {
var mm = json.newslist[i];
// $('<img>').attr('src', mm.picUrl).attr('width', 300)
// .insertBefore($('#loadBtn'));
$('<p>').append($('<a>')
.attr('href', mm.picUrl)
.attr('target', '_blank')
.text(mm.title)
).insertBefore($('#loadBtn'));
}
},
error: function() {}
});
});
});
</script>
</body>
</html>