refactor 3-more into separate books

2015-02-27 13:21:58 +03:00 · 2015-02-27 13:21:58 +03:00 · 87639b2740
commit 87639b2740
parent bd1d5e4305
423 changed files with 9 additions and 9 deletions
--- a/4-ajax/10-ajax-jsonp/jsonp.view/index.html
+++ b/4-ajax/10-ajax-jsonp/jsonp.view/index.html
@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <script src="scriptRequest.js"></script>
+</head>
+<body>
+
+<script>
+function ok(data) {
+  alert("Загружен пользователь " + data.id + ": " + data.name);
+}
+
+function fail(url) {
+  alert('Ошибка при запросе ' + url);
+}
+
+function go() {
+  // ответы могут приходить в любой последовательности!
+  scriptRequest("user?id=123", ok, fail); // Загружен
+  scriptRequest("/badurl.js", ok, fail); // fail, 404
+  scriptRequest("index.html", ok, fail); // fail, 200 но некорректный скрипт
+}
+</script>
+
+<button onclick='go()'>Сделать запросы</button>
+  
+      
+</body>
+</html>
--- a/4-ajax/10-ajax-jsonp/jsonp.view/scriptRequest.js
+++ b/4-ajax/10-ajax-jsonp/jsonp.view/scriptRequest.js
@ -0,0 +1,49 @@
+var CallbackRegistry = {}; // реестр
+
+// при успехе вызовет onSuccess, при ошибке onError
+function scriptRequest(url, onSuccess, onError) {
+
+  var scriptOk = false; // флаг, что вызов прошел успешно
+
+  // сгенерировать имя JSONP-функции для запроса
+  var callbackName = 'cb' + String(Math.random()).slice(-6);
+
+  // укажем это имя в URL запроса 
+  url += ~url.indexOf('?') ? '&' : '?';
+  url += 'callback=CallbackRegistry.'+callbackName;
+
+  // ..и создадим саму функцию в реестре
+  CallbackRegistry[callbackName] = function(data) {       
+    scriptOk = true; // обработчик вызвался, указать что всё ок  
+    delete CallbackRegistry[callbackName]; // можно очистить реестр
+    onSuccess(data); // и вызвать onSuccess
+  };
+
+  // эта функция сработает при любом результате запроса
+  // важно: при успешном результате - всегда после JSONP-обработчика 
+  function checkCallback() {      
+    if (scriptOk) return; // сработал обработчик?
+    delete CallbackRegistry[callbackName]; 
+    onError(url);  // нет - вызвать onError
+  }
+
+  var script = document.createElement('script');  
+
+  // в старых IE поддерживается только событие, а не onload/onerror
+  // в теории 'readyState=loaded' означает "скрипт загрузился", 
+  // а 'readyState=complete' -- "скрипт выполнился", но иногда
+  // почему-то случается только одно из них, поэтому проверяем оба
+  script.onreadystatechange = function() {    
+    if (this.readyState == 'complete' || this.readyState == 'loaded'){   
+      this.onreadystatechange = null;   
+      setTimeout(checkCallback, 0); // Вызвать checkCallback - после скрипта
+    }
+  }
+
+  // события script.onload/onerror срабатывают всегда после выполнения скрипта
+  script.onload = script.onerror = checkCallback;
+  script.src = url;
+
+  document.body.appendChild(script);
+}
+
--- a/4-ajax/10-ajax-jsonp/jsonp.view/server.js
+++ b/4-ajax/10-ajax-jsonp/jsonp.view/server.js
@ -0,0 +1,38 @@
+var http = require('http');
+var url = require('url');
+var static = require('node-static');
+var file = new static.Server('.',  { cache: 0 });
+
+
+function accept(req, res) {
+
+  var urlParsed = url.parse(req.url, true);
+
+  if (urlParsed.pathname == '/user') {
+    var id = urlParsed.query.id;
+    var callback = urlParsed.query.callback;
+
+    res.setHeader('Content-Type', 'application/javascript; charset=utf-8');
+
+    var user = {
+      name: "Вася",
+      id: id
+    };
+
+    res.end(callback + '(' + JSON.stringify(user) + ')');
+
+  } else {
+    file.serve(req, res);
+  }
+  
+}
+
+
+// ------ запустить сервер -------
+
+if (!module.parent) {
+  http.createServer(accept).listen(8080);
+} else {
+  exports.accept = accept;
+}
+