ajax 人力网—示例代码

Ajax（Asynchronous JavaScript and XML）是一种用于在网页上进行异步数据交互的技术。它通过在不重新加载整个网页的情况下，实现在后台与服务器进行数据交互，并更新网页的部分内容。这种技术可以提高用户体验，减少数据传输量，并实现网页的动态刷新。

下面是一个使用Ajax的示例代码，它演示了如何通过Ajax从服务器获取人力资源网站的数据，并将数据动态地显示在网页上。

// 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 监听xhr对象的状态变化
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 当请求成功完成时，处理返回的数据
    var response = JSON.parse(xhr.responseText);
    var jobList = response.jobList;
    // 将获取到的数据动态地显示在网页上
    var jobListContainer = document.getElementById("jobListContainer");
    for (var i = 0; i < jobList.length; i++) {
      var job = jobList[i];
      var jobItem = document.createElement("div");
      jobItem.innerHTML = job.title;
      jobListContainer.appendChild(jobItem);
    }
  }
};
// 发送Ajax请求
xhr.open("GET", "https://example.com/api/jobs", true);
xhr.send();

在这段代码中，首先创建了一个XMLHttpRequest对象（xhr），它是用于发送Ajax请求的核心对象。然后，通过设置xhr对象的onreadystatechange属性，监听xhr对象的状态变化。当xhr对象的readyState属性为4（请求已完成）且status属性为200（请求成功）时，表示服务器返回了正确的响应数据。在这个回调函数中，我们可以处理返回的数据。

接下来，我们通过xhr对象的open方法指定了一个GET请求，并传入了一个URL（https://example.com/api/jobs）和一个布尔值（true，表示异步请求）。通过xhr对象的send方法发送了Ajax请求。

当服务器返回响应时，回调函数会被触发，我们可以通过xhr对象的responseText属性获取到服务器返回的数据。在示例代码中，我们将返回的数据解析为JSON格式，并将其中的职位信息显示在网页上。

通过这个示例代码，我们可以看到Ajax技术的基本用法，它可以帮助我们在不刷新整个网页的情况下，实现与服务器的数据交互，并实现网页的动态更新。