Комплексный анализ интерфейсных методов сетевых запросов

1. Фокус внешних сетевых запросов

В большинстве случаев, чтобы инициировать сетевой запрос на внешнем интерфейсе, нам нужно сосредоточиться только на следующих моментах:

• Передайте основные параметры (url, метод запроса)
• Параметр запроса, тип параметра запроса
• установить заголовок запроса
• Как получить ответ
• Получить заголовки ответа, статус ответа и результаты ответа
• Обработка исключений
• нестиcookieнастраивать
• междоменный запрос

Во-вторых, то, как внешний интерфейс выполняет сетевые запросы.

• formформа,ifream,обновить страницу
• Ajax- Создатель асинхронных сетевых запросов
• jQuery- эпоха
• fetch - Ajaxзамена для
• axios、requestи многие другие библиотеки с открытым исходным кодом

3. Вопросы по сетевым запросам

• AjaxКакая проблема связана с появлением
• РоднойAjaxкак использовать
• jQueryметод сетевого запроса
• fetchиспользование и подводные камни
• Как его правильно использоватьfetch
• Как выбрать правильный междоменный метод

С вышеуказанными вопросами и опасениями мы проводим всесторонний анализ нескольких сетевых запросов.

В-четвертых, какую проблему решает появление Ajax?

существуетAjaxперед появлением,webПрограмма работает так:

Недостатки такого взаимодействия очевидны: любое взаимодействие с сервером требует обновления страницы, а пользовательский опыт очень плохой.Ajaxпоявилось решение этой проблемы.Ajaxполное имяAsynchronous JavaScript + XML(асинхронныйJavaScriptа такжеXML)

использоватьAjax, веб-приложение может быстро отображать добавочные обновления пользовательского интерфейса без перезагрузки (обновления) всей страницы.

AjaxЭто не новая технология сама по себе, но используется для описания технического решения, реализованного с использованием набора существующих технологий.XMLHttpRequestреализуетсяAjaxСамый важный объект (IE6Используйте следующееActiveXObject).

несмотря на то чтоXсуществуетAjaxПредставитель в КитаеXML, но из-заJSONмножество преимуществ, таких как меньший вес иJavascriptчасть текущегоJSONкоэффициент использованияXMLчаще.

Пять, использование родного Ajax

Основной анализ здесьXMLHttpRequestобъект, ниже приведено его основное использование:

        var xhr = new XMLHttpRequest();
        xhr.open('post','www.xxx.com',true)
        // 接收返回值
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4 ){
                if(xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
                    console.log(xhr.responseText);
                }
            }
        }
        // 处理请求参数
        postData = {"name1":"value1","name2":"value2"};
        postData = (function(value){
        var dataString = "";
        for(var key in value){
             dataString += key+"="+value[key]+"&";
        };
          return dataString;
        }(postData));
        // 设置请求头
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        // 异常处理
        xhr.onerror = function() {
           console.log('Network request failed')
        }
        // 跨域携带cookie
        xhr.withCredentials = true;
        // 发出请求
        xhr.send(postData);

Ниже приведеныXMLHttpRequestАнализируются часто используемые функции, свойства и события объекта.

функция

open

Используется для инициирования запроса, использование:

xhr.open(method, url, async);

• method: метод запроса, напримерget、post
• url: запрошеноurl
• async: Является ли это асинхронным запросом

send

для отправкиHTTPзапрос, то есть после вызова методаHTTPЗапрос будет фактически выдан, использование:

xhr.send(param)

• param: параметр http-запроса, который может бытьstring、Blobи другие типы.

abort

прекратитьajaxзапрос, после вызова этого методаreadyStateбудет установлен на0,Применение:

xhr.abort()

setRequestHeader

для установкиHTTPзаголовок запроса, этот метод должен бытьopen()Методы иsend()между вызовами, использование:

xhr.setRequestHeader(header, value);

getResponseHeader

для полученияhttpВозвращает заголовок. Если в возвращаемом заголовке несколько одинаковых имен, возвращаемое значение будет представлять собой строку, разделенную запятыми и пробелами. Использование:

var header = xhr.getResponseHeader(name);

Атрибуты

readyState

используется для определения текущегоXMLHttpRequestсостояние, в котором находится объект,XMLHttpRequestОбъекты всегда находятся в одном из следующих состояний:

стоимость	условие	описывать
0	UNSENT	Прокси создан, но еще не вызванopen()метод.
1	OPENED	open()был вызван метод.
2	HEADERS_RECEIVED	send()Метод был вызван, и заголовок и состояние доступны.
3	LOADING	скачивание;responseTextСвойство уже содержит некоторые данные.
4	DONE	Операция загрузки завершена.

status

выражатьhttpСостояние запроса, начальное значение0. Если сервер явно не указывает код состояния, тоstatusбудет установлено значение по умолчанию, т.е.200.

responseType

Указывает тип данных ответа и позволяет нам установить его вручную, если он пуст, по умолчаниюtextтип, который может принимать следующие значения:

стоимость	описывать
""	БудуresponseTypeустановить пустую строку vs установить на"text"же, является типом по умолчанию (фактическиDOMString).
"arraybuffer"	responseэто двоичные данныеJavaScript ArrayBuffer.
"blob"	responseэто двоичные данныеBlobобъект .
"document"	ответ - этоHTML DocumentилиXML XMLDocumentв зависимости от типа MIME полученных данных.
"json"	responseявляется объектом JavaScript. Этот объект создается путем обработки полученного типа данных какJSONпроанализировано.
"text"	responseвходит вDOMStringтекст в объекте.

response

Возвращает тело ответа, тип, возвращаемый вышеresponseTypeПринимать решение.

withCredentials

ajaxПо умолчанию запрос будет содержать запрос того же происхождения.cookie, а междоменные запросы не будут выполнятьсяcookie,настраиватьxhrизwithCredentialsСобственностьtrueпозволит междоменный переносcookie.

обратный вызов события

onreadystatechange

 xhr.onreadystatechange = callback;

когдаreadyStateПри изменении свойства будет запущен обратный вызов.

onloadstart

 xhr.onloadstart = callback;

существуетajaxдо отправки запроса (readyState==1назад,readyState==2вперед),callbackбудет запущен.

onprogress

xhr.onprogress = function(event){
  console.log(event.loaded / event.total);
}

Функция обратного вызова может получить общий размер ресурсаtotal, размер уже загруженного ресурсаloaded, ход загрузки можно рассчитать с помощью этих двух значений.

onload

 xhr.onload = callback;

Запускается, когда ресурс и его зависимые ресурсы закончили загрузкуcallback, обычно мы будемonloadОбработайте возвращаемое значение в событии.

Обработка исключений

onerror

 xhr.onerror = callback;

когдаajaxЗапускается, когда ресурс не загружаетсяcallback.

ontimeout

 xhr.ontimeout = callback;

Срабатывает, когда прогресс прерывается из-за истечения запланированного времениcallback, период тайм-аута может быть использованtimeoutустанавливаются свойства.

jQueryajax$.ajax、$.get、$.post

$.ajax({
    dataType: 'json', // 设置返回值类型
    contentType: 'application/json', // 设置参数类型
    headers: {'Content-Type','application/json'},// 设置请求头
    xhrFields: { withCredentials: true }, // 跨域携带cookie
    data: JSON.stringify({a: [{b:1, a:1}]}), // 传递参数
    error:function(xhr,status){  // 错误处理
       console.log(xhr,status);
    },
    success: function (data,status) {  // 获取结果
       console.log(data,status);
    }
})

$.ajaxjqXHR

url

type

String"POST""GET""GET"HTTPPUTDELETE

timeout

Number

success

Function

jsonp

jsonp"callback=?"GETPOSTURL"callback"

errorFunction

isSuccess = status >= 200 && status < 300 || status === 304;

error

dataType

"xml": 返回 XML 文档，可用 jQuery 处理。
"html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
"json": 返回 JSON 数据 。
"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
"text": 返回纯文本字符串

data

StringJSON.stringify

complete

Function

async

Booleantruefalse

contentType

String"application/x-www-form-urlencoded"

JSONJSON

{
    a: 1,
    b: 2,
    c: 3
}

Ajaxjsonapplication/x-www-form-urlencodedJSON

{
  data: {
    a: [{
      x: 2
    }]
  }
}

json

$.ajax({
    dataType: 'json',
    contentType: 'application/json',
    data: JSON.stringify({a: [{b:1, a:1}]})
})

MV*jQueryjQueryизAjax apiЧтобы внедрить его в одиночку, неизбежно нужны новые технические решения.

You Yuxi рекомендует всем использовать его в своей документации.axiosСделайте сетевой запрос.axiosна основеPromiseродномуXHRЭто очень всесторонне упаковано и используется очень элегантно. Кроме того,axiosТакже предоставляется вnodeПоддержка в среде может быть описана как предпочтительное решение для сетевых запросов.

В будущем определенно будет лучшая инкапсуляция. У них очень всесторонние соображения и подробная документация. Мы не будем проводить здесь много исследований. Мы сосредоточимся на более низком уровне API.fetch.

Fetch API— это мощный собственный API для доступа к каналам HTTP и управления ими.

Ранее эта функциональность была реализована с помощью XMLHttpRequest. Fetch предоставляет лучшую альтернативу, которую можно легко использовать с другими технологиями, такими как Service Workers. Fetch также предоставляет единое логическое место для определения других концепций, связанных с HTTP, таких как CORS и расширения для HTTP.

видимыйfetchкак естьXMLHttpRequestпоявились альтернативы.

использоватьfetch, вам не нужно загружать дополнительный внешний ресурс. Но он еще не полностью поддерживается браузерами, поэтому вам все еще нуженpolyfill.

Восемь, использование извлечения

Базовый запрос на выборку:

const options = {
    method: "POST", // 请求参数
    headers: { "Content-Type": "application/json"}, // 设置请求头
    body: JSON.stringify({name:'123'}), // 请求参数
    credentials: "same-origin", // cookie设置
    mode: "cors", // 跨域
}
fetch('http://www.xxx.com',options)
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson); // 响应数据
  })
  .catch(function(err){
    console.log(err); // 异常处理
  })

Fetch APIобеспечивает глобальноеfetch()метод и несколько вспомогательных объектов для инициирования сетевого запроса.

• fetch()

fetch()Метод используется для инициирования запроса на получение ресурса. он возвращаетpromise,этоpromiseбудет вызываться после ответа на запросresolve, и возвращаетResponseобъект.

• Headers

в состоянии пройтиHeaders()конструктор для создания собственногоheadersобъект, эквивалентныйresponse/requestИнформация заголовка позволяет вам запрашивать эту информацию заголовка или выполнять различные операции для разных результатов.

var myHeaders = new Headers();
myHeaders.append("Content-Type", "text/plain");

• Request

пройти черезRequest()Конструктор может создатьRequestпредмет, который можно использовать какfetchВторой параметр функции.

• Response

существуетfetch()законченныйpromisesзатем вернутьResponseнапример, вы также можете создать его вручнуюResponseпример.

Девять, получение анализа исходного кода полифилла

из-заfetchэто очень низкий уровеньAPI, так что мы не можем исследовать его нижний слой дальше, но мы можем использовать егоpolyfillИзучите его обоснование и найдите подводные камни.

структура кода

Видно из кода,polyfillглавная параFetchЧетыре основных объекта, предоставляемых API, инкапсулированы:

получить пакет

Код очень понятен:

• построитьPromiseобъект и возврат
• СоздаватьRequestобъект
• СоздаватьXMLHttpRequestобъект
• выигратьRequestЗапрос объектаurlПросьба о прическе для вечеринки,openОдинxhrпросить и будетRequestхранится в объектеheadersвынуть и назначить xhr
• xhr onloadпосле выносаresponseизstatus,headers,bodyупаковкаResponseобъект, звонокresolve.

Обработка исключений

можно найти, звонитеrejectЕсть три возможности:

• Запросить время ожидания

• 2. Запрос не выполнен

Примечание. При установлении профиля на сервере и получении от сервера ненормального кода состояния, например404、500и тд не заводитсяonerror. Помечается только при сбое сети или при блокировке запроса.reject, такие как междоменные,urlНе существует, сработает сетевое исключение и т. д.onerror.

Таким образом, использование fetch будет введено вместо catch, когда будет получен код состояния исключения. Эти плохие запросы часто обрабатываются вручную.

• 3. Ручное прерывание

допустимыйrequestпередается в параметреsignalобъект иsignalобъект добавленabortпрослушиватель событий, когдаxhr.readyStateстали4(Синтаксический анализ содержимого ответа завершен) После удаления прослушивателя события прерывания объекта сигнала.

Это означает, что вfetchМожет быть вызван до завершения запросаsignal.abortпрекратить его. Доступно в браузереAbortController()Конструктор создает контроллер, а затем используетAbortController.signalАтрибуты

Это экспериментальная функция, некоторые браузеры все еще находятся в стадии разработки.

Инкапсуляция заголовков

Объект заголовка поддерживаетсяmapОбъект, который можно передать в конструкторHeaderОбъекты, массивы, обычные типы объектовheader, и сохранить все значения доmapсередина.

доfetchСм. вызов в функцииheaderизforEachметода, следующая его реализация:

видимыйheaderобход его внутреннихmapобход.

Кроме тогоHeaderтакже обеспечиваетappend、delete、get、setи другие методы, все из которых являются внутренними дляmapобъект для эксплуатации.

Объект запроса

RequestДва параметра, полученные объектом:fetchДва параметра, полученные функцией, первый параметр может быть передан напрямуюurl, вы также можете передать сконструированныйrequestобъект. Второй параметр предназначен для управления различными конфигурациями.optionобъект.

можно пройти вcredentials、headers、method、mode、signal、referrerи другие свойства.

Обратите внимание:

• входящийheadersрассматриваться какHeadersПараметры конструктора для построения объекта заголовка.

обработка файлов cookie

В функции fetch также есть следующий код:

    if (request.credentials === 'include') {
      xhr.withCredentials = true
    } else if (request.credentials === 'omit') {
      xhr.withCredentials = false
    }

По умолчаниюcredentialsТипsame-origin, вы можете хранить файлы cookie запроса того же происхождения.

Затем я нашел реализацию полифилла здесь иMDN — Использование выборкиИ многие данные противоречивы:

mdn: по умолчанию fetch не будет отправлять или получать файлы cookie с сервера.

Поэтому я экспериментировал отдельно, используяpolyfillи использовать роднойfetchВ случае переноса файлов cookie обнаружено, что, когда файл cookie не установленcredentialsВ данном случае это на самом деле гомология по умолчанию.cookieДа, это не соответствует описанию документа.После ознакомления с большим количеством информации говоритсяfetchФайлы cookie не переносятся по умолчанию, ниже используется собственныйfetchПри выполнении запроса в браузере:

Затем я нашел вMDN-Fetch-RequestБыли указаны более новые браузерыcredentialsЗначение по умолчанию изменено наsame-originСтарая версия до сих порomit.

В самом делеMDN — Использование выборкиДокументы здесь обновлены немного не вовремя, что является недоразумением...

Объект ответа

ResponseобъектfetchВозвращаемое значение после успешного вызова:

оглядыватьсяfetch中对Операция ответа`:

    xhr.onload = function () {
      var options = {
        status: xhr.status,
        statusText: xhr.statusText,
        headers: parseHeaders(xhr.getAllResponseHeaders() || '')
      }
      options.url = 'responseURL' in xhr ? xhr.responseURL : options.headers.get('X-Request-URL')
      var body = 'response' in xhr ? xhr.response : xhr.responseText
      resolve(new Response(body, options))
    }

ResponseКонструктор:

Видно, что в конструкторе главнаяoptionsсерединаstatus、statusText、headers、urlд. обрабатываются отдельно и монтируются наResponseна объекте.

Конструкторы внутри и нетresponseText, и, наконец, передали_initBodyобработка функций, в то время какResponseдобровольно не заявлял_initBodyсвойства, код используется последнимResponseназываетсяBodyфункция, на самом деле_initBodyфункция передается черезBodyфункция монтируется наResponseНа теле давайте сначала посмотрим_initBodyфункция:

видимый,_initBodyфункционировать в соответствии сxhr.responseтип(Blob、FormData、String...), присваивать значения разным параметрам, которые находятся вBodyВ методе есть разные приложения, давайте посмотрим на детали ниже.BodyКакие еще операции выполняет функция:

Bodyфункция такжеResponseОбъект выполняет четыре функции,text、json、blob、formData, операция в этих функциях заключается в возврате различных типов возвращаемых значений, полученных в _initBody.

Это также показывает, что вfetchПосле выполнения вы не можете напрямуюresponseчтобы получить возвращаемое значение вtext()、json()Подождите, пока функция получит возвращаемое значение.

Здесь следует отметить еще одну вещь: некоторые функции имеют логику, подобную следующей:

    var rejected = consumed(this)
    if (rejected) {
      return rejected
    }

потребляемая функция:

function consumed(body) {
  if (body.bodyUsed) {
    return Promise.reject(new TypeError('Already read'))
  }
  body.bodyUsed = true
}

каждый звонокtext()、json()После ожидания функции она будетbodyUsedИзменения переменныхtrue, используется для указания, что возвращаемое значение было прочитано, и в следующий раз, когда оно будет прочитано, оно будет выброшено напрямуюTypeError('Already read'). Это также следует за роднымfetchправила:

Поскольку объекты Response настроены как потоки, их можно прочитать только один раз.

Десять, яма извлечения

VUEв документации кfetchИмеет следующее описание:

использоватьfetchЕсть много других соображений, поэтому на данном этапе все все еще предпочитают его.axiosнемного больше. Конечно, это может измениться в будущем.

из-заfetchэто очень низкий уровеньAPI, он не сильно инкапсулирован, и есть ряд проблем, с которыми нужно справиться:

• нельзя пройти напрямуюJavaScriptобъект как параметр
• Вам нужно самостоятельно определить тип возвращаемого значения и выполнить метод, чтобы получить возвращаемое значение в ответ.
• Метод получения возвращаемого значения может быть вызван только один раз, а не несколько раз.
• Не могу нормально поймать исключение
• Старые браузеры не поддерживают его по умолчанию.cookie
• не поддерживаетсяjsonp

11. Инкапсуляция выборки

Обработка параметров запроса

Поддерживает передачу различных типов параметров:

function stringify(url, data) {
  var dataString = url.indexOf('?') == -1 ? '?' : '&';
  for (var key in data) {
    dataString += key + '=' + data[key] + '&';
  };
  return dataString;
}

if (request.formData) {
  request.body = request.data;
} else if (/^get$/i.test(request.method)) {
  request.url = `${request.url}${stringify(request.url, request.data)}`;
} else if (request.form) {
  request.headers.set('Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8');
  request.body = stringify(request.data);
} else {
  request.headers.set('Content-Type', 'application/json;charset=UTF-8');
  request.body = JSON.stringify(request.data);
}

печенье

fetchВ новой версии браузер стал нести тот же ориджин по умолчаниюcookie, но он не будет использоваться по умолчанию в старых браузерах, нам нужно установить его единообразно:

  request.credentials =  'same-origin'; // 同源携带
  request.credentials =  'include'; // 可跨域携带

Обработка исключений

Когда получен код состояния HTTP, представляющий ошибку, обещание, возвращенное из fetch(), не будет помечено как отклоненное, даже если код состояния ответа HTTP равен 404 или 500. Вместо этого он пометит статус обещания как разрешение (но установит для свойства ok возвращаемого значения разрешения значение false ) и пометит его как отклонение только в случае сбоя сети или блокировки запроса.

Так что мы должныfetchИсключения обрабатываются единообразно

.then(response => {
  if (response.ok) {
    return Promise.resolve(response);
  }else{
    const error = new Error(`请求失败! 状态码: ${response.status}, 失败信息: ${response.statusText}`);
    error.response = response;
    return Promise.reject(error);
  }
});

обработка возвращаемого значения

Чтобы вызывать разные функции для получения разных типов возвращаемых значений, тип должен быть определен заранее, а метод для получения возвращаемого значения не может вызываться несколько раз:

.then(response => {
  let contentType = response.headers.get('content-type');
  if (contentType.includes('application/json')) {
    return response.json();
  } else {
    return response.text();
  }
});

jsonp

fetchсама не обеспечиваетjsonpслужба поддержки,jsonpЭто не очень хороший способ решения междоменной проблемы, рекомендуется использоватьcorsилиnginxДля решения междоменной проблемы см. подробности в следующих главах.

fetch упакован и может быть успешно использован.

Хм, axios работает очень хорошо...

12. Кросс-доменная сводка

Когда дело доходит до сетевых запросов, мы должны упомянуть междоменные.

Политика одного и того же источника браузера ограничивает взаимодействие документов или сценариев, загруженных из одного источника, с ресурсами из другого источника. Это важный механизм безопасности для изоляции потенциально вредоносных файлов. Операции чтения между разными источниками обычно не допускаются.

Кроссдоменные условия: протокол, доменное имя, порт, если есть разница, то кроссдоменная.

Ниже приведены несколько способов решения междоменной проблемы:

nginx

использоватьnginxОбратный прокси для достижения кросс-доменности, обратитесь к моей статье:Необходимые знания nginx для фронтенд-разработчиков

cors

CORSЯвляетсяW3CСтандартное, полное название — «междоменное совместное использование ресурсов».（Cross-origin resource sharing）. Это позволяет браузерам отправлять запросы на кросс-серверные серверы.XMLHttpRequestпросить.

Настройки сервераAccess-Control-Allow-Originможно включитьCORS. Этот атрибут указывает, какие доменные имена могут получить доступ к ресурсу. Если установлен подстановочный знак, это означает, что все веб-сайты могут получить доступ к ресурсу.

app.all('*', function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    next();
});

jsonp

scriptпомеченsrcСсылки в свойствах могут иметь междоменный доступjsСценарий, используя эту функцию, сервер больше не возвращаетсяJSONформатирует данные, но возвращает раздел, вызывающий функциюjsкод, вsrcВызов осуществляется таким образом, который реализует междоменный.

jqueryправильноjsonpслужба поддержки:

        $.ajax({
            type : "get",
            url : "http://xxxx"
            dataType: "jsonp",
            jsonp:"callback", 
            jsonpCallback: "doo",
            success : function(data) {
                console.log(data);
            }
        });

fetch、axiosи т.д. не предоставил прямогоjsonpЕсли нам нужно использовать этот метод, мы можем попробовать вручную инкапсулировать:

(function (window,document) {
    "use strict";
    var jsonp = function (url,data,callback) {

        // 1.将传入的data数据转化为url字符串形式
        // {id:1,name:'jack'} => id=1&name=jack
        var dataString = url.indexof('?') == -1? '?': '&';
        for(var key in data){
            dataString += key + '=' + data[key] + '&';
        };

        // 2 处理url中的回调函数
        // cbFuncName回调函数的名字 ：my_json_cb_名字的前缀 + 随机数（把小数点去掉）
        var cbFuncName = 'my_json_cb_' + Math.random().toString().replace('.','');
        dataString += 'callback=' + cbFuncName;

        // 3.创建一个script标签并插入到页面中
        var scriptEle = document.createElement('script');
        scriptEle.src = url + dataString;

        // 4.挂载回调函数
        window[cbFuncName] = function (data) {
            callback(data);
            // 处理完回调函数的数据之后，删除jsonp的script标签
            document.body.removeChild(scriptEle);
        }

        document.body.appendChild(scriptEle);
    }

    window.$jsonp = jsonp;

})(window,document)

postMessage кросс-доменный

postMessage()Методы позволяют сценариям из разных источников взаимодействовать асинхронно с ограниченным обменом данными, обеспечивая межтекстовый документ, многооконный и междоменный обмен сообщениями.

//捕获iframe
var domain = 'http://scriptandstyle.com';
var iframe = document.getElementById('myIFrame').contentWindow;

//发送消息
setInterval(function(){
	var message = 'Hello!  The time is: ' + (new Date().getTime());
	console.log('blog.local:  sending message:  ' + message);
        //send the message and target URI
	iframe.postMessage(message,domain); 
},6000);

//响应事件
window.addEventListener('message',function(event) {
	if(event.origin !== 'http://davidwalsh.name') return;
	console.log('message received:  ' + event.data,event);
	event.source.postMessage('holla back youngin!',event.origin);
},false);

postMessageМеждоменная связь подходит для следующих сценариев: междоменная связь между несколькими окнами одного и того же браузера,iframeмеждоменное общение.

WebSocket

WebSocketпротокол двусторонней связи, после установления соединения,WebSocketизserverа такжеclientОба могут активно отправлять или получать данные друг другу, не ограничиваясь политикой одного и того же источника.

         function WebSocketTest(){
            if ("WebSocket" in window){
               alert("您的浏览器支持 WebSocket!");
               // 打开一个 web socket
               var ws = new WebSocket("ws://localhost:3000/abcd");
               ws.onopen = function(){
                  // Web Socket 已连接上，使用 send() 方法发送数据
                  ws.send("发送数据");
                  alert("数据发送中...");
               };
               ws.onmessage = function (evt) { 
                  var received_msg = evt.data;
                  alert("数据已接收...");
               };
               ws.onclose = function(){ 
                  // 关闭 websocket
                  alert("连接已关闭..."); 
               };
            } else{
               // 浏览器不支持 WebSocket
               alert("您的浏览器不支持 WebSocket!");
            }
         }

Статья впервые опубликована

Если вы хотите прочитать больше качественных статей или вам нужен исходный файл ментальной карты в статье, вы можете подписаться на меня.блог на гитхабе, добро пожаловать звезда✨.

Рекомендую всем использоватьFundebug, очень полезный инструмент для мониторинга ОШИБОК~

Если в тексте есть ошибки, исправьте их в комментариях, спасибо за прочтение.

Подписавшись на официальную учетную запись, ответьте на [Добавить группу], чтобы включить вас в высококачественную группу внешнего интерфейса.