js之ajax

Ajax

为什么需要ajax

在浏览器中，我们可以在不刷新页面的情况下，通过ajax的方式去获取一些新的内容。

ajax的五个步骤

1、创建异步对象。即 XMLHttpRequest 对象。
2、使用open方法设置请求的参数。open(method, url, async)。参数解释：请求的方法、请求的url、是否异步。
3、发送请求。
4、注册事件。注册onreadystatechange事件，状态改变时就会调用。
5、获取返回的数据。

Ajax的兼容性

var xhr=null;  
if (window.XMLHttpRequest)  {
  // 兼容 IE7+, Firefox, Chrome, Opera, Safari  
  xhr=new XMLHttpRequest();  
} else{// 兼容 IE6, IE5 
  xhr=new ActiveXObject("Microsoft.XMLHTTP");  
}

get请求举例

document.querySelector('#btnAjax').onclick = function () {
  // （1）创建异步对象
  var ajaxObj = new XMLHttpRequest();

  // （2）设置请求的参数。包括：请求的方法、请求的url。
  ajaxObj.open('get', '02-ajax.php?name=Ethan&age=18');

  // （3）发送请求
  ajaxObj.send();

  //（4）注册事件。 onreadystatechange事件，状态改变时就会调用。
  ajaxObj.onreadystatechange = function () {
    // 为了保证 数据 完整返回，我们一般会判断 两个值
    if (ajaxObj.readyState == 4 && ajaxObj.status == 200) {
      // 数据是保存在 异步对象的 属性中
      console.log(ajaxObj.responseText);
    }
  }
}

post请求举例

// 创建异步对象
var xhr = new XMLHttpRequest();

// 设置属性
xhr.open('post', '02.post.php');

// 如果想要使用post提交数据,必须添加此行
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

// 将数据通过send方法传递
xhr.send('name=fox&age=18');

// 发送并接受返回值
xhr.onreadystatechange = function () {
    // 这步为判断服务器是否正确响应
    if (xhr.readyState == 4 && xhr.status == 200) {
        alert(xhr.responseText);
    }
};

onreadystatechange 事件

readyState：（存有 XMLHttpRequest 的状态。从 0 到 4 发生变化）
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

status：
200: "OK"。
404: 未找到页面。

服务器响应的内容

responseText：获得字符串形式的响应数据。
responseXML：获得 XML 形式的响应数据。

ajax封装

function ajax_tool(url, data, method, success) {
  let dataStr = ''
  data && for(let key in data) {
    dataStr += `${key}=${data[key]}&`
  }
  dataStr && dataStr.slice(0, -1)
  let ajax = new XMLHttpRequest()
  if (method === 'get') {
    dataStr && url += `?${dataStr}`
    ajax.open(mehtod, url)
    ajax.send()
  } else {
    ajax.open(method, url)
    // 需要设置请求报文
		ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded")
    if (dataStr) {
      ajax.send(dataStr)
    } else {
      ajax.send()
    }
  }

  // 注册事件
	ajax.onreadystatechange = function () {
		// 在事件中 获取数据 并修改界面显示
		if (ajax.readyState==4&&ajax.status==200) {
			// 数据成功获取以后，执行方法success()。
			success(ajax.responseText);
		}
	}
}

用promise封装ajax请求

function getNews(url) {
  //创建一个promise对象
  let promise = new Promise((resolve, reject) => {
      //初始化promise状态为pending
      //启动异步任务
      let request = new XMLHttpRequest();
      request.onreadystatechange = function () {
          if (request.readyState === 4) {
              if (request.status === 200) {
                  let news = request.response;
                  resolve(news);
              } else {
                  reject('请求失败了。。。');
              }
          }
      };
      request.responseType = 'json';//设置返回的数据类型
      request.open("GET", url);//规定请求的方法，创建链接
      request.send();//发送
  })
  return promise;
}

// 使用案例
getNews('http://localhost:3000/news?id=2')
.then((news) => {
    console.log(news);
    return getNews('http://localhost:3000' + news.commentsUrl);
}, (error) => {
    alert(error);
})
.then((comments) => {
    console.log(comments);
}, (error) => {
    alert(error);
})

fetch

什么是fetch

fetch的优点：1、语法简洁，更加语义化，业务逻辑更清晰。 2、基于标准 Promise 实现，支持 async/await

使用方法

document.getElementById('button3').addEventListener('click',getExternal);
function getExternal(){
  // https://api.github.com/users
  fetch("https://api.github.com/users")
      .then((res) => res.json())
      .then(data => {
        console.log(data);
        let output = '';
        data.forEach((user) => {
          output += `<li>${user.login}</li>`;
        })
        document.getElementById('output').innerHTML = output;
      })
      .catch(err => console.log(err));
}