javascriptファイルアップロード

参考:javascriptファイルアップロード

[HTML5] Fetch API で GET/POST で通信する

参考:Fetch API

参考:mozilla:Fetch API

参考:Pollyfill :Fetch API

参考:Fetch APIでprogress

参考:Streams_API

jquery AJAX::dataType: "json",Get

参考:jquery → javascript

  function check() {
      var restURL = "https://apilayer.net/api/check?access_key=c5118f1f9827f42a5fc4b231932130a8&email=" + document.getElementById('email').value + "&smtp=1&format=1"
      $.ajax({
          type: 'GET',
          url: restURL,
          dataType: "json",
          success: renderList,
      });
      return false;
  }

  function renderList(data) {
      if ((data.format_valid == true) && (data.smtp_check == true)) {
          alert("Valid email");
      }
      else {
          alert("Invalid email");
      }
  }

-> vanillas javascript::JSON.parse

JSON.parseを使うのでMTで関数のpolifilが必要


  function check() {
    var restURL = "https://apilayer.net/api/check?access_key=c5118f1f9827f42a5fc4b231932130a8&email=" + document.getElementById('email').value + "&smtp=1&format=1"
    var request = new XMLHttpRequest();
    request.open('GET', restURL, true);
    request.onload = function() {
      if (this.status >= 200 && this.status < 400) {
        //SUCCESS::ここでJSON.parse
        renderList(JSON.parse(this.response));
      } else {
        // We reached our target server, but it returned an error
        alert("Server returned an error");
      }
    };

    request.onerror = function() {
      alert("Connection Error");
      // There was a connection error of some sort
    };
    request.send();
  }

  function renderList(data) {
    if ((data.format_valid == true) && (data.smtp_check == true)) {
      alert("Valid email");
    } else {
      alert("Invalid email or issue with the api");
    }
  }

jquery AJAX::dataType: "json",POST

参考:jquery → javascript

  $('.frmSubmitData').on('submit', function(e){
    e.preventDefault();
    var formData = $('#myForm').serialize();
    console.log(formData);

    $.ajax({
        type: 'POST',
        encoding:"UTF-8",
        url: 'Components/myTest.cfc?method=testForm',
        data: formData,
        dataType: 'json'
    }).done(function(obj){
        if(obj.STATUS === 200){
            console.log(obj.FORMDATA);
        }else{
            alert('Error');
        }
    }).fail(function(jqXHR, textStatus, errorThrown){
        alert("Error: "+errorThrown);
    });
});

-> vanillas javascript::JSON.parse

JSON.parseを使うのでMTで関数のpolifilが必要


  function ajaxReq() {
      if (window.XMLHttpRequest) {
          return new XMLHttpRequest();
      } else if (window.ActiveXObject) {
          return new ActiveXObject("Microsoft.XMLHTTP");
      } else {
          alert("Browser does not support XMLHTTP.");
          return false;
      }
  }

  var xmlhttp = ajaxReq();
  var url = "http://random.url.com";
  var params = "your post body parameters";
  xmlhttp.open("POST", url, true); // set true for async, false for sync request
  xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xmlhttp.send(params); // or null, if no parameters are passed

  xmlhttp.onreadystatechange = function () {
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
         try {
             var obj = JSON.parse(xmlhttp.responseText);

             // do your work here

         } catch (error) {
             throw Error;
         }
      }
  }