admin管理员组文章数量:1530921
JS交互 问题汇总
1.JS中能够实现跟服务器后台交互的手段有哪些?
Asynchronous Javascript And XML js的异步请求对象script标签的src属性location.href,assign replace,window.open(),background-image:url(""),form表单,超链接 跳转到服务器程序,img 的src属性,video和audio 的src属性,link的href,iframe(了解)
form表单交互数据时的缺点:会默认有跳转效果,一旦数据量比较多 多次交互 就会出现频繁来回跳转情况。form表单提交数据时是同步请求 form表单不请求完 后面不执行；所以我们需要一种 请求数据时 页面不刷新 并且是异步请求的一种方式，所以ajax应运而生!!!
- 利用cookie
eg：前台通过登录来存储cookie
后台通过req.cookies（）来获取存储的cookie信息 - 利用Ajax
在学习NodeJS之前最常用的前后端交互大都利用ajax 和JQuery中已经封装好的$.ajax、$.post、$.getJSON通过创建一个XMLHttpRequest对象，来进行前后端交互。
在学NodeJS之后我们也利用依赖于$http服务自己搭建的_http来完成get、post和jsonp的方式来进行前后端交互； - jsonp
jsonp是前后端结合跨域方式，因为前段请求到数据需要在回调函数中使用，所以后端得将数据放回到回调函数中,jsonp属于AJAX吗？ ajax是指通过使用xmlhttpquest对象进行异步数据交互的技术，jsonp是依靠scriptsrc属性来获取的，不属于ajax; - 服务端渲染
浏览器请求到的内容其实可以通过后端加工一下,将一会数据直接渲染好，再给浏览器就可以了.
在php中实现服务端渲染：
在php文件中可以放入html代码，访问php文件的时候就相当于访问这个对应的html文件，因为在php文件中，所以可以写一些php的代码来渲染数据
在Node中实现服务端渲染：
利用模板引擎，node在渲染模板的时候给模板传入数据，在模板中就可以使用特定的语法来渲染dom了 例如：ejs,jade
注意：express里的路由是靠请求路径划分的，前一个自己搭的路由是根据请求类型划分的。
2.你是怎么理解web容器的?(wampserver)
Web容器 : 是一个用来搭建动态网站或者服务器的开源软件， 能够把指定文件夹暴露给外部访问，其他人通过域名/IP地址 能够访问到这个文件夹里面的内容。
常见的web容器:
- tomcat(tom猫)----
java - IIS----
.NET - Apache----
PHP
我们要安装的软件是:wampserver(一键集成环境)
wamp:windows apache mysql php
3.为什么要学习ajax?优点是什么?
Ajax的特点： 异步请求，局部刷新
Ajax的优点：
- Ajax解决了传统网页开发时，使用超链接或form表单提交与服务器交互，导致页面频繁刷新的问题，提高了易用性。
- ajax的异步请求解决了服务器未响应时，网页白屏的问题。
- 服务器的返回结果可以为html、json、xml，程序中可以直接解析，并局部刷新网页，提高网页的加载速度。
- 通过异步模式，提升了用户体验；
- 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用；
- Ajax 引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。
4.JS原生ajax的五步骤是哪些?
- 构建异步请求对象：
XMLHttpRequest，我们的ajax对象的构造函数名字； - 调用open方法 传入服务器链接地址以及请求方式等参数；
- 调用send发送网络请求；
- 注册状态改变事件
onreadystatechange； - 在事件驱动函数里面 获取返回的数据 进行页面刷新。
var btn=document.getElementsByTagName("button")[0];
btn.onclick=function () {
// 1.构建异步请求对象
var ajaxObj=new XMLHttpRequest();
// 2.调用open方法 传入服务器链接地址以及请求方式等参数
// ajaxObj.open("get","url");
ajaxObj.open("get","url");
// 3.调用send发送网络请求
ajaxObj.send();
// 4.注册状态改变事件
ajaxObj.onreadystatechange=function () {
//5.在事件驱动函数里面 获取返回的数据 进行页面刷新
// console.log("请求数据啦!!!");
// console.log(ajaxObj.readyState);
if(ajaxObj.readyState===4 && ajaxObj.status==200){
// console.log("设置页面");
console.log(ajaxObj.responseText);
}else if(ajaxObj.readyState===4){
console.log("错误啦....");
}
}
}
5.原生ajax对象的readyState属性五种状态分别是什么?
每当ajax对象的readyState属性值发生变化时，都会触发onreadystatechange事件，
readyState 我们发现触发了3次(有的同学电脑触发2次 不纠结)，为4的那一次是返回数据的状态 需要判断。
一、常见Ajax错误分析 问题:
0: (Uninitialized) the send( ) method has not yet been invoked.
1: (Loading) the send( ) method has been invoked, request in progress.
2: (Loaded) the send( ) method has completed, entire response received.
3: (Interactive) the response is being parsed.
4: (Completed) the response has been parsed, is ready for harvesting.
解析:
0 － （未初始化）还没有调用send()方法；
1 － （载入）已调用send()方法，正在发送请求；
2 －（载入完成）send()方法执行完成，已经接收到全部响应内容；
3 －（交互）正在解析响应内容；
4 －（完成）响应内容解析完成，可以在客户端调用了；
6.常见的响应码有哪些?分别代表什么意思?
所谓的状态码就是服务器返回的状态一个标识:
404 表示资源没找到 没有发现文件、查询或URl；
200 表示响应成功；
500 表示服务器内部报错；
-
消息1XX:
这一类型的状态码，代表请求已被接受，需要继续处理。这类响应是临时响应，只包含状态行和某些可选的响应头信息，并以空行结束。由于 HTTP/1.0 协议中没有定义任何 1xx 状态码，所以除非在某些试验条件下，服务器禁止向此类客户端发送 1xx 响应。100 Continue 服务器仅接收到部分请求，但是一旦服务器并没有拒绝该请求，客户端应该继续发送其余的请求 101 Switching Protocols 服务器已经理解了客户端的请求，并将通过Upgrade 消息头通知客户端采用不同的协议来完成这个请求。 在发送完这个响应最后的空行后，服务器将会切换到在Upgrade 消息头中定义的那些协议。 102 Processing 由WebDAV（RFC 2518）扩展的状态码，代表处理将被继续执行 -
成功2XX:
这一类型的状态码，代表请求已成功被服务器接收、理解、并接受。200 OK 请求已成功，请求所希望的响应头或数据体将随此响应返回。出现此状态码是表示正常状态。 201 Created 请求已经被实现，而且有一个新的资源已经依据请求的需要而建立，且其 URI 已经随Location 头信息返回。假如需要的资源无法及时建立的话，应当返回 '202 Accepted'。 202 Accepted 服务器已接受请求，但尚未处理。正如它可能被拒绝一样，最终该请求可能会也可能不会被执行。在异步操作的场合下，没有比发送这个状态码更方便的做法了。 返回202状态码的响应的目的是允许服务器接受其他过程的请求（例如某个每天只执行一次的基于批处理的操作），而不必让客户端一直保持与服务器的连接直到批处理操作全部完成。在接受请求处理并返回202状态码的响应应当在返回的实体中包含一些指示处理当前状态的信息， 以及指向处理状态监视器或状态预测的指针，以便用户能够估计操作是否已经完成。 203 Non-Authoritative Information 服务器已成功处理了请求，但返回的实体头部元信息不是在原始服务器上有效的确定集合，而是来自本地或者第三方的拷贝。当前的信息可能是原始版本的子集或者超集。例如，包含资源的元数据可能导致原始服务器知道元信息的超集。使用此状态码不是必须的，而且只有在响应不使用此状态码便会返回200 OK的情况下才是合适的。 204 No Content 服务器成功处理了请求，但不需要返回任何实体内容，并且希望返回更新了的元信息。响应可能通过实体头部的形式，返回新的或更新后的元信息。如果存在这些头部信息，则应当与所请求的变量相呼应。 如果客户端是浏览器的话，那么用户浏览器应保留发送了该请求的页面，而不产生任何文档视图上的变化，即使按照规范新的或更新后的元信息应当被应用到用户浏览器活动视图中的文档。 由于204响应被禁止包含任何消息体，因此它始终以消息头后的第一个空行结尾。 205 Reset Content 服务器成功处理了请求，且没有返回任何内容。但是与204响应不同，返回此状态码的响应要求请求者重置文档视图。该响应主要是被用于接受用户输入后，立即重置表单，以便用户能够轻松地开始另一次输入。 与204响应一样，该响应也被禁止包含任何消息体，且以消息头后的第一个空行结束。 206 Partial Content 服务器已经成功处理了部分 GET 请求。类似于 FlashGet 或者迅雷这类的 HTTP下载工具都是使用此类响应实现断点续传或者将一个大文档分解为多个下载段同时下载。 该请求必须包含 Range 头信息来指示客户端希望得到的内容范围，并且可能包含 If-Range 来作为请求条件。 响应必须包含如下的头部域： Content-Range 用以指示本次响应中返回的内容的范围；如果是 Content-Type 为 multipart/byteranges 的多段下载，则每一 multipart 段中都应包含 Content-Range 域用以指示本段的内容范围。假如响应中包含 Content-Length，那么它的数值必须匹配它返回的内容范围的真实字节数。 Date ETag 和/或 Content-Location，假如同样的请求本应该返回200响应。 Expires, Cache-Control，和/或 Vary，假如其值可能与之前相同变量的其他响应对应的值不同的话。 假如本响应请求使用了 If-Range 强缓存验证，那么本次响应不应该包含其他实体头；假如本响应的请求使用了 If-Range 弱缓存验证，那么本次响应禁止包含其他实体头；这避免了缓存的实体内容和更新了的实体头信息之间的不一致。否则，本响应就应当包含所有本应该返回200响应中应当返回的所有实体头部域。 假如 ETag 或 Last-Modified 头部不能精确匹配的话，则客户端缓存应禁止将206响应返回的内容与之前任何缓存过的内容组合在一起。 207 Multi-Status 由WebDAV(RFC 2518)扩展的状态码，代表之后的消息体将是一个XML消息，并且可能依照之前子请求数量的不同，包含一系列独立的响应代码。 -
重定向3XX:
这类状态码代表需要客户端采取进一步的操作才能完成请求。通常，这些状态码用来重定向，后续的请求地址（重定向目标）在本次响应的 Location 域中指明。
当且仅当后续的请求所使用的方法是 GET 或者 HEAD 时，用户浏览器才可以在没有用户介入的情况下自动提交所需要的后续请求。客户端应当自动监测无限循环重定向（例如：A->A，或者A->B->C->A），因为这会导致服务器和客户端大量不必要的资源消耗。按照 HTTP/1.0 版规范的建议，浏览器不应自动访问超过5次的重定向。300 Multiple Choices 被请求的资源有一系列可供选择的回馈信息，每个都有自己特定的地址和浏览器驱动的商议信息。用户或浏览器能够自行选择一个首选的地址进行重定向。 除非这是一个 HEAD 请求，否则该响应应当包括一个资源特性及地址的列表的实体，以便用户或浏览器从中选择最合适的重定向地址。这个实体的格式由 Content-Type 定义的格式所决定。浏览器可能根据响应的格式以及浏览器自身能力，自动作出最合适的选择。当然，RFC 2616规范并没有规定这样的自动选择该如何进行。 如果服务器本身已经有了首选的回馈选择，那么在 Location 中应当指明这个回馈的 URI；浏览器可能会将这个 Location 值作为自动重定向的地址。此外，除非额外指定，否则这个响应也是可缓存的。 301 Moved Permanently 被请求的资源已永久移动到新位置，并且将来任何对此资源的引用都应该使用本响应返回的若干个 URI 之一。如果可能，拥有链接编辑功能的客户端应当自动把请求的地址修改为从服务器反馈回来的地址。除非额外指定，否则这个响应也是可缓存的。 新的永久性的URI 应当在响应的 Location 域中返回。除非这是一个 HEAD 请求，否则响应的实体中应当包含指向新的 URI 的超链接及简短说明。 如果这不是一个 GET 或者 HEAD 请求，因此浏览器禁止自动进行重定向，除非得到用户的确认，因为请求的条件可能因此发生变化。 注意：对于某些使用 HTTP/1.0 协议的浏览器，当它们发送的 POST 请求得到了一个301响应的话，接下来的重定向请求将会变成 GET 方式。 302 Move Temporarily 请求的资源临时从不同的 URI响应请求。由于这样的重定向是临时的，客户端应当继续向原有地址发送以后的请求。只有在Cache-Control或Expires中进行了指定的情况下，这个响应才是可缓存的。 上文有提及。 如果这不是一个 GET 或者 HEAD 请求，那么浏览器禁止自动进行重定向，除非得到用户的确认，因为请求的条件可能因此发生变化。 注意：虽然RFC 1945和RFC 2068规范不允许客户端在重定向时改变请求的方法，但是很多现存的浏览器将302响应视作为303响应，并且使用 GET 方式访问在 Location 中规定的 URI，而无视原先请求的方法。状态码303和307被添加了进来，用以明确服务器期待客户端进行何种反应。 303 See Other 对应当前请求的响应可以在另一个 URL 上被找到，而且客户端应当采用 GET 的方式访问那个资源。这个方法的存在主要是为了允许由脚本激活的POST请求输出重定向到一个新的资源。这个新的 URI 不是原始资源的替代引用。同时，303响应禁止被缓存。当然，第二个请求（重定向）可能被缓存。 注意：许多 HTTP/1.1 版以前的浏览器不能正确理解303状态。如果需要考虑与这些浏览器之间的互动，302状态码应该可以胜任，因为大多数的浏览器处理302响应时的方式恰恰就是上述规范要求客户端处理303响应时应当做的。 304 Not Modified 如果客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个状态码。304响应禁止包含消息体，因此始终以消息头后的第一个空行结尾。 该响应必须包含以下的头信息： Date，除非这个服务器没有时钟。假如没有时钟的服务器也遵守这些规则，那么代理服务器以及客户端可以自行将 Date 字段添加到接收到的响应头中去（正如RFC 2068中规定的一样），缓存机制将会正常工作。 ETag 和/或 Content-Location，假如同样的请求本应返回200响应。 Expires, Cache-Control，和/或Vary，假如其值可能与之前相同变量的其他响应对应的值不同的话。 假如本响应请求使用了强缓存验证，那么本次响应不应该包含其他实体头；否则（例如，某个带条件的 GET 请求使用了弱缓存验证），本次响应禁止包含其他实体头 这避免了缓存了的实体内容和更新了的实体头信息之间的不一致。 假如某个304响应指明了当前某个实体没有缓存，那么缓存系统必须忽视这个响应，并且重复发送不包含限制条件的请求。 假如接收到一个要求更新某个缓存条目的304响应，那么缓存系统必须更新整个条目以反映所有在响应中被更新的字段的值。 305 Use Proxy 被请求的资源必须通过指定的代理才能被访问。Location 域中将给出指定的代理所在的 URI 信息，接收者需要重复发送一个单独的请求，通过这个代理才能访问相应资源。只有原始服务器才能建立305响应。 注意：RFC 2068中没有明确305响应是为了重定向一个单独的请求，而且只能被原始服务器建立。忽视这些限制可能导致严重的安全后果。 306 Switch Proxy 在最新版的规范中，306状态码已经不再被使用。 307 Temporary Redirect 请求的资源临时从不同的URI 响应请求。 新的临时性的URI 应当在响应的 Location 域中返回。除非这是一个HEAD 请求，否则响应的实体中应当包含指向新的URI 的超链接及简短说明。因为部分浏览器不能识别307响应，因此需
本文标签： 面试题
版权声明：本文标题：面试题（二） 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1726265552a1063237.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论