Ajax

最新推荐文章于 2024-01-12 10:35:53 发布

原创最新推荐文章于 2024-01-12 10:35:53 发布 · 107 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

58 篇文章

订阅专栏

博客介绍利用JavaScript异步通信，从服务器获取XML文档数据更新网页对应部分，无需刷新整个页面。还阐述了实现步骤，包括创建XMLHttpRequest对象、HTTP请求，设置响应状态处理函数，发送请求及获取数据。

通过JavaScript的异步通信，从服务器获取XML文档中提取数据，再更新当前网页的对应部分，而不用刷新整个网页

创建XMLHttpRequest对象
创建一个HTTP请求
设置响应HTTP请求状态变化的处理函数
发送HTTP请求
获取请求到的数据

// promise 封装实现：

// promise 封装实现：
var url="https://www.fastmock.site/mock/3fb072dbb16cca4c775a62f70d4d873a/test/simple"
function getJSON(url) {
  // 创建一个 promise 对象
  let promise = new Promise(function(resolve, reject) {
    let xhr = new XMLHttpRequest();

    // 新建一个 http 请求
    xhr.open("GET", url, true);

    // 设置状态的监听函数
    xhr.onreadystatechange = function() {
      if (this.readyState !== 4) return;

      // 当请求成功或失败时，改变 promise 的状态
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    };

    // 设置错误监听函数
    xhr.onerror = function() {
      reject(new Error(this.statusText));
    };

    // 设置响应的数据类型
    xhr.responseType = "json";

    // 设置请求头信息
    xhr.setRequestHeader("Accept", "application/json");

    // 发送 http 请求
    xhr.send(null);
  });

  return promise;
}
getJSON(url)
.then(res=>{
	console.log(res)
})
.catch(err=>{
	console.log(err)
})