11.26 JS基础9
- 再谈Ajax
什么是ajax？
1.服务端接口提供一个请求地址,暴露出来给我们的客户端访问。
2.在客户端使用ajax技术来发送请求给服务器。
注意:不是所有的接口都可以通过ajax直接调用的，有些接口有特定方法，例如baiduAI（人脸识别等）的java代码来调用。
服务端接口可以是别人写好的，放在网络上公开出来的，如：
https://gitee.com/safflower_club/free_api_interface
也可以自己写的。如果有掌握后端接口的编码的技术: node,java,PHP,等等。
练习：在控制台上获取新闻信息
<script>
//1创建一个对象
let xhr = new XMLHttpRequest();
//2.设置要连接的服务器url 方法
//从服务器接口拿数据，"GET"
//https://api.apiopen.top/getTencentNews
xhr.open("GET", "https://api.apiopen.top/getTencentNews", true);
//发送请求
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
let response = JSON.parse(xhr.responseText);
console.log(response.data);
//遍历response.data
let array = response.data;
for (let i = 0; i < array.length; i++) {
console.log(array[i].title);
console.log(array[i].intro);
console.log("**********************");
}
}
}
</script>解析：将图片数据显示在网页上，注意美观。 https://api.apiopen.top/getImages
<body>
<div id="pic"></div>
<script>
let xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.apiopen.top/getImages", true);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
let response = xhr.responseText;
let data = JSON.parse(response);
console.log(data.result);
let arr = data.result;
for (let i = 0; i < arr.length; i++) {//值得注意的是可以在后面做字符串拼接图片的标签内容
document.getElementById("pic").innerHTML += "<img alt='查无此图' width:'300px' height='500px' src=" + arr[i].img + ">";
console.log(arr[i].img);
}
}
}
</script>
</body>注意：要想将获取的图片显示在页面上，而不只是显示网址或者单张图片，要将图片的标签<img src="">同循环遍历出的图片网址做字符串拼接。
什么是JSON？
- JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
- JSON 是轻量级的文本数据交换格式
- JSON 独立于语言，JSON使用JavaScript语法来描述数据对象，但是JSON仍然独立于语言和平台。JSON 解析器和JSON库支持许多不同的编程语言。
- JSON 具有自我描述性，更易理解。
JSON的语法规则
- JSON 语法是 JavaScript 对象表示法语法的子集。
- 数据在名称/值对中（键值对中{key:value}）
-
数据由逗号分隔
-
大括号保存对象 如：{
"code": 200,
"message": "success",
"result": [{
"name": "Lisa",
"age": 18
}, {
"name": "John",
"age": 19
}, {
"name": "Tom",
"age": 20
}]
} - 中括号保存数组 如：[{"name":"Lisa","age":18},{"name":"John","age":19},{"name":"Tom","age":20}]
关于JSON格式是否正确，可在 https://www.bejson.com/ 验证。
JSON的值
JSON 值可以是：
- 数字（整数或浮点数）
- 字符串（在双引号中）
- 逻辑值（true 或 false）
- 数组（在中括号中）
- 对象（在大括号中）
- null
JSON文件
- JSON文件类型是"json"
- JSON 文本的 MIME 类型是 "application/json"
将JSON文本转换为JavaScript对象
JSON最常见的用法之一，是从web服务器上读取JSON数据（作为文件或作为 HttpRequest），将JSON数据转换为JavaScript对象，然后在网页中使用该数据。
转换的方法：
可以使用eval；也可以使用 JSON.parse 将字符串文本转化为JS对象。
我们也可以将JSON数据放在本机的一个JSON文件中，通过ajax来请求访问。
但是我们有时也会发现json文件中文乱码了，这时我们需要打开json文件，找右下角，调整编码格式为utf-8。
样例：
<script>
//1创建一个对象
let xhr = new XMLHttpRequest();
//2.设置要连接的服务器url 方法
//从服务器接口拿数据，"GET"
//直接请求文件
xhr.open("GET", "star.json", true);
//发送请求
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
let response = JSON.parse(xhr.responseText);
console.log(response.results);
//遍历response.data
let array = response.results;
for (let i = 0; i < array.length; i++) {
console.log(array[i].name);
console.log(array[i].img);
console.log("**********************");
}
}
}
</script>如何改变服务器端口，从而让人访问到我们的JSON文件？
在该选项打钩（意味着容许接受外部连接），然后把内置服务器端口改为四位数，如下图。
从而达到这种效果。
- jQuery中的ajax
定义和用法
ajax() 方法通过 HTTP 请求加载远程数据。
该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。
最简单的情况下，$.ajax() 可以不带任何参数直接使用。
注意：所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。
语法
jQuery.ajax([settings])
|
参数 |
描述 |
|
settings |
可选。用于配置 Ajax 请求的键值对集合。 可以通过 $.ajaxSetup() 设置任何选项的默认值。 |
| 参数名 | 类型 | 用法及注意事项 |
| url | String | 默认值: 当前页地址。发送请求的地址。 |
| type | String | 默认值: "GET")。请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。 |
| async | Boolean |
默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。 注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。 |
| dataType | String |
预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:
|
| success | Function |
请求成功后的回调函数。 参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。 这是一个 Ajax 事件。 |
参考代码
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!--1 百度cdn在线的jquery-->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
</head>
<body>
<button onclick="funajax()">ajax</button>
<!--jquery,别人封装好的js，如果要使用外部js-->
<script>
function funajax() {
$.ajax({
//Ajax 请求的键值对集合
url: "https://api.apiopen.top/getTencentNews",
type: "GET",
async: true,
dataType: "json",
success: function (res) {
//res 从服务器返回的数据
console.log(res);
let array = res.data;
for (let i = 0; i < array.length; i++) {
console.log(array[i].title);
console.log(array[i].intro);
console.log("**********************");
}
}
});
}
</script>
</body>从外部引入第三方的在线js文件。
练习
模拟豆瓣，解析json文件。
{
"code": 200,
"msg": "请求成功",
"data": {
"total": 250,
"limit": 25,
"page": 0,
"subject": [
{
"id": "1292052",
"img": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p480747492.jpg",
"name": "肖申克的救赎",
"director": "弗兰克·德拉邦特 Frank Darabont ",
"star": "9.7",
"quote": "希望让人自由。"
},
{
"id": "1291546",
"img": "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2561716440.jpg",
"name": "霸王别姬",
"director": "陈凯歌 Kaige Chen ",
"star": "9.6",
"quote": "风华绝代。"
},
{
"id": "1292720",
"img": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2372307693.jpg",
"name": "阿甘正传",
"director": "罗伯特·泽米吉斯 Robert Zemeckis ",
"star": "9.5",
"quote": "一部美国近现代史。"
},
{
"id": "1295644",
"img": "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p511118051.jpg",
"name": "这个杀手不太冷",
"director": "吕克·贝松 Luc Besson ",
"star": "9.4",
"quote": "怪蜀黍和小萝莉不得不说的故事。"
},
{
"id": "1292722",
"img": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p457760035.jpg",
"name": "泰坦尼克号",
"director": "詹姆斯·卡梅隆 James Cameron ",
"star": "9.4",
"quote": "失去的才是永恒的。"
},
{
"id": "1292063",
"img": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2578474613.jpg",
"name": "美丽人生",
"director": "罗伯托·贝尼尼 Roberto Benigni ",
"star": "9.5",
"quote": "最美的谎言。"
},
{
"id": "1291561",
"img": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2557573348.jpg",
"name": "千与千寻",
"director": "宫崎骏 Hayao Miyazaki ",
"star": "9.4",
"quote": "最好的宫崎骏，最好的久石让。"
},
{
"id": "1295124",
"img": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p492406163.jpg",
"name": "辛德勒的名单",
"director": "史蒂文·斯皮尔伯格 Steven Spielberg ",
"star": "9.5",
"quote": "拯救一个人，就是拯救整个世界。"
},
{
"id": "3541415",
"img": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2616355133.jpg",
"name": "盗梦空间",
"director": "克里斯托弗·诺兰 Christopher Nolan ",
"star": "9.3",
"quote": "诺兰给了我们一场无法盗取的梦。"
},
{
"id": "3011091",
"img": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p524964039.jpg",
"name": "忠犬八公的故事",
"director": "莱塞·霍尔斯道姆 Lasse Hallström ",
"star": "9.4",
"quote": "永远都不能忘记你所爱的人。"
},
{
"id": "1292001",
"img": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2574551676.jpg",
"name": "海上钢琴师",
"director": "朱塞佩·托纳多雷 Giuseppe Tornatore ",
"star": "9.3",
"quote": "每个人都要走一条自己坚定了的路，就算是粉身碎骨。"
},
{
"id": "1889243",
"img": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2614988097.jpg",
"name": "星际穿越",
"director": "克里斯托弗·诺兰 Christopher Nolan ",
"star": "9.3",
"quote": "爱是一种力量，让我们超越时空感知它的存在。"
},
{
"id": "1292064",
"img": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p479682972.jpg",
"name": "楚门的世界",
"director": "彼得·威尔 Peter Weir ",
"star": "9.3",
"quote": "如果再也不能见到你，祝你早安，午安，晚安。"
},
{
"id": "3793023",
"img": "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p579729551.jpg",
"name": "三傻大闹宝莱坞",
"director": "拉库马·希拉尼 Rajkumar Hirani ",
"star": "9.2",
"quote": "英俊版憨豆，高情商版谢耳朵。"
},
{
"id": "2131459",
"img": "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p1461851991.jpg",
"name": "机器人总动员",
"director": "安德鲁·斯坦顿 Andrew Stanton ",
"star": "9.3",
"quote": "小瓦力，大人生。"
},
{
"id": "1291549",
"img": "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p1910824951.jpg",
"name": "放牛班的春天",
"director": "克里斯托夫·巴拉蒂 Christophe Barratier ",
"star": "9.3",
"quote": "天籁一般的童声，是最接近上帝的存在。"
},
{
"id": "1292213",
"img": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2455050536.jpg",
"name": "大话西游之大圣娶亲",
"director": "刘镇伟 Jeffrey Lau ",
"star": "9.2",
"quote": "一生所爱。"
},
{
"id": "5912992",
"img": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p1363250216.jpg",
"name": "熔炉",
"director": "黄东赫 Dong-hyuk Hwang ",
"star": "9.3",
"quote": "我们一路奋战不是为了改变世界，而是为了不让世界改变我们。"
},
{
"id": "25662329",
"img": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2614500649.jpg",
"name": "疯狂动物城",
"director": "拜伦·霍华德 Byron Howard / 瑞奇·摩尔 Rich Moore ",
"star": "9.2",
"quote": "迪士尼给我们营造的乌托邦就是这样，永远善良勇敢，永远出乎意料。"
},
{
"id": "1307914",
"img": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2564556863.jpg",
"name": "无间道",
"director": "刘伟强 / 麦兆辉 ",
"star": "9.2",
"quote": "香港电影史上永不过时的杰作。"
},
{
"id": "1291841",
"img": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p616779645.jpg",
"name": "教父",
"director": "弗朗西斯·福特·科波拉 Francis Ford Coppola ",
"star": "9.3",
"quote": "千万不要记恨你的对手，这样会让你失去理智。"
},
{
"id": "1291560",
"img": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2540924496.jpg",
"name": "龙猫",
"director": "宫崎骏 Hayao Miyazaki ",
"star": "9.2",
"quote": "人人心中都有个龙猫，童年就永远不会消失。"
},
{
"id": "1849031",
"img": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2614359276.jpg",
"name": "当幸福来敲门",
"director": "加布里尔·穆奇诺 Gabriele Muccino ",
"star": "9.1",
"quote": "平民励志片。"
},
{
"id": "3319755",
"img": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p501177648.jpg",
"name": "怦然心动",
"director": "罗伯·莱纳 Rob Reiner ",
"star": "9.1",
"quote": "真正的幸福是来自内心深处。"
},
{
"id": "6786002",
"img": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p1454261925.jpg",
"name": "触不可及",
"director": "奥利维·那卡什 Olivier Nakache / 艾力克·托兰达 Eric Toledano ",
"star": "9.2",
"quote": "满满温情的高雅喜剧。"
}
]
}
}
期间遇到问题。。图片无法成功显示，网页报403错误，数据拒绝我们的访问，解决方法如下。
<head lang="en">
<meta charset="UTF-8" name="referrer" content="never">
<!--由此可绕过防盗链，但有一个问题: history.back..可能会有问题-->
<title></title>
<style>
.divmovie {
width: 300px;
height: 500px;
float: left;
margin-left: 30px;
margin-top: 10px;
text-align: center;
font-family: kaiti;
font-size: 12px;
font-weight: bolder;
background-color: lightblue;
}
img {
width: 270px;
height: 400px;
border: 1px dotted gray;
margin: 5px 0px 0px 0px;
}
.name {
font-size: 16px;
color: blue;
margin-top: 0px;
margin-bottom: 0px;
}
</style>
<!--1 百度cdn在线的jquery-->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
</head>
<body>
<button onclick="funajax()">查看电影详情</button>
<div id="movie">
</div>
<script>
function funajax() {
document.getElementById("movie").innerHTML = "";
$.ajax({
//Ajax 请求的键值对集合
//url: "https://api.apiopen.top/getTencentNews",
url: "top250.json",
type: "GET",
async: true,
dataType: "json",
success: function (res) {
console.log(res);
let array = res.data.subject;
for (let i = 0; i < array.length; i++) {
console.log(array[i].img);
console.log(array[i].name);
console.log(array[i].director);
console.log(array[i].star);
console.log(array[i].quote);
console.log("**********************");
$("#movie").append("<div class='divmovie'>" +
"<img src='" + array[i].img + "'>" + "<br/><br/><div class='name'>" + array[i].name + "</div><br/>" + array[i].director + "<br/>" + array[i].quote + "</div>");
}
}
});
}
</script>
</body>老师之前发的相关参考代码（不完整的）
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.divmovie{width:260px; height:400px; float:left; border: 1px solid blue;margin-left: 30px;margin-top: 20px}
</style>
<!--1 百度cdn在线的jquery-->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
</head>
<body>
<button onclick="funajax()">ajax</button>
<!--jquery,别人封装好的js，如果要使用外部js-->
<div id="movie">
</div>
<script>
function funajax(){
$.ajax({
//Ajax 请求的键值对集合
//url: "https://api.apiopen.top/getTencentNews",
url:"top250.json",
type: "GET",
async: true,
dataType: "json",
success: function(res){
//res 从服务器返回的数据
console.log(res);
let array = res.data.subject;
for(let i=0;i<array.length; i++){
console.log(array[i].name);
console.log(array[i].star);
console.log(array[i].img);
console.log("**********************");
$("#movie").append("<div class='divmovie'><h4>"+array[i].name+"</h4><p><img src='"+array[i].img+"'></p></div>")
}
}
});
}
</script>
</body>$("#movie").append("<div class='divmovie'><h4>"+array[i].name+"</h4><p><img src='"+array[i].img+"'></p></div>")感想：不得不说，今天学的难度又比昨天高了。。不过大部分还是懂的，就是像上面那种的jQuery ajax里字符串拼接还不够熟练，需要多练习。
（Ps：下课看下基金，又是大概率跑赢大盘的一天，不错）
18:18:54 2021-11-26
posted on 2021-11-26 18:18 heyiyang1312 阅读(9) 评论(0) 收藏 举报
浙公网安备 33010602011771号