Ajax传递参数到XMLHttpReq.onreadystatechange方法

本文主要探讨如何在Ajax中给XMLHttpRequest对象的onreadystatechange事件处理函数传递参数，提供了两种实现方法，并给出了一段示例代码来解释具体操作。 在使用Ajax进行异步数据通信时，XMLHttpRequest对象的onreadystatechange事件是关键，它会在请求状态改变时被触发。通常，我们需要在事件处理函数内部对返回的数据进行处理。然而，有时我们可能需要在处理函数中使用外部变量或参数，这时就需要将这些参数传递给onreadystatechange的回调函数。 以下是两种常见的传递参数的方法： 1. 匿名函数方式： ```javascript xmlhttp.onreadystatechange = function() { xx(123); // 这里的123可以替换为你想要传递的任何参数 }; ``` 在这种方法中，我们将事件处理函数定义为一个匿名函数，并在其中调用实际需要执行的函数`xx`，并将参数传递进去。 2. Function构造函数方式： ```javascript xmlhttp.onreadystatechange = new Function("xx(123)"); ``` 这里使用了JavaScript的`Function`构造函数，创建一个新的函数实例，并在其中执行`xx`函数，同样传递参数。 以下是一个简单的例子，展示了如何在事件处理函数中使用外部变量： ```javascript // 获取表单元素 var m = document.getElementsByName('text8'); var v = m[i]; // 设置onreadystatechange事件处理函数，传入变量v xmlhttp.onreadystatechange = function() { proce(v); }; // 事件处理函数proce function proce(v) { if (xmlhttp.readyState == 4) { if (xmlhttp.status == 200) { var res = xmlhttp.responseXML.getElementsByTagName('content')[0].firstChild.data; v.value = res; // 更新表单元素的值 } else { v.value = '...'; // 请求失败时显示占位符 } } } ``` 这个例子中，`proce`函数接收了一个参数`v`，并在请求完成后更新与`v`关联的表单元素的值。 此外，为了创建XMLHttpRequest对象，代码还提供了一个兼容不同浏览器的`getXMLHttpRequest`函数： ```javascript function getXMLHttpRequest() { var xmlHttpRequest; try { xmlHttpRequest = new XMLHttpRequest(); } catch (e) { try { xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { // 如果以上两种方式都失败，抛出错误提示 } } return xmlHttpRequest; } ``` 这个函数首先尝试使用标准的XMLHttpRequest构造函数，如果在旧版IE中失败，会回退到使用ActiveXObject。 总结来说，通过将参数包含在匿名函数或Function构造函数中，我们可以将参数传递给XMLHttpRequest的onreadystatechange事件处理函数，从而在处理响应时使用这些参数。这种技术在动态构建和处理Ajax请求时非常有用。