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

 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); ????????????????} ????????????} ????????}; ????} };

// 利用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 ?????// 窗口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【参考资料】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【参考资料】http://www.ruanyifeng.com/blog/2016/04/cors.html ?????// url（必选），options（可选） ?????fetch(‘/some/url/‘, { ?????????method: ‘get‘, ?????}).then(function (response) { ?????}).catch(function (err) { ???????// 出错了，等价于 then 的第二个参数，但这样更好用更直观 ?????});