js实现ajax获取数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- GET 比 POST 更简单更快,可用于大多数情况下。 不过,在以下情况始终使用 POST: 缓存文件不是选项(更新服务器上的文件或数据库)
向服务器发送大量数据(POST 无大小限制) 发送用户输入(可包含未知字符),POST 比 GET 更强大更安全 -->
<ul id="list"></ul> <button id="btn1">检测浏览器是否支持</button> <button id="btn2">获取数据</button>
<script>
// $(function(){
// var api = './data/data.json';
// $.ajax({
// type:'GET',
// url:api,
// dataType:'json',
// success:function(result){
// console.log(result);
// var each = '';
// $.each(result.list,function(i,n){
// each += `<li>'${n.texturl}'</li>`;
// })
// $('#list').append(each)
// }
// })
// })
// ajax对象是window对象的一个子对象window.XMLhttpRequest,是用来实现异步请求数据
// 1、定义变量,存放ajax对象 { var xhr = window.XMLHttpRequest; console.log(xhr); }
// 2、判断浏览器是否支持XMLHttpRequest
{
var btn1 = document.querySelector('#btn1');
btn1.onclick = function () {
if (window.XMLHttpRequest) {
var xhr = new XMLHttpRequest();
alert(xhr + '支持')
}
}
}
// 3、通过ajax获取数据
{
var btn2 = document.querySelector('#btn2');
var list = document.querySelector('#list');
btn2.onclick = function () {
if (window.XMLHttpRequest) {
// 1.创建ajax对象
var xhr = new window.XMLHttpRequest();
// 2.调用ajax对象中的open方法:打开请求
var api = './data/data.json';
// method:请求的类型:GET 还是 POST
// url:服务器(文件)位置
// async:true(异步)或 false(同步)
xhr.open('get', api, true);
// 3. 调用ajax对象中的send方法:发送请求
xhr.send();
// 4. 将从服务器上请求到的数据显示在页面上
// onreadystatechange 监听服务器的响应状态
// readyState 保存了 XMLHttpRequest 的状态。
// 0: 请求未初始化
// 1: 服务器连接已建立
// 2: 请求已接收
// 3: 正在处理请求
// 4: 请求已完成且响应已就绪
// status
// 200: "OK"
// 403: "Forbidden"
// 404: "Page not found"
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
// xhr.responseText 是数据的文本状态(字符串形式)
// JSON.parse() 方法用于将一个 JSON 字符串转换为对象。
var res = JSON.parse(xhr.responseText);
console.log(res.list);
var lis = res.list
lis.forEach(function (value, index, arr) {
console.log(value.nid);
// (1)定义需要添加的dom标签
var li = document.createElement('li');
li.classList.add('m')
// (2)定义添加的dom的文本内容
var text = document.createTextNode(value.nid);
// (3)将文本内容追加到dom标签中
li.appendChild(text);
// (4)将虚拟dom添加到页面中
list.appendChild(li);
var a = document.createElement('a');
var text1 = document.createTextNode('走你');
a.appendChild(text1)
a.href = '' + value.texturl + ''
li.appendChild(a)
})
}
}
} else {
console.log('请求失败');
}
}
}
console.log(document.querySelector('.m'));
</script>
</body>
</html>
data.json模拟的数据:
{
"status": 200,
"message": "成功",
"list": [{
"nid": 1,
"title": "t1",
"texturl": "https://www.jq22.com/",
"addtime": "20201-5-20 22:22:22"
}, {
"nid": 2,
"title": "t2",
"addtime": "20201-5-20 22:22:22",
"texturl": "https://www.jq22.com/"
}, {
"nid": 3,
"title": "t3",
"addtime": "20201-5-20 22:22:22",
"texturl": "https://www.jq22.com/"
}]
}
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果