ajax 像后台传送数据

Ajax是一种前端技术，用于实现异步数据传输。通过Ajax，我们可以在不刷新整个页面的情况下，向后台传送数据并获取响应结果。这种技术的应用非常广泛，比如在网页表单提交、搜索功能、即时通讯等场景下。本文将介绍如何使用Ajax向后台传送数据，并通过举例说明其应用。

在使用Ajax向后台传送数据之前，首先需要创建一个XMLHttpRequest对象。这个对象是Ajax的核心，用于向后台发送HTTP请求并接收响应。以下是创建XMLHttpRequest对象的示例代码：

var xmlhttp;
if (window.XMLHttpRequest) { // code for modern browsers
  xmlhttp = new XMLHttpRequest();
} else { // code for old IE browsers
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

一旦创建了XMLHttpRequest对象，我们就可以使用它发送HTTP请求。一般来说，常用的HTTP请求方法有GET和POST。GET方法用于从后台获取数据，而POST方法用于向后台发送数据。下面是一个使用GET方法向后台发送数据的示例：

xmlhttp.open("GET","example.PHP?q=" + str,true);
xmlhttp.send();

在上面的示例中，我们使用了open()方法设置了请求的类型、URL和是否异步。参数"q=" + str是要传送的数据，可以通过URL的查询字符串形式进行传递。发送请求的代码是通过send()方法实现的。

对于POST请求，我们可以通过setRequestHeader()方法设置请求头信息，并将数据通过send()方法发送至后台。以下是一个使用POST方法向后台发送数据的示例：

xmlhttp.open("POST","example.PHP",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("q=" + str);

需要注意的是，在使用POST方法发送数据时，需要设置请求头中的Content-type参数为"application/x-www-form-urlencoded"，以确保数据能够以表单形式传递。

一旦向后台发送了数据，并接收到了响应结果，可以通过onreadystatechange事件来处理响应。以下是一个处理响应的示例代码：

xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
    document.getElementById("result").innerHTML = xmlhttp.responseText;
  }
};

在上面的示例中，onreadystatechange事件会在每次readyState状态改变时触发。当readyState为4（即已完成）且status为200（即请求成功）时，我们通过innerHTML属性将后台返回的数据显示在页面上。

通过以上的代码示例，我们可以看到Ajax向后台传送数据的过程是相对简单的，只需创建XMLHttpRequest对象、设置请求类型和数据、发送请求以及处理响应即可。这种技术可以应用在各种需要实现异步数据传输的场景中，为用户提供更加流畅的体验。