lancehmd
9/14/2017 - 6:02 PM

jquery2plainjs

jQuery, without jQuery

/**
 * Fade In
 */
function fadeIn(el) {
  el.style.opacity = 0

  var last = +new Date()
  var tick = function() {
    el.style.opacity = +el.style.opacity + (new Date() - last) / 400
    last = +new Date()

    if (+el.style.opacity < 1) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16)
    }
  }

  tick()
}

fadeIn(el)

/**
 * Hide
 */
el.style.display = 'none'

/**
 * Show
 */
el.style.display = ''
/**
 * JSON
 */
var request = new XMLHttpRequest()

request.open('GET', '/my/url', true)

request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    // Success
    var response = request.responseText
    var responseJSON = JSON.parse(response)
  } else {
    // Error
  }
}

request.onerror = function() {
  // There was a connection error of some sort
}

request.send()


/**
 * Post
 */
var data = {
  name: 'Faker',
  email: 'faker@not.real'
}
var request = new XMLHttpRequest()

request.open('POST', '/my/url', true)
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8')
request.send(data)


/**
 * Request
 */
var request = new XMLHttpRequest()

request.open('GET', '/my/url', true)

request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    // Success
    var response = request.responseText
  } else {
    // Error

  }
}

request.onerror = function() {
  // There was a connection error of some sort
}

request.send()