Ajax JSONP 跨域调用示例与解析

"讲解了如何使用Ajax和JSONP进行跨域数据传输，包括登录和点赞功能的实现示例代码。" Ajax 和 JSONP 跨域传参是一种常见的前端与后端交互方式，特别是在需要访问不同源的数据时。JSONP（JSON with Padding）是解决浏览器同源策略限制的一种方法，它允许 JavaScript 通过 `<script>` 标签来获取其他域名下的数据。 在给出的代码中，`LoginAjax` 函数展示了如何使用 jQuery 的 `$.ajax` 方法进行 JSONP 请求。关键设置有以下几点： 1. `url`：指定请求的目标 URL，这里是 "http://localhost:87/wSrvice.aspx"。 2. `type`：请求类型，设置为 `'get'`。 3. `dataType`：预期的返回数据类型，设置为 `'jsonp'`，告知 jQuery 我们期望的是 JSONP 响应。 4. `jsonp`：这是 jQuery 自定义的参数名，用于告诉服务器回调函数的名称，这里设置为 `"callback"`。 5. `data`：发送的数据，这里为空。 6. `success` 和 `error` 回调函数分别处理成功和失败的情况。 服务器端的 `text` 方法响应了 JSONP 请求。它从请求头中获取回调函数名（`callback`），然后构造一个 JavaScript 函数调用形式的字符串，即 `callback + '(' + JSON 数据 + ')'`，并将其作为响应内容返回。在这个例子中，返回的 JSON 数据是 `"{402:'Яtokenname'}"`。 另一个示例 `zan` 函数演示了使用 Ajax 进行 POST 请求来点赞（`Praise`）的功能。这里的 `contentType` 设置为 `'application/json;charset=utf-8'`，表示发送的数据格式为 JSON。`data` 参数是一个 JSON 字符串，包含要传递的参数 `id`。 在服务器端，有一个 `[WebMethod]` 标注的方法 `DianpingLogin`，这表明它是一个可以被 AJAX 调用的 Web 服务方法。该方法检查是否有迪庆点评（Dianping）的 Token 存储在 cookie 中，并返回相应的状态信息。 总结来说，这段代码展示了 JSONP 跨域请求的基本用法，以及使用 Ajax 进行 POST 请求的一个实例。在实际开发中，这样的技术常用于实现前后端分离的应用，让前端能够安全地从不同的源获取数据。