七、Ajax模块
基础部分
1. ajax是什么？
- [ ] Ajax并不算是一种新的技术，全称是asychronous javascript and xml，可以说是已有技术的组合，主要用来实现客户端与服务器端的异步通信效果，实现页面的局部刷新，早期的浏览器并不能原生支持ajax，可以使用隐藏帧（iframe）方式变相实现异步效果，后来的浏览器提供了对ajax的原生支持
使用ajax原生方式发送请求主要通过XMLHttpRequest(标准浏览器)、ActiveXObject(IE浏览器)对象实现异步通信效果
2. 同步和异步执行代码的区别？
- [ ] 同步：阻塞的
=张三叫李四去吃饭，李四一直忙得不停，张三一直等着，直到李四忙完两个人一块去吃饭
=浏览器向服务器请求数据，服务器比较忙，浏览器一直等着（页面白屏），直到服务器返回数据，浏览器才能显示页面
异步：非阻塞的
=张三叫李四去吃饭，李四在忙，张三说了一声然后自己就去吃饭了，李四忙完后自己去吃
=浏览器向服务器请求数据，服务器比较忙，浏览器可以自如的干原来的事情（显示页面），服务器返回数据的时候通知浏览器一声，浏览器把返回的数据再渲染到页面，局部更新
3. 页面编码和被请求的资源编码不一样如何处理？
- [ ] 对于ajax请求传递的参数，如果是get请求方式，参数如果传递中文，在有些浏览器会乱码，不同的浏览器对参数编码的处理方式不同，所以对于get请求的参数需要使用 encodeURIComponent函数对参数进行编码处理，后台开发语言都有相应的解码api。对于post请求不需要进行编码
4. 简述ajax的过程？
- [ ] 1. 创建XMLHttpRequest对象,也就是创建一个异步调用对象
2. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
3. 设置响应HTTP请求状态变化的函数
4. 发送HTTP请求
5. 获取异步调用返回的数据
6. 使用JavaScript和DOM实现局部刷新
5. 请解释一下JavaScript的同源策略？
- [ ] 同源策略在什么情况下会起作用呢？ 当web 页面使用多个<iframe>元素或者打开其他浏览器窗口的时候，这一策略就 会起作用。
同源策略的含义： 脚本只能读取和所属文档来源相同的窗口和文档的属性。 这里就涉及到了一个浏览器如何判断两者是否同源以及如何判断脚本来源的问题。
注意一点：脚本本身的来源并不作为判断是否同源的依据，而是将脚本所属文档的来源 作为判断依据。
1. 判断脚本来源 例如：文档 A中通过 script 的 src引用了一个外部脚本，这个脚本是 google 提供的，也是从google 的主机上加载到文档 A中的，那么这个脚本的所属文档是谁呢， 答案是文档A。
2. 判断是否同源 理解了脚本来源，接着理解怎么判断是否同源：如果两个文档在协议、主机以 及载入文档的 URL端口这三点中有一点不同，就认为他们不同源。
6. get和post的区别？
- [ ] GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符，有的浏览器是8000个字符
POST：一般用于修改服务器上的资源，对所发送的信息没有限制
在以下情况中，请使用 POST 请求：
1. 无法使用缓存文件（更新服务器上的文件或数据库）
2. 向服务器发送大量数据（POST 没有数据量限制）
3. 发送包含未知字符的用户输入时，POST 比GET 更稳定也更可靠
7. 解释jsonp的原理？
- [ ] Jsonp并不是一种数据格式，而json是一种数据格式，jsonp是用来解决跨域获取数据的一种解决方案，具体是通过动态创建script标签，然后通过标签的src属性获取js文件中的js脚本，该脚本的内容是一个函数调用，参数就是服务器返回的数据，为了处理这些返回的数据，需要事先在页面定义好回调函数，本质上使用的并不是ajax技术
8. ajax请求时如何解释json数据？
- [ ] 使用eval() 或者JSON.parse() 鉴于安全性考虑，推荐使用JSON.parse()更靠谱，对数据的安全性更好。
9. HTTP状态码都有哪些？
- [ ] 100 => 正在初始化（一般是看不到的）
101 => 正在切换协议（websocket浏览器提供的）
200或者以2开头的两位数 => 都是代表响应主体的内容已经成功返回了
202 => 表示接受
301 => 永久重定向/永久转移
302 => 临时重定向/临时转移（一般用来做服务器负载均衡）
304 => 本次获取的内容是读取缓存中的数据，会每次去服务器校验
400 => 参数出现错误（客户端传递给服务器端的参数出现错误）
401 => 未认证，没有登录网站
403 => 禁止访问，没有权限
404 => 客户端访问的地址不存在
500 => 未知的服务器错误
503 => 服务器超负荷（假设一台服务器只能承受10000人，当第10001人访问的时候，如果服务器没有做负载均衡，那么这个人的网络状态码就是503）
实际工作部分
1. 浏览器渲染页面的过程
- [ ] 浏览器会把HTML、SVG、XHTML三种格式的文件会产生一个DOM树；
Css，解析css会产生css规则树JavaScript会通过DOM apI 来操作DOM树 和 css规则树
2. 简单描述下同步和异步的区别，并举例实际应用中哪些是同步，哪些是异步？
- [ ] 同步是阻塞的，浏览器向服务器发送请求，服务器比较忙，浏览器一直等着（页面白屏），直到服务器返回数据，页面才可以正常显示；
异步是非阻塞的，浏览器向服务器请求数据，服务器比较忙，浏览器可以干自己原来的事情（显示页面），服务器返回数据的时候通知浏览器一声，浏览器把返回的数据再渲染到页面，局部更新。
3. 简述AJAX的工作原理
- [ ] Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。
XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。
4. jsonp是如何实现前后数据交互？
- [ ] ajax请求受同源策略的影响，不允许进行跨域请求，而script标签的src属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不在返回json格式的数据，而是返回调用某个函数的js代码，在src中进行了调用，这样就实现了跨域，其原理就是动态创建script标签，通过script标签的src属性进行调用
5. 你知道的HTTP 请求方式有几种？
- [ ] HTTPRequestMethod共计17种
1. GET 请求指定的页面信息，并返回实体主体。
2. HEAD 类似于get请求，只不过返回的响应中没有具体的内容，用于获取报头
3. POST 向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资源的修改。
4. PUT 从客户端向服务器传送的数据取代指定的文档的内容。
5. DELETE 请求服务器删除指定的页面。
6. CONNECT HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。
7. OPTIONS 允许客户端查看服务器的性能。
8. TRACE 回显服务器收到的请求，主要用于测试或诊断。
9. PATCH 实体中包含一个表，表中说明与该URI所表示的原内容的区别。
10. MOVE 请求服务器将指定的页面移至另一个网络地址。
11. COPY 请求服务器将指定的页面拷贝至另一个网络地址。
12. LINK 请求服务器建立链接关系。
13. UNLINK 断开链接关系。
14. WRAPPED 允许客户端发送经过封装的请求。
15. LOCK 允许用户锁定资源，比如可以再编辑某个资源时将其锁定，以防别人同时对其进行编辑。
16. MKCOL 允许用户创建资源
17. Extension-mothed 在不改动协议的前提下，可增加另外的方法。
网友评论