现在位置: 首页 / Java / 正文

理解 `javascriptvoid(0)` 与异步 AJAX 技术（九）

  • admin
  • Java
  • 2天前
  • 7热度
  • 0评论

在前端开发中，javascript:void(0) 和异步 AJAX 编程是两个非常实用且常见的技术点。本文将详细介绍 javascript:void(0) 的作用和用法，并深入探讨异步 AJAX 编程的基本概念和实际应用。通过本文，你将能够更好地理解和运用这些技术，提升你的前端开发技能。

javascript:void(0) 的含义与用法

什么是 javascript:void(0)？

在前端开发中，我们经常看到这样的代码：<a href="javascript:void(0)">点击我</a>。这里的 javascript:void(0) 是什么意思呢？关键在于 void 关键字。

void 是 JavaScript 中的一个关键字，它的作用是计算一个表达式但不返回任何值。具体来说，void 关键字会计算其后的表达式，但返回 undefined。因此，javascript:void(0) 的作用是计算 0，但不返回任何值，从而避免链接的默认行为。

示例

创建一个无操作的链接

<a href="javascript:void(0)">点击此处什么也不会发生</a>

在这个例子中，当用户点击链接时，void(0) 会被计算为 0，但没有任何实际效果，链接不会跳转到其他页面。

显示警告信息


<p>点击以下链接查看结果：</p>
<a href="javascript:void(alert('警告！'))">点我!</a>

在这个例子中，当用户点击链接时，会弹出一个警告框显示“警告！”。

返回 undefined

<script>
function getValue() {
  var a, b, c;
  a = void (b = 5, c = 7);
  document.write('a = ' + a + ' b = ' + b + ' c = ' + c);
}
</script>
<a href="javascript:void(getValue())">点我查看结果</a>

在这个例子中，a 的值会被设置为 undefined，而 b 和 c 的值分别为 5 和 7。

href="#" 与 href="javascript:void(0)" 的区别

href="#" 和 href="javascript:void(0)" 都可以用来创建一个无操作的链接，但它们的行为有所不同。

  • href="#"：这个链接会将页面滚动到顶部，因为它默认指向页面的顶部锚点 #top。在页面很长的情况下，这可能会导致用户体验不佳。
  • href="javascript:void(0)"：这个链接不会有任何实际效果，只是一个“死链接”。它不会改变页面的滚动位置，也不会触发任何默认行为。

因此，如果你需要创建一个无操作的链接，推荐使用 href="javascript:void(0)"。

示例

<a href="javascript:void(0);">点我没有反应的!</a>
<a href="#pos">点我定位到指定位置!</a><br>
...
<br>
<p id="pos">尾部定位点</p>

在这个例子中，第一个链接点击后没有任何反应，而第二个链接会将页面滚动到 id 为 pos 的元素位置。

异步 AJAX 编程

异步的概念

异步（Asynchronous, async）是与同步（Synchronous, sync）相对的概念。在传统的单线程编程中，程序的运行是同步的，即按顺序执行每一行代码。而异步编程则允许某些任务在后台执行，不会阻塞主线程，从而提高程序的响应性和性能。

为什么需要异步编程？

在前端开发中，处理一些耗时的操作（如网络请求、文件读写等）时，如果使用同步方式，会阻塞主线程，导致页面失去响应。为了避免这种情况，我们通常使用异步编程。

回调函数

回调函数是异步编程中最基本的实现方式。回调函数是一个在异步任务完成后被调用的函数。通过传递回调函数，我们可以确保在异步任务完成后执行特定的代码。

示例

使用 setTimeout 实现异步操作

function print() {
  document.getElementById("demo").innerHTML = "RUNOOB!";
}
setTimeout(print, 3000);

在这个例子中，setTimeout 函数会在 3 秒后执行 print 函数，将 demo 元素的内容设置为 “RUNOOB!”。

匿名函数作为回调

setTimeout(function() {
  document.getElementById("demo").innerHTML = "RUNOOB!";
}, 3000);

在这个例子中，我们直接传递了一个匿名函数作为回调，效果与上一个例子相同。

主线程与子线程的执行顺序

setTimeout(function() {
  document.getElementById("demo1").innerHTML = "RUNOOB-1!";
}, 3000);
document.getElementById("demo2").innerHTML = "RUNOOB-2!";

在这个例子中，setTimeout 会在 3 秒后执行回调函数，将 demo1 元素的内容设置为 “RUNOOB-1!”，而 demo2 元素的内容会立即被设置为 “RUNOOB-2!”。

异步 AJAX 请求

AJAX（Asynchronous JavaScript and XML）是一种在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。XMLHttpRequest 对象是实现 AJAX 请求的核心。

使用 XMLHttpRequest 发送异步请求

var xhr = new XMLHttpRequest();
xhr.onload = function() {
  document.getElementById("demo").innerHTML = xhr.responseText;
};
xhr.onerror = function() {
  document.getElementById("demo").innerHTML = "请求出错";
};

xhr.open("GET", "https://www.runoob.com/try/ajax/ajax_info.txt", true);
xhr.send();

在这个例子中，xhr.onload 和 xhr.onerror 分别是请求成功和失败时的回调函数。

使用 jQuery 发送异步请求

$.get("https://www.runoob.com/try/ajax/demo_test.php", function(data, status) {
  alert("数据: " + data + "\n状态: " + status);
});

在这个例子中，$.get 方法发送一个 GET 请求，并在请求成功时执行回调函数。

Promise

Promise 是 ES6 引入的一种处理异步操作的新方式。它提供了一种更优雅、更易于管理的异步编程模型。

Promise 的基本概念

  • Pending：初始状态，既不是成功，也不是失败。
  • Fulfilled：操作成功完成。
  • Rejected：操作失败。

创建 Promise

const myPromise = new Promise((resolve, reject) => {
  // 异步操作代码
  if (/* 操作成功 */) {
    resolve('成功的结果'); // 将 Promise 状态改为 Fulfilled
  } else {
    reject('失败的原因'); // 将 Promise 状态改为 Rejected
  }
});

使用 then 和 catch 处理 Promise

myPromise.then(
  (result) => {
    console.log('成功:', result);
  },
  (error) => {
    console.error('失败:', error);
  }
);

myPromise
  .then((result) => {
    console.log('成功:', result);
  })
  .catch((error) => {
    console.error('失败:', error);
  });

使用 finally 处理最终状态

myPromise
  .then((result) => {
    console.log('成功:', result);
  })
  .catch((error) => {
    console.error('失败:', error);
  })
  .finally(() => {
    console.log('操作完成');
  });

链式调用

doFirstThing()
  .then((result) => doSecondThing(result))
  .then((newResult) => doThirdThing(newResult))
  .then((finalResult) => {
    console.log('最终结果:', finalResult);
  })
  .catch((error) => {
    console.error('链中某处出错:', error);
  });

静态方法

  • Promise.all：等待所有 Promise 完成，或任意一个 Promise 失败。
  • Promise.race：返回最先完成（无论成功或失败）的 Promise 的结果。
  • Promise.resolve 和 Promise.reject：快速创建已解决或已拒绝的 Promise。

实际应用示例

使用 Promise 处理 AJAX 请求

function fetchData(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(xhr.response);
      } else {
        reject(new Error(xhr.statusText));
      }
    };
    xhr.onerror = () => reject(new Error('网络错误'));
    xhr.send();
  });
}

fetchData('https://api.example.com/data')
  .then((data) => {
    console.log('获取数据成功:', data);
  })
  .catch((error) => {
    console.error('获取数据失败:', error);
  });

使用 Promise 链处理多个异步操作

function getUser(userId) {
  return fetch(`/users/${userId}`);
}

function getPosts(userId) {
  return fetch(`/users/${userId}/posts`);
}

getUser(123)
  .then((user) => {
    console.log('获取用户信息:', user);
    return getPosts(user.id);
  })
  .then((posts) => {
    console.log('获取用户帖子:', posts);
  })
  .catch((error) => {
    console.error('操作失败:', error);
  });

常见问题与最佳实践

  1. 避免 Promise 嵌套

    • 错误做法：回调地狱的 Promise 版本。
    • 正确做法：使用链式调用。

  2. 总是处理拒绝情况

    • 忘记处理 Promise 的拒绝会导致“未捕获的 Promise 拒绝”错误。总是使用 .catch() 或 try/catch（在 async/await 中）来处理错误。

  3. Promise 不是可取消的

    • 一旦创建，Promise 就无法取消。如果需要取消功能，可以考虑使用 AbortController 或其他模式。

  4. 常见问题（FAQ）

    • Q: then、catch 和 finally 序列能否顺序颠倒？
      • A: 可以，效果完全一样。但不建议这样做，最好按 then-catch-finally 的顺序编写程序。
    • Q: 除了 then 块以外，其它两种块能否多次使用？
      • A: 可以，finally 与 then 一样会按顺序执行，但 catch 块只会执行第一个，除非 catch 块里有异常。所以最好只安排一个 catch 和 finally 块。

通过本文的介绍，相信你已经对 javascript:void(0) 和异步 AJAX 编程有了更深入的理解。希望这些知识能帮助你在前端开发中更加得心应手。