AJAX学习

1.简介

AJAX 即 “Asynchronous Javascript And XML”，即异步JavaScript和XML，是指一种创建交互式网页应用的网页开发技术。虽然AJAX名字中含有XML，但是现在基本上已经被更加灵活通用的JSON取代了。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

AJAX不是新的编程语言，而是将现有的标准组合在一起使用的新方式。

优点：
- 无需刷新页面与服务器端进行通信
- 可以根据用户事件更新页面内容
缺点：
- 没有浏览历史，无法回退
- 存在跨域问题
- SEO不友好

2.AJAX

这里仅列举几个常用的属性和方法，文档见 MDN web doc

创建对象

const xhr = new XMLHttpRequest();

初始化，设置请求方法和URL，以及是否为异步请求（可选，默认为true）

xhr.open('GET', 'http://127.0.0.1:8081/');

发送（如果为POST请求，可添加参数）

xhr.send();

事件绑定，事件处理

readystate共有5种可能的值，onreadystatechange表示readystate变化后的回调函数

0-未初始化，尚未调用open()方法；
1-启动，调用了open()方法，未调用send()方法；
2-发送，已经调用了send()方法，未接收到响应；
3-接收，已经接收到部分响应数据；
4-完成，已经接收到全部响应数据；

xhr.onreadystatechange = function(){
  if(xhr.readyState == 4){
    // 已经接收到全部响应数据，执行以下操作
    var data = xhr.responseText;
    console.log(data);
  }
};

设置响应数据类型

xhr.responseType = 'json';

超时设置

// 超时设置
xhr.timeout = 1000;
// 超时回调
xhr.ontimeout = function() {
  console.log('time out')
}
// 断网回调
xhr.onerror = function () {
  conosle.log('offline')
}

取消请求

xhr.abort();

重复请求

举个

AJAX学习

AJAX学习

1.简介

2.AJAX

推荐阅读