rikako-note/javascript/从服务端获取数据.md

js fetch data from server

• js fetch和前后端分离

  • 在传统前后段项目中，通常会用jsp技术来生成动态页面。用户想要与服务端进行请求时，服务端会重新向客户端发送整个页面，即使页面中的大部分数据都和之前的页面相同。用户端会重新对页面进行载入。
  • 通过js的fetch api，客户端可以在向服务端发送请求后，仅仅接受服务端返回的需要更新的数据，而不是整个新页面。用户在接受数据后可以通过dom api根据接受数据对页面进行修改。这样用户不用接受并且重载整个全新的页面。
  • 实现前后端分离的技术通常称之为ajax（asynchronous javascript and xml，之前通常通过xml格式来传输数据，但是现在一般使用json格式来传输数据，但该技术名称仍然叫做ajax）

• 具体从服务端接收数据的api

  • fetch
  • XMLHttpRequest

  let request=new XMLHttpRequest();
  try {
      request.open('GET',url_path);
      request.responseType='json';
      // 为load和error事件添加事件handler
      // load事件在response完全完成之后才会被触发
      // error事件在请求发生错误时被触发
      request.addEventHandler('load',load_handler);
      request.addEventHandler('error',error_handler);
      request.send();
  }catch(err) {
      console.log(err);
  }