js面试题-----通信类

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js面试题-----通信类相关的知识,希望对你有一定的参考价值。

题目1:什么是同源策略及限制

技术分享

 

题目2:前后端如何通信

  Ajax   WebSocket   CORS

题目3:如何创建Ajax

  XMLHttpRequest对象的工作流程

  兼容性处理

  事件的触发条件

  事件的触发顺序

 util.json = function (options) {
     var opt = {
         url: ‘‘,
         type: ‘get‘,
         data: {},
         success: function () {},
         error: function () {},
     };
     util.extend(opt, options);
     if (opt.url) {
         var xhr = XMLHttpRequest
            ? new XMLHttpRequest()
            : new ActiveXObject(‘Microsoft.XMLHTTP‘);
         var data = opt.data,
             url = opt.url,
             type = opt.type.toUpperCase(),
             dataArr = [];
         for (var k in data) {
             dataArr.push(k + ‘=‘ + data[k]);
         }
         if (type === ‘GET‘) {
             url = url + ‘?‘ + dataArr.join(‘&‘);
             xhr.open(type, url.replace(/\\?$/g, ‘‘), true);
             xhr.send();
         }
         if (type === ‘POST‘) {
             xhr.open(type, url, true);
             xmlhttp.setRequestHeader(‘Content-type‘, ‘application/x-www-form-urlencoded‘);
             xhr.send(dataArr.join(‘&‘));
         }
         xhr.onload = function () {
             if (xhr.status === 200 || xhr.status === 304) {
                 var res;
                 if (opt.success && opt.success instanceof Function) {
                     res = xhr.responseText;
                     if (typeof res ==== ‘string‘) {
                         res = JSON.parse(res);
                         opt.success.call(xhr, res);
                     }
                 }
             } else {
                 if (opt.error && opt.error instanceof Function) {
                     opt.error.call(xhr, res);
                 }
             }
         };
     }
 };

题目4:跨域通信的几种方式

  JSONP    Hash   PostMessage   WebSocket   CORS

  JSONP (最常用的,这里不解释了)

  Hash 

// 利用hash,场景是当前页面 A 通过iframe或frame嵌入了跨域的页面 B
      // 在A中伪代码如下:
      var B = document.getElementsByTagName(‘iframe‘);
      B.src = B.src + ‘#‘ + ‘data‘;
      // 在B中的伪代码如下
      window.onhashchange = function () {
          var data = window.location.hash;
      };

   PostMessage

// postMessage
      // 窗口A(http:A.com)向跨域的窗口B(http:B.com)发送信息
      Bwindow.postMessage(‘data‘, ‘http://B.com‘);
      // 在窗口B中监听
      window.addEventListener(‘message‘, function (event) {
          console.log(event.origin);//http:A.com
          console.log(event.source);//Awindow
          console.log(event.data);//data
      }, false);

  WebSocket

// Websocket【参考资料】http://www.ruanyifeng.com/blog/2017/05/websocket.html

      var ws = new WebSocket(‘wss://echo.websocket.org‘);

      ws.onopen = function (evt) {
          console.log(‘Connection open ...‘);
          ws.send(‘Hello WebSockets!‘);
      };

      ws.onmessage = function (evt) {
          console.log(‘Received Message: ‘, evt.data);
          ws.close();
      };

      ws.onclose = function (evt) {
          console.log(‘Connection closed.‘);
      };

  CORS

// CORS【参考资料】http://www.ruanyifeng.com/blog/2016/04/cors.html
      // url(必选),options(可选)
      fetch(‘/some/url/‘, {
          method: ‘get‘,
      }).then(function (response) {

      }).catch(function (err) {
        // 出错了,等价于 then 的第二个参数,但这样更好用更直观
      });

以上是关于js面试题-----通信类的主要内容,如果未能解决你的问题,请参考以下文章

前端面试题之手写promise

js面试题-----安全类

js面试题-----HTTP协议类

Java工程师面试题,二级java刷题软件

常见的面试题

Java进阶之光!2021必看-Java高级面试题总结