ajax基本格式

ajax的基本格式

jQuery

$.ajax({
    async: true,//是否异步
    url: "url",//目的地
    method: "POST",//传输方法
    dataType: "json",//返回值类型
    data: {
      data1: "a",
      data2: "b",
      data3: "c"//传递的数据内容
    },
    beforeSend: function () {
      //发送请求之前
    },
    success: function (result) {
      //成功
    },
    error: function () {
      //失败
    },
    complete: function () {
      //请求完成
    }
  });

JavaScript

//1.创建对象
let xhr = new XMLHttpRequest();
//2.调用open
xhr.open('POST', 'http://example.com');
//3.设置Content-Type内容格式(注意contenttype类型)
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//4.调用send()
xhr.send(formData);
//5.设置readystatechange事件接收响应数据
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};

//文件上传进度监测
xhr.upload.onprogress = function (e) {
  if (e.lengthComputable) {
    //加载值比总需加载值的百分比，可采用bootstrap progress-bar样式。
    let percent = e.loaded / e.total * 100 + "%";
    document.getElementById('percent').style.width = percent;
    document.getElementById('percent').innerText = percent;
  } else {
    alert("文件不支持上传中的进度监测");
  }
};
//设置上传文件完成的事件
xhr.upload.onload = function () {

};

Ajax


XMLHttpRequest