72 lines
1.8 KiB
HTML
72 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Title</title>
|
||
<script src="ajax.js"></script>
|
||
</head>
|
||
<body>
|
||
|
||
|
||
<ul id="list">
|
||
|
||
|
||
|
||
</ul>
|
||
|
||
<script>
|
||
|
||
// /**
|
||
// * 前后端一种局部刷新的前后端数据交互的方式。
|
||
// * http://www.runoob.com/ajax/ajax-intro.html
|
||
// *
|
||
// */
|
||
// // 1：掏出手机(初始化ajax对象，方便下面开始使用)
|
||
// var http = new XMLHttpRequest();
|
||
//
|
||
// // 2：相当于掏出手机，输入好手机号
|
||
// http.open("GET","http://lb2271608011.coding.me/feed.json", true);
|
||
//
|
||
// // 3：拨号(发送网络请求)
|
||
// http.send();
|
||
//
|
||
// // 4：通过 onreadystatechange 监听网络请求的状态，相当于电话拨号中的各种状态
|
||
// http.onreadystatechange = function () {
|
||
// if(http.readyState == 4) {
|
||
// console.log(http.responseText)
|
||
// }
|
||
// }
|
||
|
||
/**
|
||
* 1: ajax封装实现 1
|
||
*/
|
||
// $.get("http://lb2271608011.coding.me/feed.json",function (data) {
|
||
// console.log(data)
|
||
// })
|
||
|
||
/**
|
||
* 2: ajax封装实现 2
|
||
*
|
||
* 任务：
|
||
* 将 data 数据中的 items 数组渲染到页面上，通过 ul li 标签来渲染。
|
||
*/
|
||
|
||
var NewsLsit = document.getElementById("list"),
|
||
html = "";
|
||
get("http://lb2271608011.coding.me/feed.json", function (data) {
|
||
for (var i =0;i<data.items.length;i++) {
|
||
html += `<li>
|
||
<a href="${data.items[i].link}" target="_blank"> ${data.items[i].title} </a>
|
||
</li>`
|
||
}
|
||
NewsLsit.innerHTML = html
|
||
})
|
||
|
||
/**
|
||
* 下节课任务：实现天气app，或者 实现百度翻译
|
||
*/
|
||
|
||
</script>
|
||
|
||
</body>
|
||
</html> |