JavaScript 中 AJAX 的使用

Feb 5, 2021

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件，但需要用户允许 JavaScript 在浏览器上执行。

原生 js

GET1

const result = document.getElementById('res');
//创建对象
const xhr = new XMLHttpRequest();
//设置请求方法和url
xhr.open('GET', 'http://localhost:8000/server');
//发送
xhr.send();
//事件绑定 处理服务端返回的结果
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    //服务端返回了所有结果
    if (xhr.status >= 200 && xhr.readyState <= 300) {
      //2开头的都表示成功
      //处理结果
      console.log(xhr.status); //状态码
      console.log(xhr.statusText); //状态字符串
      console.log(xhr.getAllResponseHeaders); //所有响应头
      console.log(xhr.response); //响应体
      result.innerHTML = xhr.response;
    } else {
    }
  }
};

POST1

const result = document.getElementById('res');
const xhr = new XMLHttpRequest();
xhr.open('POST', 'http://localhost:8000/server');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('a=100&b=200&c=3');
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    if (xhr.status >= 200 && xhr.status < 300) {
      result.innerHTML = xhr.response;
    }
  }
};

设置响应体格式

const result = document.getElementById('res');
const xhr = new XMLHttpRequest();
//设置响应体数据的类型
xhr.responseType = 'json';
xhr.open('GET', 'http://localhost:8000/json-server');
xhr.send();
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    if (xhr.status >= 200 && xhr.status < 300) {
      //自动转换
      console.log(xhr.response);
      result.innerHTML = xhr.response.name;
    }
  }
};

IE 缓存问题

在 url 路径上加上 t = Date.now()

超时与网络异常

const result = document.getElementById('res');
const xhr = new XMLHttpRequest();
//超时设置
xhr.timeout = 2000;
//超时回调
xhr.ontimeout = function () {
  alert('网络异常，建议换台电脑');
};
//网络异常回调
xhr.onerror = function () {
  alert('你的网络异常');
};
xhr.open('GET', 'http://localhost:8000/delay');
xhr.send();
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    if (xhr.status >= 200 && xhr.status < 300) {
      result.innerHTML = xhr.response;
    }
  }
};

取消请求

let xhr = null;
xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:8000/delay');
xhr.send();
// 取消请求
xhr.abort();

重复请求

设置节流阀，不发送新请求；设置请求状态变量，取消原请求，发送新请求。

jQuery

GET2

$.get(
  "http://localhost:8000/jquery-server",
  { a: 100, b: 200 },
  function (data) {
    console.log(data);
  },
  "json"
);

POST2

$.post("http://localhost:8000/jquery-server",{ a: 100, b: 200 }, function (data) {
  console.log(data);
});

AJAX

$.ajax({
  //url
  url: 'http://localhost:8000/jquery-server',
  //参数
  data: { a: 100, b: 222 },
  //请求类型
  type: 'GET',
  //响应体结果
  dataType: 'json',
  //成功的回调
  success: function (data) {
    console.log(data);
  },
  //超时时间
  timeout: 2000,
  //失败的回调
  error: function () {
    console.log('出错了');
  },
  //头信息设置
  headers: {
    c: 300,
    d: 400,
  },
});

axios

GET3

axios
  .get('http://localhost:8000/axios-server', {
    //url参数
    params: {
      id: 1000,
      vip: 12,
    },
    //请求头信息
    headers: {
      name: 'hanser',
      age: '2',
    },
  })
  .then((value) => {
    console.log(value);
  });

POST3

axios.post(
  'http://localhost:8000/axios-server',
  //请求体
  {
    username: 'admin',
    password: '123',
  },
  {
    //url参数
    params: {
      id: 1,
      vip: 123,
    },
    //请求头参数
    headers: {
      name: 'yousa',
      age: '23',
    },
  }
);

axious

axios({
  method: 'POST',
  url: 'http://localhost:8000/axios-server',
  //url参数
  params: {
    vip: 10,
    id: 123,
  },
  //头信息
  headers: {
    a: 100,
    b: 200,
  },
  //请求体参数
  data: {
    name: 'hanser',
    age: '7',
  },
}).then((response) => {
  console.log(response);
});

fetch

fetch('http://localhost:8000/fetch-server', {
  //请求方法
  method: 'POST',
  //请求头
  headers: {
    name: 'hanser',
  },
  //请求体
  body: 'name=admin&pd=admin',
})
  .then((Response) => {
    console.log(Response);
    return Response.text();
  })
  .then((Response) => {
    console.log(Response);
  });

跨域 CORS

设置 http 响应的响应头

Access-Control-Allow-Origin：允许请求的源地址

设置为*则为不限制跨域请求。