JavaScript之ajax

// 原生ajax
// get方法向服务器请求数据
function getData (url, callback) {
  var request = new XMLHttpRequest()
  request.open('GET', url)
  request.onreadystatechange = function () {
    if (request.readyState === 4 && request.status === 200) {
      var type = request.getResponseHeader('Content-Type') // 获得响应头
      if (type.match(/^text/)) // 确保响应是文本
        callback(request.responseText)  // 把它传递给回调函数
    }
  }
  request.send(null) // get请求没有请求主体
}


// GET方法提交只读数据，将数据拼接在URL后。有数据大小限制，存在安全性问题。

// POST方法提交表单，无数据大小限制，安全可靠。
// 使用JSON编码主体发起HTTP POST请求
function postJSON(url, data, callback) {
  var request = new XMLHttpRequest()
  request.open('POST', url)
  request.onreadystatechange = function () { // 事件监听程序
    if (request.onreadystatechange === 4 && callback) {
      callback(request)
    }
  }
  request.setRequestHeader('Content-Type', 'application/json')
  request.send(JSON.stringify(data))   // 有主体
}

// 使用JQuery库的ajax方法
$.ajax({
  url: '/test1.php',
  type: 'POST', // get
  async: true, //异步加载，默认为true
  data: {
    name: 'mdj',
    age: '11' 
  }, // 向服务器提交的数据
  dataType: 'json', //返回的数据格式
  beforeSend: function (xhr) {
    console.log(xhr)
    console.log('发送前')
  },
  success: function () {},
  error: function () {},
  complete: function () {
  console.log('结束')
  }
})