前端基础练习题第26天 答案及解析

本篇文章是前端基础练习题第二十六天的答案及解析部分，纯题目部分请移步前端基础练习题 第26天

正文

1.（判断题）<script>标签的async属性可以保证脚本的执行顺序，而defer属性无法保证先出现在页面上的脚本先执行。

答案：错误。

defer属性能保证脚本的先后执行顺序，而async属性决定了先解析完的脚本先执行。

2.如何利用userAgent属性大致的判断用户访问设备是否为手机端，若为手机端，就跳转至m.jealyn.top，否则就访问jealyn.top？

示例代码如下所示：

// 获取userAgent
var ua = window.navigator.userAgent;
// 利用正则表达式，控制href属性
if(/mobile|android|iphone|webos|ipod/i.test(ua)) {
  window.location.href = "https://m.jealyn.top";
} else {
  window.location.href = "https://jealyn.top";
}

3.（判断题）http://example.com设置的Cookie可以被https://example.com读取。

答案：正确。

Cookie的“同源策略”仅关注域名（domain），而不受协议和端口的限制。

4.手写一段AJAX代码，该代码通过GET方式访问/example.html页面，当服务器成功返回数据时，在控制台打印返回信息，否则输出状态码和状态字符串。

示例代码如下所示：

var xhr = new XMLHttpRequest();
xhr.open('GET', '/example.html', true);
xhr.onreadystatechange = function() {
  if(xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.response);
  } else {
    console.log(xhr.status, xhr.statusText);
  }
}
xhr.send(null);

实现一个AJAX请求和调用通常需要以下几个步骤：

1. 创建XMLHttpRequest对象
2. 创建HTTP请求（open方法），并设置请求方法、请求地址和请求形式（异步/同步）
3. 设置响应HTTP请求状态变化的函数
4. 发送HTTP请求（send方法）
5. 获取返回的数据，并进行相应的数据操作

5.下列HTTP状态码分别代表什么意思？试简述之。
200、301、401、404、500

答案如下所示：

• 200(OK)，成功，表示服务器已成功处理了请求。
• 301(Moved Permanently)，永久重定向，表示所请求的资源已永久的移动到新位置。
• 401(Unauthorized)，未授权，表示该请求由于凭据无效而被拒绝访问。
• 404(Not Found)，未找到，请求服务器上不存在的网页就会返回此代码。
• 500(Internal Server Error)，服务器内部错误，表示服务器遇到错误，无法完成请求。

6.根据同源策略的相关知识，选出所有与http://www.jealyn.top/js.html“同源”的网页。

1. http://www.jealyn.top/js2.html
2. http://jealyn.top/js2.html
3. http://m.jealyn.top/js2.html
4. http://www.jealyn.top:81/js2.html
5. http://www.jealyn.top:80/js2.html
6. https://www.jealyn.top/js2.html
7. http://www.jealyn.top/sub/js2.html
8. 119.28.76.36/js2.html(域名所对应IP)

答案：AEG。

同源是指协议相同、域名相同、端口相同，就算域名与其对应IP地址也不算同源。

7.非同源网页之间的哪些行为会受到限制？

非同源网页之间会受到如下限制：

1. 无法读取非同源网页的Cookie、LocalStorage和IndexedDB
2. 无法接触非同源网页的DOM
3. 浏览器拒绝接受来自非同源网页发出的AJAX请求

说明

1. 题目中出现的JS指的是采用ECMAScript 2015及之后标准的JavaScript

2. 答案中，若有错误和需完善的地方，可在下方留言反馈哈~~

3. 查看纯习题版，请点击前端基础练习题 第26天