Ajax 知识点练习答案.md · HobartHan/Ajax-exercise

## Ajax 知识点练习答案

> Ajax 阶段没有考试,   我们自己做下练习题,   把知识巩固一下.

## 一、选择题

1.  浏览器 `ajax` 的核心对象是：

- [ ] A. ` JSON `

- [ ] B.  `xhr`

- [x] C.  `XMLHttpRequest`

- [ ] D. `XMLhttpRequest`

2.  `xhr`  对象 open 函数前两个参数作用分别是：

- [ ] A.  地址, 请求方式
   - [ ] B. 请求方式, 请求参数
   - [ ] C. 地址, 请求参数
   - [x] D. 请求方式, 地址

3.  `ajax` 请求 `readyState` 状态值等于 3 的时候代表:  <strong style="color:red">[  4 表示结束, 推测 3 为交互中 ]</strong>

- [ ] A.  请求已完成
   - [ ] B.  请求未初始化
   - [ ] C.  请求刚初始化
   - [x] D.  请求交互中

4. 下列不属于解决跨域问题的方案是：

- [ ] A. ` jsonp`
   - [ ] B. 服务器 `cors`
   - [ ] C. 服务器 代理
   - [x] D. `axios`

5.  判断两个 URL 同源不包括下面哪一个:

- [ ] A.  端口号 
    - [x] B.  路径
    - [ ] C.  协议
    - [ ] D.  域名

6.   下列哪种操作会产生跨域报错 ?

- [ ] A.  在 B 网站使用 `img` 标签去引入 C 网站的图片
    - [ ] B.  在 B 网站使用 `script` 标签去引入 C 网站的 js文件
    - [x] C.  在 B 网站使用 `xhr` 对象去请求 C 网站的接口
    - [ ] D. 在 B 网站向 C 网站发送 `jsonp` 请求

7. 下面哪个不属于 `Ajax Level2` 的新特性 ?
   - [ ] A.  上传文件
   - [ ] B.  判断请求超时
   - [x] C.  发起 `JSONP` 请求
   - [ ] D.  提交 `FormData` 格式数据

8.  `ajax` 在上传文件时, 必须把 请求头中的 Content-Type 设置为哪个值 ?
	
	- [ ] A.  `text/plain`
	- [ ] B.  `application/json`
	- [ ] C. `application/x-www-form-urlencoded`
	- [x] D `multipart/form-data`
	
	
	
9.  `Ajax` 最大的好处是什么 ?

- [ ] A.  可以和服务进行进行数据交互
   - [ ] B.  可以实现和 Form 表单提交一样的功能
   - [ ] C.  可以发送跨域请求
   - [x] D. 可以无刷新交互

10.  检查 一个 Ajax 发送 POST 请求的参数信息, 要从控制台哪里去查看 ?
    - [ ] A.  可以从 Network 下的 Response 中查看
    - [x] B.   可以从 Network 下的  Headers 中查看
    - [ ] C.   可以从 Application 下的 Response 中查看
    - [ ] D.   可以从 Application 下的  Headers 中查看

11. (多选) 下列哪些 HTTP 状态码表示 Ajax 请求出错  ?   <strong style="color:red">[  4 xx 以上为报错 ]</strong>

- [x] A.  304
    - [x] B. 404
    - [x] C. 504
    - [ ] D. 204

12.  下列关于 `JSON` 理解错误的是 ?   <strong style="color:red">[ 函数也是对象, 但不能转 json 字符串进行描述 ]</strong>

- [ ] A.  `json` 本质上是一个字符串
    - [ ] B. ` json` 中不允许出现函数
    - [x] C.  任意对象都可以转成 `json` 字符串
    - [ ] D. `json` 字符串一定可以转成对象或数组

13.  关于模板引擎的描述错误的是 ?   <strong style="color:red">[  接受的参数为 模板 id 和 数据对象, 错误明显 ]</strong>
	
	- [ ] A.  模板引擎的原理使用了 正则表达式和替换操作
	- [ ] B.  模板引擎中定义的模板必须包含 `type = "text/html"` 属性
	- [ ] C.  模板引擎可以实现任意数据渲染到页面
	- [x] D.  模板引擎中 `template` 方法接受模板的 id 值和回调函数作为参数
	
	
	
14. 使用 `art-template ` 去渲染数组结构的数据时,  下列正确的是 ?

- [ ] A.  `{{ for 数组 }}  ----   $value   ----   {{/ for}}`
    - [ ] B.  `{{ each 数组 }}  ---- $value   ----   {{ each }}`
    - [x] C. `{{ each 数组 }}  ---- {{ $value }} --- {{ /each }}`
    - [ ] D. `{{ each 数组 }}  ---- ( $value ) --- {{ /each }}`

15. (多选) 关于 get 请求和 post 的请求区别描述正确的有?

- [x] A.  post 请求比 get 更安全, 因为 post 参数不放在 `url` 上
    - [x] B. 只有 post 方式的接口才可以实现大型文件上传
    - [ ] C. post 方式的请求只能发送数据, 不能获取数据
    - [x] D.  get 请求发送的数据最终一定会自动编码添加到 url 后面

16. (多选) `$.ajax()` 方法实现文件上传必须要添加的参数是什么 ?
	
	- [ ] A.  `dataType`
	- [ ] B.  `dataProcess`
	- [x] C.  `contentType`
	- [x] D.  `processData`

17.  下列关于 `FormData` 对象描述错误的是 ?

- [ ] A.  使用 new 关键字可以新建一个 `formdata` 对象
    - [ ] B. 向  `formData` 中添加数据使用 append() 方法
    - [ ] C.   `formData` 中支持添加 文件类型的数据
    - [x] D.  `formData` 对象添加好数据后, 不能直接用于发送

18.   (多选) `Form` 表单元素上的常用方法正确的有 ?   <strong style="color:red">[  reset 方法由原生 form 表单调用 ]</strong>

- [x] A.  `serialize()` 可以快速获取表单上所有的数据
    - [x] B. `new FormData()`  方法可以快速获取表单上所有的数据, 且结果为 `formdata` 对象的格式
    - [ ] C. `reset` 方法可以快速清空表单内容, 只能由 `jquery` 表单元素调用
    - [x] D. `input` 表单项的 `name` 属性要根据发送 `ajax` 请求的参数名来定, 不能随意取值

19.  关于使用 `axios` 请求库的表述, 错误的是 ?   <strong style="color:red">[ res.data 才是服务器真实返回的数据 ]</strong>
    - [ ] A.  `axios` 的回调函数在 `then` 方法中
    - [ ] B.  `axios` 中的拦截器可以拦截所有的 `ajax` 请求
    - [x] C.  `axios` 发送请求成功的回调函数中, res 形参的值表示服务器真实响应的数据
    - [ ] D.  `axios.post()` 和 `axios.get()` 方法都可以接受查询字符串形式的请求参数

## 二、简答题

1. 简要描述出 `JSONP` 实现跨域的原理 ? 以及它为什么不属于 Ajax 请求 ?

```text
   (1问) ajax请求受同源策略影响，不允许进行跨域请求，而script标签src属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。
   
   (2问) 因为底层并没有使用 XMLHttpRequest 对象来发送请求
   ```

2. 说出防抖和节流在事件频繁触发下的作用 ? 以及它们各自的使用场景 ?

```text
   (1问) 防抖在频繁触发事件的情况下, 只有最后一次生效; 节流则是在单位时间内生效一次
   (2问) 防抖用在 "搜索框输入内容中", 核心是关闭和开启定时器; 节流用来 "鼠标不断触发移动事件中", 核心是节流阀的关闭和开启
   ```

3. 写出对象或数组进行序列化 和 反序列化的两个方法 ?

```js
   var json = JSON.stringify({a: 1, b: 2})
   
   var obj = JSON.parse(json)
   ```

## 三、代码题  <strong style="color:red">[ 时间不够, 就放弃代码题 ]</strong>

1. 使用原生 `XMLHttpRequest` 的四个步骤, 完成获取图书接口的请求,  并打印出服务器响应的结果

```js
   // 1. 实例化 xhr 对象: new
   var xhr = new XMLHttpRequest()
   
   // 2. 初始化请求: open
   xhr.open( 'GET',  'http://www.liulongbin.top:3006/api/getbooks')
   
   // 3. 发送请求: send
   xhr.send()
   
   // 4. 监听请求: change
   xhr.onreadystatechange = function () {
       // 判断请求是否响应成功
       if (xhr.readyState == 4 && xhr.status == 200) {
           console.log(JSON.parse(xhr.responseText)) // 对象
       }
   }
   ```

2.  使用 `jQuery` 完成文件上传的核心代码, 打印出上传成功的返回值即可  <strong style="color:red">[ 预计时间不够, 就放弃这题 ]</strong>

```html
<form action="">
    
    <input type="file" id="file" name="file" />

<input type="submit" value="开始上传" id="upload-btn" />
</form>
```

```js
$('form').on('submit', function (e) {
    e.preventDefault()

$.ajax({
        url: 'http://www.liulongbin.top:3006/api/upload/avatar',
        method: 'post',
        data: new FormData(this),
        contentType: false,
        processData: false,
        success: function (res) {
            console.log(res)
        },
    })
})
```

HobartHan/Ajax-exercise

简介

发行版

贡献者

近期动态

HobartHan/Ajax-exercise .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

HobartHan/Ajax-exercise