ajax方法结构详解【示例代码】

Ajax（Asynchronous JavaScript and XML）是一种用于在网页上进行异步数据交互的技术。它允许网页通过在后台与服务器进行数据交换，实现在不刷新整个页面的情况下更新部分页面内容。

使用Ajax的关键是通过JavaScript创建一个XMLHttpRequest对象，然后使用该对象发送HTTP请求到服务器，并处理服务器返回的数据。下面是一个简单的Ajax方法的结构：

function ajax(method, url, data, successCallback) {
  var xhr = new XMLHttpRequest();
  xhr.open(method, url, true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      successCallback(xhr.responseText);
    }
  };
  if (method === 'POST') {
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  }
  xhr.send(data);
}

上述代码定义了一个名为ajax的函数，它接受四个参数：method（请求方法），url（请求地址），data（请求数据），successCallback（请求成功后的回调函数）。

在函数内部，首先创建了一个XMLHttpRequest对象xhr。然后使用xhr.open方法设置请求的方法和URL，并通过第三个参数设置请求为异步。接下来，通过xhr.onreadystatechange属性指定一个回调函数，该函数会在xhr对象的状态发生改变时被调用。在回调函数中，通过xhr.readyState属性判断请求的状态，当状态为4（请求已完成）且xhr.status为200（请求成功）时，调用successCallback函数，并将服务器返回的数据作为参数传递给它。

如果请求方法为POST，则还需要调用xhr.setRequestHeader方法设置请求头的Content-Type为application/x-www-form-urlencoded。通过xhr.send方法发送请求，并将请求数据作为参数传递给它。

通过以上的示例代码，我们可以看到Ajax方法的结构：创建XMLHttpRequest对象、设置请求方法和URL、设置回调函数、发送请求。这样就能实现在网页上进行异步数据交互，从而更新页面内容而不刷新整个页面。