使用XmlHttpRequest调用ASP.NET Webservice的实战经验

"这篇文章主要分享了作者在使用XmlHttpRequest调用Webservice时的心得体会，包括如何处理JSON数据，设置请求头以及处理响应状态。" 在Web开发中，前端与后端之间的通信是一个重要的环节，而XmlHttpRequest（简称XHR）是实现这种通信的一种常见方式。在本文中，作者提到他们因为项目需求，需要使用前端和移动客户端调用ASP.NET的Webservice来获取信息。Webservice是一种提供服务的平台，可以接收并处理来自不同源的请求，而XMLHttpRequest则是JavaScript中的一个API，用于在不刷新整个页面的情况下与服务器进行异步数据交换。 在尝试通过XmlHttpRequest调用Webservice的过程中，作者选择了JSON作为数据交换格式，原因在于JSON在JavaScript中的解析和构造相对简单且高效。在发起POST请求时，URL被设置为Webservice的asmx页面地址加上Web方法名。请求头（RequestHeader）中，Content-Type字段被设定为"application/json; charset=utf-8"，表明发送的数据是JSON格式，并且字符集为UTF-8。SOAPAction字段通常用于标识Web服务方法，这里也被设置为Web方法名。 以下是一个简单的示例代码片段，展示了如何创建XMLHttpRequest对象、设置请求方法、打开连接以及处理响应状态： ```javascript function getXmlHttp() { var xmlHttp; if (window.XMLHttpRequest) { // 适用于现代浏览器 xmlHttp = new XMLHttpRequest(); } else { // 适用于旧版IE浏览器 xmlHttp = new ActiveXObject('Microsoft.XMLHTTP'); } return xmlHttp; } function webservice(url, action, data, success, error, complete, failed) { var xmlHttp = getXmlHttp(); // 获取XMLHttpRequest对象 xmlHttp.open('POST', url + '/' + action, true); // 异步请求数据 xmlHttp.onreadystatechange = function() { if (xmlHttp.readyState == 4) { try { if (xmlHttp.status == 200 && typeof success == 'function') { success(xmlHttp.responseText); } else if ((xmlHttp.status / 100 == 4 || xmlHttp.status / 100 == 5) && typeof error == 'function') { error(xmlHttp.responseText); } } catch (e) { if (typeof failed == 'function') { failed(e); } } } }; xmlHttp.setRequestHeader("Content-type", "application/json; charset=utf-8"); xmlHttp.setRequestHeader("SOAPAction", action); xmlHttp.send(JSON.stringify(data)); // 发送JSON格式的数据 } ``` 这个`webservice`函数接收Webservice的URL、Web方法名、JSON格式的数据以及各种回调函数。当请求成功时，`success`回调会被调用，传入响应的文本；如果发生错误，`error`回调会被调用；在所有操作完成后，无论成功还是失败，`complete`回调都会被执行。此外，还存在一个`failed`回调用于捕获可能的异常。 通过这种方式，前端能够与Webservice进行交互，获取或发送数据，实现了前后端的通信。然而，需要注意的是，跨域访问（CORS）和安全问题也需要在实际应用中予以考虑和配置，以确保数据传输的安全和有效。此外，随着技术的发展，如今更多地使用fetch API或者axios等库来替代原生的XMLHttpRequest，以获得更现代、更简洁的API使用体验。