使用XMLHttpRequest与Webservice交互的JSON实战

"通过XMLHttpRequest调用Webservice时使用JSON传输数据的心得体会" 在Web开发中，XMLHttpRequest（简称XHR）是实现客户端与服务器端异步通信的关键技术。本篇文章主要探讨了如何利用XHR调用Webservice，并通过JSON格式传递和接收数据。以下是关于这个主题的详细讲解。 1. JSON与XMLHttpRequest的结合 JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，因其结构与JavaScript对象相似，因此在JavaScript中解析和生成JSON数据非常方便。在本例中，开发者选择JSON作为与Webservice交互的数据格式，以充分利用其对JS的友好性。 2. 创建XMLHttpRequest对象 首先，需要在JavaScript中创建一个XMLHttpRequest对象。对于现代浏览器，可以使用`new XMLHttpRequest()`，而对于较旧的IE浏览器，则需使用`new ActiveXObject('Microsoft.XMLHTTP')`。在示例代码中，`getXmlHttp()`函数实现了这个功能，它能兼容不同版本的浏览器。 3. 发送POST请求 调用Webservice通常采用HTTP的POST方法，因为POST能携带大量数据且更适合复杂的数据交互。在`webservice`函数中，`xmlHttp.open('POST', url + '/' + action, true)`用于初始化POST请求，`true`表示异步请求。 4. 设置请求头 在发送请求前，需要设置合适的请求头。对于JSON数据，应将`Content-Type`设置为`application/json;charset=utf-8`，表明数据格式为JSON且字符编码为UTF-8。`SOAPAction`头部则设置为Web方法的名称，这有助于服务器识别要执行的操作。 5. 发送JSON数据 数据以JSON格式通过`xmlHttp.send(data)`发送出去。在这里，`data`应是已转换为JSON字符串的参数。 6. 处理响应 XHR对象的`onreadystatechange`事件监听状态变化。当`readyState`属性变为4（表示请求已完成），会检查`status`属性以确定是否成功。如果`status`为200，表示请求成功，调用`success`回调处理返回的JSON数据；如果`status`在400到599之间，表示服务器错误，调用`error`回调；如果`status`为200且存在`complete`回调，执行`complete`函数。 7. 回调函数 `success`, `error`, `complete`和`failed`是自定义的回调函数，它们分别处理成功的响应、错误、完成（无论成功或失败）以及可能的其他自定义错误情况。 通过XMLHttpRequest调用Webservice并使用JSON进行数据交换，可以实现高效、灵活的前后端通信。这个过程涉及到对HTTP请求的理解、JSON格式的运用以及错误处理机制的设计，是Web开发中的重要技能。