Ajax异步请求技术实例讲解

Ajax是一种在不重新加载网页的情况下，能够实现与服务器进行数据交互的技术，它可以帮助我们通过JavaScript向服务器发起异步请求，并在请求成功后执行一定的操作，例如更新页面内容等。

Ajax的基本使用方法

在JavaScript中使用Ajax，需要用到XMLHttpRequest对象，通过该对象来向服务器发起请求并获取响应结果。

以下是Ajax的基本流程：

1. 创建XMLHttpRequest对象。可以使用var xhr = new XMLHttpRequest();创建。

2. 向服务器发起请求。可以使用xhr.open("GET", url, true);向服务器发起GET请求。其中，url是请求的URL地址，true表示异步请求。

3. 发送请求。可以使用xhr.send();发送请求。

4. 接收响应。可以使用xhr.onreadystatechange = function() { ... }监听请求状态的变化，并根据状态判断是否已经成功接收到服务器的响应数据。

通过以上步骤，我们可以实现使用Ajax发送请求并获取响应数据。接下来，我们将通过两个实例来详细讲解Ajax的使用方法。

实例一：使用Ajax获取GitHub仓库信息

以下是使用Ajax来获取GitHub仓库信息的代码示例：

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.github.com/users/octocat/repos", true);
xhr.send();
xhr.onreadystatechange = function() {
  if (this.readyState === 4 && this.status === 200) {
    var repos = JSON.parse(this.responseText);
    var repoList = document.createElement("ul");
    for (var i = 0; i < repos.length; i++) {
      var repoItem = document.createElement("li");
      var repoLink = document.createElement("a");
      repoLink.innerHTML = repos[i].name;
      repoLink.href = "https://github.com/octocat/" + repos[i].name;
      repoItem.appendChild(repoLink);
      repoList.appendChild(repoItem);
    }
    document.getElementById("repo-container").appendChild(repoList);
  }
};

以上代码实现了向GitHub API请求获取octocat用户的所有仓库信息，并将结果显示在页面上。其中，我们通过XMLHttpRequest对象创建了一个GET请求，并通过onreadystatechange事件监听状态的变化，当状态变为4（已经完成响应）并且状态码为200（请求成功），则解析响应的JSON数据，并将结果以\<ul>\<li>\<a>\</a>\</li>\</ul>的格式显示在页面上。

实例二：使用Ajax实现实时搜索

以下是使用Ajax实现实时搜索的代码示例：

var searchBox = document.getElementById("search-box");
var resultContainer = document.getElementById("result-container");
var xhr;
searchBox.addEventListener("input", function() {
  var query = this.value;
  if (query) {
    if (xhr) {
      xhr.abort();
    }
    xhr = new XMLHttpRequest();
    xhr.open("GET", "https://api.github.com/search/repositories?q=" + query, true);
    xhr.send();
    xhr.onreadystatechange = function() {
      if (this.readyState === 4 && this.status === 200) {
        var result = JSON.parse(this.responseText);
        resultContainer.innerHTML = "";
        var resultItems = result.items;
        for (var i = 0; i < resultItems.length; i++) {
          var resultItem = document.createElement("div");
          resultItem.innerHTML = "<div><a href='" + resultItems[i].html_url + "'>" + resultItems[i].name + "</a></div>" 
                              + "<div>" + resultItems[i].description + "</div>";
          resultContainer.appendChild(resultItem);                             
        }
      }
    };
  }
  else {
    resultContainer.innerHTML = "";
  }
});

以上代码实现了在输入关键词时实时向GitHub API发起搜索请求，并将响应结果实时显示在页面上。其中，我们通过监听input事件来获取搜索框的输入关键词，当输入不为空时，创建XMLHttpRequest对象发送GET请求并监听响应，当响应完成时，解析响应的JSON数据，并将结果动态显示在页面上。

以上两个实例都展示了Ajax的基本使用方法，我们可以根据需求来灵活应用，并实现更多复杂的异步请求功能。