AJAX和JSON是前端开发中常用的技术，它们可以让网页实现异步加载数据并动态更新页面内容。在实际应用中，经常需要通过AJAX向服务器发送参数，并使用JSON格式接收响应数据。本文将通过一个实例来演示使用AJAX和JSON传参的过程，并详细解释代码背后的逻辑。
假设我们正在开发一个电子商务网站，我们需要根据用户输入的关键词动态搜索商品信息并展示在页面上。为了实现这个功能，我们需要使用AJAX发送关键词参数给服务器，并使用JSON格式接收服务器返回的商品信息。以下是示例代码：
// HTML代码
<body>
<input type="text" id="keyword" placeholder="请输入关键词">
<button onclick="search()">搜索</button>
<div id="result"></div>
</body>
// JavaScript代码
<script>
function search() {
var keyword = document.getElementById("keyword").value;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var data = JSON.parse(this.responseText);
displayResult(data);
}
};
xmlhttp.open("GET", "search.php?keyword=" + keyword, true);
xmlhttp.send();
}
function displayResult(data) {
var resultDiv = document.getElementById("result");
resultDiv.innerHTML = "";
for (var i = 0; i< data.length; i++) {
var productDiv = document.createElement("div");
var productName = document.createElement("h3");
var productPrice = document.createElement("p");
productName.textContent = data[i].name;
productPrice.textContent = "价格：" + data[i].price;
productDiv.appendChild(productName);
productDiv.appendChild(productPrice);
resultDiv.appendChild(productDiv);
}
}
</script>在该实例中，当用户点击搜索按钮时，JS函数search()会被触发。该函数首先从页面中获取用户输入的关键词，并创建XMLHttpRequest对象。然后，我们定义一个回调函数来处理服务器响应的数据。当AJAX请求状态为4（即已完成）且服务器响应状态为200（即成功）时，我们使用JSON.parse()方法将服务器响应的文本数据转为JavaScript对象，并调用displayResult()函数展示搜索结果。
接下来，我们在search()函数中使用open()方法打开一个GET请求，URL参数中包含了用户输入的关键词。然后，我们使用send()方法发送请求。服务器接收到该请求后，进一步处理关键词参数，查询相关商品信息，并将结果以JSON格式返回给前端。
最后，我们在displayResult()函数中循环遍历服务器返回的商品信息，并将每个商品的名称和价格动态创建为HTML元素，通过appendChild()方法将它们添加到页面中。
通过这个实例，我们可以看到使用AJAX和JSON传参的具体过程。通过AJAX发送参数，我们可以实现与服务器的数据交互。使用JSON格式接收响应数据，我们可以方便地处理和展示返回的信息。这种方式不仅可以用于搜索功能，还可以应用于其他涉及到参数传递和数据交互的前端开发场景。