# homework-fe-02-06

**Repository Path**: sfljskeprim_admin/homework-fe-02-06

## Basic Information

- **Project Name**: homework-fe-02-06
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-11-25
- **Last Updated**: 2021-11-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

1. **# 简答题**

   1. 简述浏览器请求数据时，同步和异步的区别？

   > 异步: 在执行一些耗时操作去做别的事情而不是等待，而同步在执行一些耗时操作不能去做别的事情，必须等待执行完毕

   2. 简述 ajax 的过程。

   > 1. 创建XMLHttpRequest类型的对象,IE6兼容需要创建`ActiveXObject("Microsoft.XMLHTTP")`
   > 2. 准备发送，打开与一个网址之间的连接通过`open()`
   > 3. 执行发送动作调用`send`方法,对于POST请求需要在发送之前设置`setRequestHeader()`
   > 4. 执行xhr状态变化事件处理函数：`onreadystatechange`
   > 5. 在HTML5中XMLHTTPRequest进行了升级，onload事件监听请求完成的动作，onprogress事件，在请求进行中触发

   3. 请解释一下 JavaScript 的同源策略。

   > 同源策略是浏览器的一种安全策略，所谓同源：域名、协议、端口完全相同
   >
   > 在同源策略下，只有同源的地址才可以互相通过AJAX的方式请求，不同源地址间的请求称为跨域请求。

   4. GET和POST的区别，何时使用POST？

   > GET请求：一般用于信息获取，使用URL传递参数?a=xx&b=xx，对发送信息的数量有限制，一般在2000个字符
   >
   > POST请求：一般用于向服务器提交资源，对所发送的信息没有限制
   >
   > 使用POST请求：
   >
   > - 无法使用缓存文件，更新服务器上的文件或数据库
   > - 向服务器发送大量数据，post没有数据量限制
   > - 发送包含未知字符的用户输入时，POST比GET更稳定也更可靠

   5. 什么是jsonp跨域。

   > JSONP :JSON width Padding 是一种借助与script标签发送跨域请求的技巧。
   >
   > 原理：客户端借助script标签请求服务端的一个地址，地址返回一段带有某个全局函数的JavaScript脚本，在调用函数中，原本需要返回给客户端的数据通过参数传递给这个函数，这样客户端就可以通过参数得到原本服务端想要返回的数据。

   6. 什么是cors跨域。

   > Cross Origin Resource Share 跨域资源共享，需要服务器进行处理，在被请求的服务端响应头添加一个Access-Control-Allow-Origin的值，其中 * 表示允许访问任意源不安全，以及指定地址源访问

   7. 请描述jsonp 与 cors 的区别。

   > JSONP的优势在于支持老式浏览器，弊端比较明显，需要客户端和服务定制进行开发。服务端返回的数据不能是标准的JSON数据，而是callback包裹的数据。
   >
   > cors支持所有的浏览器请求类型，承载的请求数据量更大，开发更简洁，服务端只需要将处理后的数据直接返回，不需要再特殊处理。
   >
   > 1. JSONP的主要优势在于对浏览器的支持较好。IE10一下不支持CORS
   > 2. JSONP只能用于获取资源，CORS支持所有类型的HTTP请求，功能完善
   >
   > 1. JSONP的错误处理机制并不完善，没有办法进行错误处理，CORS和正常请求一样可以监听错误，利于排查
   > 2. JSONP只会发一次请求，而对于复杂的请求，CORE会发两次请求
   >
   > 1. JSONP并不是跨域规范，存在明显的安全问题，callback参数注入和资源访问授权设置

   8. 简单描述模板的作用。

   > 减少字符串拼接，在模板里面解析JSON，然后跟HTML内容拼接，性能会更好。

   9. 请描述ArtTemplate模板的使用步骤。

   > 1. 引入模板文件
   >
   > <script src="js/template-native.js"></script>
   >
   > 2. 创建模板
   >
   > 3. 添加模板中的结构
   >
   > 4. 在模板中编写js代码解析数据

   ```
     <!--2. 创建模板-->
       <script type="text/html" id="tem">
           <!--3. 添加模板中的结构-->
           <% for(let i =0;i<5;i++){ %>
           <div>这是一个模板中的div1 <%= i %> <%= name %></div>
           <div>这是一个模板中的div2 <%= i %></div>
           <% } %>
           <!--4. 在模板中编写js代码解析数据-->
       </script>
   ```

   **# 代码题**

   \* 作业需求：

    \* 完成视频中留言板项目

    \* json文件自己完成，模仿jsonPlaceholder的格式

    \* 样式自由发挥