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