ajax&&node

时间 2019-11-06

标签 ajax&&node ajax node 栏目 Ajax 繁體版

原文原文链接

1.Ajax 是什么? 如何建立一个Ajax？

ajax的全称：Asynchronous Javascript And XML。异步传输+js+xml。
所谓异步，在这里简单地解释就是：向服务器发送请求的时候，咱们没必要等待结果，而是能够同时作其余的事情，等到有告终果它本身会根据设定进行后续操做，与此同时，页面是不会发生整页刷新的，提升了用户体验
(1)建立XMLHttpRequest对象,也就是建立一个异步调用对象
(2)建立一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
(3)设置响应HTTP请求状态变化的函数
(4)发送HTTP请求
(5)获取异步调用返回的数据
(6)使用JavaScript和DOM实现局部刷新
ajax是一种建立交互式网页的计算javascript

2.同步和异步的区别?

同步的概念应该是来自于OS中关于
同步的概念:不一样进程为协同完成某项工做而在前后次序上调整(经过阻塞,唤醒等方式).同步强调的是顺序性.谁先谁后.异步则不存在这种顺序性.
同步：浏览器访问服务器请求，用户看获得页面刷新，从新发请求,等请求完，页面刷新，新内容出现，用户看到新内容,进行下一步操做。
异步：浏览器访问服务器请求，用户正常操做，浏览器后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容。php

3.如何解决跨域问题?

jsonp、 iframe、window.name、window.postMessage、服务器上设置代理页面
参考：http://qiutc.me/post/cross-do...html

4.http状态码有那些？分别表明是什么意思？

简单版
            [
                        100 Continue   继续，通常在发送post请求时，已发送了http header以后服务端将返回此信息，表示确认，以后发送具体参数信息
                        200 OK         正常返回信息
                        201 Created    请求成功而且服务器建立了新的资源
                        202 Accepted   服务器已接受请求，但还没有处理
                        301 Moved Permanently 请求的网页已永久移动到新位置。
                        302 Found       临时性重定向。
                        303 See Other   临时性重定向，且老是使用 GET 请求新的 URI。
                        304 Not Modified 自从上次请求后，请求的网页未修改过。

                        400 Bad Request 服务器没法理解请求的格式，客户端不该当尝试再次使用相同的内容发起请求。
                        401 Unauthorized 请求未受权。
                        403 Forbidden   禁止访问。
                        404 Not Found   找不到如何与 URI 相匹配的资源。

                        500 Internal Server Error 最多见的服务器端错误。
                        503 Service Unavailable 服务器端暂时没法处理请求（多是过载或维护）。
            ]前端

5.请解释 JSONP 的工做原理，以及它为何不是真正的 AJAX。

jsonp的工做原理是，动态的建立了一个全局方法，而且动态生成script标签，将script标签的src属性变为（接口地址?callback=动态生成方法的方法名）请求数据，然后台则须要将接收到的callback值与数据一同返回，呈现出执行js方法的语句（方法名(数据)），其实就是在请求回来的数据中是执行请求是动态生成的js方法，生成了假象的ajax，因此jsonp只能作get类型请求html5

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

同源策略是客户端脚本（尤为是Javascript）的重要的安全度量标准。它最先出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不一样源装载。
它的精髓很简单：它认为自任何站点装载的信赖内容是不安全的。当被浏览器半信半疑的脚本运行在沙箱时，它们应该只被容许访问来自同一站点的资源，而不是那些来自其它站点可能怀有恶意的资源。
这里的同源指的是：同协议，同域名和同端口java

7.为何要有同源限制？

咱们举例说明：好比一个黑客程序，他利用IFrame把真正的银行登陆页面嵌到他的页面上，当你使用真实的用户名，密码登陆时，他的页面就能够经过Javascript读取到你的表单中input中的内容，这样用户名，密码就轻松到手了。node

8.建立ajax过程

(1)建立XMLHttpRequest对象,也就是建立一个异步调用对象.
(2)建立一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
(3)设置响应HTTP请求状态变化的函数.
(4)发送HTTP请求.
(5)获取异步调用返回的数据.
(6)使用JavaScript和DOM实现局部刷新.c++

var xmlHttp = new XMLHttpRequest(); 
xmlHttp.open('GET','demo.php','true'); 
xmlHttp.send() 
xmlHttp.onreadystatechange = function(){ 
     if(xmlHttp.readyState === 4 & xmlHttp.status === 200){ 
     } 
}

9.常见web安全及防御原理

sql注入原理

就是经过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。
总的来讲有如下几点：
1）永远不要信任用户的输入，要对用户的输入进行校验，能够经过正则表达式，或限制长度，对单引号和双"-"进行转换等。
2）永远不要使用动态拼装SQL，可使用参数化的SQL或者直接使用存储过程进行数据查询存取。
3）永远不要使用管理员权限的数据库链接，为每一个应用使用单独的权限有限的数据库链接。
4）不要把机密信息明文存放，请加密或者hash掉密码和敏感的信息。
git

XSS原理及防范

Xss(cross-site scripting)攻击指的是攻击者往Web页面里插入恶意 html标签或者javascript代码。好比：攻击者在论坛中放一个看似安全的连接，骗取用户点击后，窃取cookie中的用户私密信息；或者攻击者在论坛中加一个恶意表单当用户提交表单的时候，却把信息传送到攻击者的服务器中，而不是用户本来觉得的信任站点。
程序员

XSS防范方法

首先代码里对用户输入的地方和变量都须要仔细检查长度和对”<”,”>”,”;”,”’”等字符作过滤；其次任何内容写到页面以前都必须加以encode，避免不当心把html tag 弄出来。这一个层面作好，至少能够堵住超过一半的XSS 攻击。首先，避免直接在cookie 中泄露用户隐私，例如email、密码等等。其次，经过使cookie 和系统ip 绑定来下降cookie 泄露后的危险。这样攻击者获得的cookie 没有实际价值，不可能拿来重放。若是网站不须要再浏览器端对cookie 进行操做，能够在Set-Cookie 末尾加上HttpOnly 来防止javascript 代码直接获取cookie 。尽可能采用POST 而非GET 提交表单

10.XSS与CSRF有什么区别吗？

XSS是获取信息，不须要提早知道其余用户页面的代码和数据包。CSRF是代替用户完成指定的动做，须要知道其余用户页面的代码和数据包。
要完成一次CSRF攻击，受害者必须依次完成两个步骤：
登陆受信任网站A，并在本地生成Cookie。
在不登出A的状况下，访问危险网站B。
CSRF的防护
服务端的CSRF方式方法不少样，但总的思想都是一致的，就是在客户端页面增长伪随机数。
经过验证码的方法
11.HTTP和HTTPS
HTTP协议一般承载于TCP协议之上，在HTTP和TCP之间添加一个安全协议层（SSL或TSL），这个时候，就成了咱们常说的HTTPS。
默认HTTP的端口号为80，HTTPS的端口号为443。
HTTPS和HTTP的区别主要以下：
1）https协议须要到ca申请证书，通常免费证书较少，于是须要必定费用。
2）http是超文本传输协议，信息是明文传输，https则是具备安全性的ssl加密传输协议。
3）http和https使用的是彻底不一样的链接方式，用的端口也不同，前者是80，后者是443。
4）http的链接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

12.为何HTTPS安全

由于网络请求须要中间有不少的服务器路由器的转发。中间的节点均可能篡改信息，而若是使用HTTPS，密钥在你和终点站才有。https之因此比http安全，是由于他利用ssl/tls协议传输。它包含证书，卸载，流量转发，负载均衡，页面适配，浏览器适配，refer传递等。保障了传输过程的安全性

13.GET和POST的区别，什么时候使用POST？

GET：通常用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，通常在2000个字符
POST：通常用于修改服务器上的资源，对所发送的信息没有限制。

GET方式须要使用Request.QueryString来取得变量的值，而POST方式经过Request.Form来获取变量的值，也就是说Get是经过地址栏来传值，而Post是经过提交表单来传值。
然而，在如下状况中，请使用 POST 请求：
没法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
14，ajax的缺点和在IE下的问题？
ajax的缺点
   一、ajax不支持浏览器back按钮。
   二、安全问题 AJAX暴露了与服务器交互的细节。
   三、对搜索引擎的支持比较弱。
   四、破坏了程序的异常机制。
   五、不容易调试。
IE缓存问题
在IE浏览器下，若是请求的方法是GET，而且请求的URL不变，那么这个请求的结果就会被缓存。解决这个问题的办法能够经过实时改变请求的URL，只要URL改变，就不会被缓存，能够经过在URL末尾添加上随机的时间戳参数('t'= + new Date().getTime())
或者：
   open('GET','demo.php?rand=+Math.random()',true);//
   Ajax请求的页面历史记录状态问题
   能够经过锚点来记录状态，location.hash。让浏览器记录Ajax请求时页面状态的变化。
   还能够经过HTML5的history.pushState，来实现浏览器地址栏的无刷新改变

15.前端须要注意哪些SEO

合理的title、description、keywords：搜索对着三项的权重逐个减少，title值强调重点便可，重要关键词出现不要超过2次，并且要靠前，不一样页面title要有所不一样；description把页面内容高度归纳，长度合适，不可过度堆砌关键词，不一样页面description有所不一样；keywords列举出重要关键词便可

语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容必定会被抓取
重要内容不要用js输出：爬虫不会执行js获取内容
少用iframe：搜索引擎不会抓取iframe中的内容
非装饰性图片必须加alt
提升网站速度：网站速度是搜索引擎排序的一个重要指标

16.什么是Ajax和JSON，它们的优缺点

Ajax是异步JavaScript和XML，用于在Web页面中实现异步数据交互。

优势：

可使得页面不重载所有内容的状况下加载局部内容，下降数据传输量
避免用户不断刷新或者跳转页面，提升用户体验

缺点：

   对搜索引擎不友好（
   要实现ajax下的先后退功能成本较大
   可能形成请求数的增长
   跨域问题限制
JSON是一种轻量级的数据交换格式，ECMA的一个子集
优势：轻量级、易于人的阅读和编写，便于机器（JavaScript）解析，支持复合数据类型（数组、对象、字符串、数字）

17.AJAX的请求方式？

GET：GET是http的默认请求方式，通常用来获取数据。
HEAD：HEAD方法与GET方法同样，都是向服务器发出指定资源的请求。可是，服务器在响应HEAD请求时不会回传资源的内容部分，即：响应主体。这样，咱们能够不传输所有内容的状况下，就能够获取服务器的响应头信息。HEAD方法常被用于客户端查看服务器的性能。
POST：POST请求会向指定资源提交数据，请求服务器进行处理。如：表单提交、文件上传。
PUT：PUT请求会身向指定资源位置上传其最新内容，经过该方法客户端能够将指定资源的最新数据传送给服务器取代指定的资源的内容。
DELETE：DELETE请求用于请求服务器删除所请求URI所标识的资源。DELETE请求后指定资源会被删除。
TRACE：返回接受到的请求，用来查看数据通过中间服务器时发生了哪些变更。
OPTIONS：OPTIONS请求与HEAD相似，通常也是用于客户端查看服务器的性能。这个方法会请求服务器返回该资源所支持的全部HTTP请求方法，该方法会用'*'来代替资源名称，向服务器发送OPTIONS请求，能够测试服务器功能是否正常。JavaScript的XMLHttpRequest对象进行CORS跨域资源共享时，就是使用OPTIONS方法发送嗅探请求，以判断是否有对指定资源的访问权限。
CONNECT：要求使用SSL和TLS进行TCP通讯。
PATCH：请求修改局部数据

18.RESTful架构

REST是一种架构风格：无状态，以资源为中心，充分利用HTTP协议和URI协议，提供统一的接口定义，使得它做为一种设计Web服务的方法而变得流行。在某种意义上，经过强调URI和HTTP等早期Internet标准，REST是对大型应用程序服务器时代以前的Web方式的回归。

架构约束：

客户-服务器:通讯只能由客户端单方面发起，表现为请求-响应的形式。
无状态:通讯的会话状态（Session State）应该所有由客户端负责维护。
缓存:响应内容能够在通讯链的某处被缓存，以改善网络效率。
统一接口:通讯链的组件之间经过统一的接口相互通讯，以提升交互的可见性。
分层系统:经过限制组件的行为（即，每一个组件只能"看到"与其交互的紧邻层），将架构分解为若干等级的层。
按需代码:支持经过下载并执行一些代码（例如Java Applet、Flash或JavaScript），对客户端的功能进行扩展。

主要特征：

面向资源（Resource Oriented）
可寻址（Addressability）
连通性（Connectedness）
无状态（Statelessness）
统一接口（Uniform Interface）
超文本驱动（Hypertext Driven）

19.cookie 和session 的区别：

1）cookie数据存放在客户的浏览器上，session数据放在服务器上。
2）cookie不是很安全，别人能够分析存放在本地的COOKIE并进行COOKIE欺骗考虑到安全应当使用session。
3）session会在必定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能考虑到减轻服务器性能方面，应当使用COOKIE。
4）单个cookie保存的数据不能超过4K，不少浏览器都限制一个站点最多保存20个cookie。
5）因此通常状况下将登录信息等重要信息存放为SESSION其余信息若是须要保留，能够放在COOKIE中

20.Cookie和localstorage、session storage的区别

Cookie技术浏览器兼容性好，但操做比较复杂，须要程序员本身封装，源生的Cookie接口不友好,存储的内容较小,cookie的数据会随着ajax的请求发送到服务端，通常状况主要用在用户登陆的时候咱们能够经过在 Cookie 中存入一段辨别用户身份的数据，用于后台判断。

WebStorage则不能超过8MB，操做简单；能够代替一些cookie的工做，通常主要是用于存储一些本地数据，购物车数据之类的在安全方面的话，都不安全，通常就是对数据进行一些简单的加密，如base64编码，加密约定之类的东西localstorage、sessionstorage一个是长期存储，一个是会话存储

21.fetch与ajax的区别？

Ajax主要是利用的是XMLHttpRequest对象来请求数据的。

Fetch是window的一个方法

主要特色是

1) 第一个参数是URL
2) 第二个参数可选参数能够控制不一样的init对象
3) 使用了js 中的promise对象

fetch 的第二参数中
1) 默认的请求为get请求可使用method:post 来进行配置
2) 第一步中的 response有许多方法 json() text() formData()
3) Fetch跨域的时候默认不会带cookie ，若是你想在fetch请求里附带cookies之类的凭证信息，能够将 credentials参数设置成 “include” 值。还有就是fetch返回的promise在某些错误的http状态下如400、500等不会reject的错误状态，相反它会被resolve；只有网络错误会致使请求不能完成时，fetch 才会被 reject；因此通常会对fetch请求作一层封装，在resolve中真对于大于200和小于300的状态返回正确信息，其余则返回错误信息全部的IE浏览器都不会支持 fetch()方法

22.浏览器本地存储

在较高版本的浏览器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage来取代globalStorage。
html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问而且当会话结束后数据也随之销毁。所以sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储
而localStorage用于持久化的本地存储，除非主动删除数据，不然数据是永远不会过时的。
23.请你谈谈Cookie的弊端
cookie虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但仍是有不少局限性的。

1，每一个特定的域名下最多生成20个cookie
2，IE6或更低版本最多20个cookie
3，IE7和以后的版本最后能够有50个cookie。
4，Firefox最多50个cookie
5，chrome和Safari没有作硬性限制

IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie。
            cookie的最大大约为4096字节，为了兼容性，通常不能超过4095字节。
            IE 提供了一种存储能够持久化用户数据，叫作userdata，从IE5.0就开始支持。每一个数据最多128K，每一个域名下最多1M。这个持久化数据放在缓存中，若是缓存没有清理，那么会一直存在。

优势：极高的扩展性和可用性
      1）经过良好的编程，控制保存在cookie中的session对象的大小。
      2）经过加密和安全传输技术（SSL），减小cookie被破解的可能性。
      3）只在cookie中存放不敏感数据，即便被盗也不会有重大损失。
      4）控制cookie的生命期，使之不会永远有效。偷盗者极可能拿到一个过时的cookie。
缺点：
      1）Cookie`数量和长度的限制。每一个domain最多只能有20条cookie，每一个cookie长度不能超过4KB，不然会被截掉.
      2）安全性问题。若是cookie被人拦截了，那人就能够取得全部的session信息。即便加密也与事无补，由于拦截者并不须要知道cookie的意义，他只要原样转发cookie就能够达到目的了。
      3）有些状态不可能保存在客户端。例如，为了防止重复提交表单，咱们须要在服务器端保存一个计数器。若是咱们把这个计数器保存在客户端，那么它起不到任何做用。

Node面试题

1. 为何要用node?

参考答案: 总结起来node有如下几个特色:简单强大，轻量可扩展．简单体如今node使用的是javascript,json来进行编码，人人都会；强大致如今非阻塞IO,能够适应分块传输数据，较慢的网络环境，尤为擅长高并发访问；轻量体如今node自己既是代码，又是服务器，先后端使用统一语言;可扩展体如今能够轻松应对多实例，多服务器架构，同时有海量的第三方应用组件．

2. node的构架是什么样子的?

参考答案: 主要分为三层，应用app >> V8及node内置架构 >> 操做系统. V8是node运行的环境，能够理解为node虚拟机．node内置架构又可分为三层: 核心模块(javascript实现) >> c++绑定 >> libuv + CAes + http.

3. node有哪些核心模块?

参考答案: EventEmitter, Stream, FS, Net和全局对象

node全局对象

1. node有哪些全局对象?

参考答案: process, console, Buffer和exports

2. process有哪些经常使用方法?

参考答案: process.stdin, process.stdout, process.stderr, process.on, process.env, process.argv, process.arch, process.platform, process.exit

3. console有哪些经常使用方法?

参考答案: console.log/console.info, console.error/console.warning, console.time/console.timeEnd, console.trace, console.table

4. node有哪些定时功能?

参考答案: setTimeout/clearTimeout, setInterval/clearInterval, setImmediate/clearImmediate, process.nextTick

node中的事件循环是什么样子的?

整体上执行顺序是：process.nextTick >> setImmidate >> setTimeout/SetInterval 看官网吧：https://github.com/nodejs/nod...

node中的Buffer如何应用?

参考答案: Buffer是用来处理二进制数据的，好比图片，mp3,数据库文件等.Buffer支持各类编码解码，二进制字符串互转．

文件系统

1. 内置的fs模块架构是什么样子的?

参考答案: fs模块主要由下面几部分组成:
1) POSIX文件Wrapper,对应于操做系统的原生文件操做
2) 文件流 fs.createReadStream和fs.createWriteStream
3) 同步文件读写,fs.readFileSync和fs.writeFileSync
4) 异步文件读写, fs.readFile和fs.writeFile

2. 读写一个文件有多少种方法?

参考答案: 整体来讲有四种:
1) POSIX式低层读写
2) 流式读写
3) 同步文件读写
4) 异步文件读写

3. 怎么读取json配置文件?

参考答案: 主要有两种方式，
第一种是利用node内置的require('data.json')机制，直接获得js对象;
第二种是读入文件入内容，而后用JSON.parse(content)转换成js对象．
两者的区别是require机制状况下，若是多个模块都加载了同一个json文件，那么其中一个改变了js对象，其它跟着改变，这是由node模块的缓存机制形成的，只有一个js模块对象; 第二种方式则能够随意改变加载后的js变量，并且各模块互不影响，由于他们都是独立的，是多个js对象.

4. fs.watch和fs.watchFile有什么区别，怎么应用?

参考答案: 两者主要用来监听文件变更．fs.watch利用操做系统原生机制来监听，可能不适用网络文件系统; fs.watchFile则是按期检查文件状态变动，适用于网络文件系统，可是相比fs.watch有些慢，由于不是实时机制．

网络

1. node的网络模块架构是什么样子的?

参考答案: node全面支持各类网络服务器和客户端，包括tcp, http/https, tcp, udp, dns, tls/ssl等.

2. node是怎样支持https,tls的?

参考答案: 主要实现如下几个步骤便可:
1) openssl生成公钥私钥
2) 服务器或客户端使用https替代http
3) 服务器或客户端加载公钥私钥证书

3. 实现一个简单的http服务器?(必须会手写)

参考答案: 经典又很没毛意义的一个题目．思路是加载http模块，建立服务器，监听端口.

代码演示

var http = require('http'); // 加载http模块 
 
    http.createServer(function(req, res) { 
        res.writeHead(200, {'Content-Type': 'text/html'}); // 200表明状态成功, 文档类型是给浏览器识别用的 
        res.write('<meta charset="UTF-8"><h1>我是标题啊！</h1><font color="red">这么原生，初级的服务器，下辈子能用着吗?!</font>'); // 返回给客户端的html数据 
        res.end(); // 结束输出流 
    }).listen(3000); // 绑定3ooo, 查看效果请访问 http://localhost:3000