11.25 JS基础8
- 昨天作业回顾与修改
外部引入了JS文件
<body>
<script src="prac.js" charset="gbk"></script>
<script>
//带返回值
let result = getSum(100);
console.log(result);
//第一个函数 偶数方法判断 调用
let flag1 = isEven(121);
if(flag1)
console.log("是偶数");
else
console.log("不是偶数");
// //偶数2
// let flag2 = iseven2(7);
// console.log(flag2);
//质数判断
let flag3 = isPrime(14);
if(flag3)
console.log("是质数");
else
console.log("不是质数");
</script>
</body>/**
* 带参数 有返回值用函数来实现，传递一个参数n给函数，返回值为1+2+…+n的和
* @param n
* @returns {number}
*/
function getSum(n) {
let sum = 0;
if (n < 1) {//之前忽略了n可能小于1
return 0;
} else {
for (let i = 1; i <= n; i++) {
sum += i;
}
return sum;
}
}
/**
* 用函数来实现，传递一个参数n给函数，判断这个n是否是偶数,并返回结果; 这种用的多.
* @param n
* @returns {boolean} true 是偶数 false不是偶数
*/
function isEven(n) {//之前用的是返回值为字符串 不如这个灵活
if (n % 2 == 0) {
return true;
}
return false;
}
/**
* 用函数来实现，传递一个参数n给函数，判断这个n是否是偶数,并返回结果;
* @param n
* @returns {*} 字符串直接返回是否是偶数的文字提示
*/
//function iseven2(n) {这是我昨天用的方法
//
// if (n % 2 == 0) {
// return "是偶数";
// }
// return "不是偶数";
//}
/**
* 用函数来实现，传递一个参数n给函数，判断这个数字n是否是质数，并返回结果.
* 计算的反而不是1和他本身。 1到本身之间的数
* 7 -》2 3 4 5 6
* 9 -》2 3-》结束 不是质数
* 101 -> %2 %3 %4 .......%100
* 101 -> %2 %3 %4 .......%50.没必要，到一半
* 101 -> %2 %3 %4 .......101的平方根.
* @param n
* @returns {*}
*/
function isPrime(n) {
if (n <= 1 || n%2==0) {//小于等于1绝不可能是质数 能整除除2的除了2也都不是质数
return false;
} else if (n == 2) {//2是最小的质数
return true;
} else {
for (let i = 2; i < Math.sqrt(n); i++) {
if (n % i == 0) {
return false;//差点忘了 如果条件满足的话 return有结束的意思
} //所以true的位置不一定要放在for循环内
}return true;
}
}总结：return 布尔值的使用频率比return字符串高得多，更灵活。。另外，不能忽视n小于1的可能。。
- AJAX
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
- XMLHttpRequest 对象
所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
XMLHttpRequest 对象用于和服务器交换数据。
- 向服务器发送请求
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
xmlhttp.open("GET","test1.txt",true); xmlhttp.send();
|
方法 |
描述 |
|
open(method,url,async) |
规定请求的类型、URL 以及是否异步处理请求。
|
|
send(string) |
将请求发送到服务器。
|
- 服务器响应
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
|
属性 |
描述 |
|
responseText |
获得字符串形式的响应数据。 |
|
responseXML |
获得 XML 形式的响应数据。 |
-
onreadystatechange 事件（就英文意思而言，就知道这与状态改变有关）
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性：
|
属性 |
描述 |
|
onreadystatechange |
存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 |
|
readyState |
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
|
|
status |
200: "OK" 404: 未找到页面 |
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪。（需要定义一个变量来接收返回的数据）
参考
<body>
<button onclick="loadData()">load ajax</button>
<div id="username"></div>
<script>
function loadData() {
//要通过ajax拿到数据,从网络上的某个接口来。
//1 .创建一个核心对象 XMLHttpRequest
let xhr = new XMLHttpRequest();
//2. 先open,设置请求方法,get ; url地址:远端接口请求; async是否异步
xhr.open("GET", "https://api.apiopen.top/getSingleJoke?sid=28654780", true);
//再send
xhr.send();
//事件写来 每当 readyState 改变时，就会触发 onreadystatechange 事件。
xhr.onreadystatechange = function () {
//4 请求已完成，且响应已就绪
//200: "OK"
//当 readyState 等于 4 且状态为 200 时，表示响应已就绪
if (xhr.readyState == 4 && xhr.status == 200) {
//拿到服务器响应的数据
let response = xhr.responseText;
//需要将拿到数据解析成对象->JS对象
let parseData = JSON.parse(response);
console.log(parseData);
//对象.属性
console.log(parseData.result.text);
console.log(parseData.message);
//解析 name : 赵菓菓
console.log(parseData.result.name);
document.getElementById("username").innerHTML = parseData.result.name;
}
}
}
</script>
</body>从服务器 接口拿到数据，解析json。
http://poetry.apiopen.top/poetryAuthor?count=2&page=1&name=李白
我们发现上面接口可以精简为
http://poetry.apiopen.top/poetryAuthor
我们可以传递参数给这个接口: 格式是 ?name=诗人名字 （用加号做拼接）
响应的结果也是根据name来返回的。
<body>
<input type="button" value="将进酒" onclick="loadData()">
<div id="content"></div>
<script>
function loadData() {
let xhr = new XMLHttpRequest();
xhr.open("GET", "http://poetry.apiopen.top/poetryFull?count=2&page=1", 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);
document.getElementById("content").innerHTML = data.result[0].content;
}
}
}
</script>要点：
1. 设计页面
2. 传递参数
3. 解析结果并显示
最终代码：
<body>
<input type="text" id="pname" placeholder="请输入诗人姓名" value="鲁迅">
<button onclick="loadData()">加载</button>
<div id="username" style="font-weight: bolder"></div>
<div id="simpleIntro"></div>
<div id="detailIntro"></div>
<script>
function loadData(){
//1 .创建一个核心对象 XMLHttpRequest
let xhr=new XMLHttpRequest();
//2. 先open,设置请求方法,get ; url地址:远端接口请求; async是否异步
//http://poetry.apiopen.top/poetryAuthor?name=
let pname=document.getElementById("pname").value;
xhr.open("GET","http://poetry.apiopen.top/poetryAuthor?name="+pname,true);
//再send
xhr.send();
//3 事件写来
xhr.onreadystatechange=function(){
//4 请求已完成，且响应已就绪
//200: "OK"
if(xhr.readyState==4 && xhr.status==200){
//拿到服务器响应的数据,默认响应结果是普通的文本
let response = xhr.responseText;
//替换\n-><br/>
/// response = response.replace(/\n/g,"<br/>");
//response = response.replaceAll("\\n","<br/>");
//response = response.replace(/(\r\n)|(\n)/g,'<br>');
console.log(response.indexOf("\\n"));
//需要将拿到数据解析成对象->JS对象
let data=JSON.parse(response);
console.log(data);
if(data.result.name==undefined){
document.getElementById("username").innerHTML = "查无此人";
return;
}
document.getElementById("username").innerHTML=data.result.name;
document.getElementById("simpleIntro").innerHTML=data.result.simpleIntro;
document.getElementById("detailIntro").innerHTML=data.result.detailIntro.replace(/\\n/g,"<br>");
}
}
}
String.prototype.replaceAll = function(s1,s2){//定义替换的函数
return this.replace(new RegExp(s1,"gm"),s2);
}
</script>
</body>
解析诗歌：
http://poetry.apiopen.top/poetryFull?count=2&page=1
练习：
<head lang="en">
<meta charset="UTF-8">
<title>ajax</title>
<style type="text/css">
div {
font-family: "DFKai-SB";
color: lightblue;
font-size: 20px;
}
</style>
</head>
<body>
<button onclick="loadData()">加载</button>
<div id="poem" align="center"></div>
<script>
function loadData() {
document.getElementById("poem").innerHTML = "";
//1 .创建一个核心对象 XMLHttpRequest
let xhr = new XMLHttpRequest();
//2. 先open,设置请求方法,get ; url地址:远端接口请求; async是否异步
// http://poetry.apiopen.top/poetryFull?count=2&page=1
xhr.open("GET", "http://poetry.apiopen.top/poetryFull?count=2&page=1", true);
//再send
xhr.send();
//3 事件写来
xhr.onreadystatechange = function () {
//4 请求已完成，且响应已就绪
//200: "OK"
if (xhr.readyState == 4 && xhr.status == 200) {
//拿到服务器响应的数据,默认响应结果是普通的文本
let response = xhr.responseText;
//需要将拿到数据解析成对象->JS对象
let data = JSON.parse(response);
console.log("数据数组" + data);
//拿到的是result
console.log(data.result);
let array = data.result;
for (let i = 0; i < array.length; i++) {
let poem = array[i];
console.log("诗歌数组" + poem);
//提取poem对象的数据
document.getElementById("poem").innerHTML += poem.title + "<br/>";
//dynasty
document.getElementById("poem").innerHTML += poem.dynasty + "<br/>";
//writer
document.getElementById("poem").innerHTML += poem.writer + "<br/>";
//type
document.getElementById("poem").innerHTML += poem.type + "<br/>";
//content
document.getElementById("poem").innerHTML += poem.content + "<br/>" + "<hr>";
}
}
}
}
</script>
</body>感想：今天学的比昨天的稍稍多了点，也难了点，不过还是可以自己敲出来的。。要说难点，就是那个字符串的替换（replace），要自定义一个函数来做全文替换。。
（Ps；今天感冒，状态不是很好。。忙着敲代码，基金什么的都没看）
17:54:44 2021-11-25
posted on 2021-11-25 18:02 heyiyang1312 阅读(5) 评论(0) 收藏 举报
浙公网安备 33010602011771号