【前端领域高频笔试面试】—— Ajax相关

目录

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

2.同步和异步的区别

3.如何解决跨域问题?

4.页面编码和被请求的资源编码如果不一致如何处理？

5.简述ajax 的过程

6.阐述一下异步加载

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

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

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

10.http常见的状态码有那些？分别代表是什么意思？

11.一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

12.ajax请求时，如何解释json数据

13.请说出几种减低页面加载时间的方法

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

        Ajax并不算是一种新的技术，全称是asychronous javascript and xml，可以说是已有技术的组合，主要用来实现客户端与服务器端的异步通信效果，实现页面的局部刷新，早期的浏览器并不能原生支持ajax，可以使用隐藏帧（iframe）方式变相实现异步效果，后来的浏览器提供了对ajax的原生支持使用ajax原生方式发送请求主要通过XMLHttpRequest(标准浏览器)、ActiveXObject(IE浏览器)对象实现异步通信效果。

   

    

     

      

     
     

      

       <script>
      
     
    

     

      

     
     

      
  //基本步骤：
      
     
    

     

      

     
     

      
  var xhr = null; //创建对象
      
     
    

     

      

     
     

      
  if (window.XMLHttpRequest) {
      
     
    

     

      

     
     

      

           xhr = new XMLHttpRequest();
      
     
    

     

      

     
     

      

         } else {
      
     
    

     

      

     
     

      

           xhr = new ActiveXObject("Microsoft.XMLHTTP");
      
     
    

     

      

     
     

      

         }
      
     
    

     

      

     
     

      

         xhr.open("方式", "地址", "标志位"); //初始化请求
      
     
    

     

      

     
     

      

         xhr.setRequestHeader("", ""); //设置http头信息
      
     
    

     

      

     
     

      

         xhr.onreadystatechange = function () {} //指定回调函数
      
     
    

     

      

     
     

      

         xhr.send(); //发送请求
      
     
    

     

      

     
     

      

       </script>
      
     
   
  

2.同步和异步的区别

        同步：阻塞的浏览器向服务器请求数据，服务器比较忙，浏览器一直等着（页面白屏），直到服务器返回数据，浏览器才能显示页面；

        异步：非阻塞的浏览器向服务器请求数据，服务器比较忙，浏览器可以自如的干原来的事情（显示页面），服务器返回数据的时候通知浏览器一声，浏览器把返回的数据再渲染到页面，局部更新。

3.如何解决跨域问题?

        理解跨域的概念：协议、域名、端口号都相同才同域，否则都是跨域。

        出于安全考虑，服务器不允许ajax跨域获取数据，但是可以跨域获取文件内容，所以基于这一点，可以动态创建script标签，使用标签的src属性访问js文件的形式获取js脚本，并且这个js脚本中的内容是函数调用，该函数调用的参数是服务器返回的数据，为了获取这里的参数数据，需要事先在页面中定义回调函数，在回调函数中处理服务器返回的数据，这就是解决跨域问题的主流解决方案。

4.页面编码和被请求的资源编码如果不一致如何处理？

        对于ajax请求传递的参数，get请求方式参数如果传递中文，在有些浏览器会乱码，不同的浏览器对参数编码的处理方式不同，所以对于get请求的参数需要使用 encodeURIComponent函数对参数进行编码处理，后台开发语言都有相应的解码api；对于post请求则不需要进行编码。

5.简述ajax 的过程

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

6.阐述一下异步加载

（1）异步加载的方案：动态插入script标签；
（2）通过ajax去获取js代码，然后通过eval执行；
（3）script标签上添加defer 或者async属性；
（4）创建并插入iframe，让它异步执行js。

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

        同源策略是客户端脚本（尤其是Javascript）的重要的安全度量标准。它最早出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载；所谓同源指的是协议、域名、端口相同，同源策略是一种安全协议，指一段脚本只能读取来自同一来源的窗口和文档的属性。

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

        GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符，有的浏览器是8000个字符。

        POST：一般用于修改服务器上的资源，对所发送的信息没有限制。

在以下情况中，需要使用 POST 请求：
（1）无法使用缓存文件（更新服务器上的文件或数据库）；
（2）向服务器发送大量数据（POST 没有数据量限制）；
（3）发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠。

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

        Ajax是全称是asynchronous JavaScript andXML，即异步JavaScript和xml，用于在Web页面中实现异步数据交互，实现页面局部刷新。
        优点：可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量，避免用户不断刷新或者跳转页面，提高用户体验
        缺点：对搜索引擎不友好；要实现ajax下的前后退功能成本较大；可能造成请求数的增加跨域问题限制；

        JSON是一种轻量级的数据交换格式，ECMA的一个子集；优点是轻量级、易于人的阅读和编写，便于机器（JavaScript）解析，支持复合数据类型（数组、对象、字符串、数字）。

10.http常见的状态码有那些？分别代表是什么意思？

200 - 请求成功；
301 - 资源（网页等）被永久转移到其它URL；
404 - 请求的资源（网页等）不存在；
500 - 内部服务器错误。

11.一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

分为4个步骤：

（1）当发送一个 URL 请求时，不管这个 URL 是 Web 页面的 URL 还是 Web 页面上每个资源的 URL，浏览器都会开启一个线程来处理这个请求，同时在远程 DNS 服务器上启动一个 DNS 查询，这能使浏览器获得请求对应的 IP 地址。

（2）浏览器与远程 Web 服务器通过 TCP 三次握手协商来建立一个 TCP/IP 连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。

（3）一旦 TCP/IP 连接建立，浏览器会通过该连接向远程服务器发送 HTTP 的 GET 请求。远程服务器找到资源并使用 HTTP 响应返回该资源，值为 200 的 HTTP 响应状态表示一个正确的响应。

（4）此时，Web 服务器提供资源服务，客户端开始下载资源。

12.ajax请求时，如何解释json数据

        使用eval()或者JSON.parse() 鉴于安全性考虑，推荐使用JSON.parse()更靠谱，对数据的安全性更好。

13.请说出几种减低页面加载时间的方法

（1）压缩css、js文件；
（2）合并js、css文件，减少http请求；
（3）外部js、css文件放在最底下；
（4）减少dom操作，尽可能用变量替代不必要的dom操作。

文章来源: majinjian.blog.csdn.net，作者：Developer 小马，版权归原作者所有，如需转载，请联系作者。

原文链接：majinjian.blog.csdn.net/article/details/120935707