jQuery与WebService跨域访问实战：JSONP与JSON处理

需积分: 9 110 浏览量更新于2024-09-13 收藏 2KB TXT 举报

本文主要探讨了在jQuery框架下如何处理AJAX跨域访问的问题，以及与Web服务（WebService）的交互。在Ajax请求中，通常遇到的跨域问题源于同源策略（Same-Origin Policy），该策略限制了浏览器允许脚本来自不同源的资源进行操作。以下将详细介绍两个示例，一个使用JSONP（JSON with Padding）技术解决跨域，另一个是通过WebService接口并利用`JsonSerializer`进行数据序列化和反序列化。 1. **JSONP解决跨域访问** JSONP（JSON with Padding）是一种JSON数据包装技术，它绕过同源策略限制的方式是在URL中添加一个特定的回调函数名（如`jsoncallback=?`）。在这个例子中，开发者使用jQuery的`.ajax()`方法，设置`type`为"POST"，`url`指向包含`jsoncallback`参数的服务端地址，如`http://192.168.11.252/GS/WS/GS.asmx/TestJsonp?jsoncallback=?`。当服务返回带有这个回调函数名的结果时，由于这个函数名是由客户端动态生成的，浏览器会执行这个函数，并传递回接收到的数据。这里，`success`回调函数用于处理返回的JSONP数据。 2. **使用WebService进行数据交互** 对于WebService，开发者通常创建一个支持JSON格式的方法，如`TestJsonp`，其输入参数为`userId`，返回类型为字符串。在这个例子中，`TestJsonp`方法接受用户ID并返回一个包含`msg`属性的对象。`GetResult`方法是一个私有辅助方法，用于创建`ResultStruct`对象，并通过`JsonSerializer`序列化返回的数据。开发者在第二个`.ajax()`调用中发送JSON数据，并期望服务器返回JSON格式的结果。如果请求成功，`success`回调会解析并处理返回的JSON数据。总结来说，本文展示了如何利用jQuery的AJAX功能结合JSONP技术解决跨域访问问题，以及如何在前后端之间通过WebService进行数据交换，包括数据序列化和反序列化的过程。理解并掌握这些技巧对于开发基于Web的应用程序、处理跨域通信以及构建可扩展的后端架构至关重要。

----jquery调用
var serviceUrl="http://192.168.11.252/GS/WS/GS.asmx";
$(function () {
var data = {};
data.userId = "sdfasdf";
$.ajax({
type: "post",
url: serviceUrl + "/TestJsonp?jsoncallback=?",
data: data,//跨域参数传递
dataType: 'jsonp',
jsonp: "jsoncallback",
success: function (result) {//直接使用
var a = "";
},
error: function (a, b, c) {
alert(c);
}
});
$.ajax({
type: "post",
contentType: "application/json",
url: serviceUrl + "/TestJsonp",
data: "{'userId':'131231'}",//直接使用参数传递
dataType: 'json',
// async: false,
success: function (result) {//需要json反序列化
var model = JSON.parse(result.d);
}
,
error: function (error) {

下载后可阅读完整内容，剩余2页未读，立即下载

cnysck

粉丝: 0
资源: 26

jQuery与WebService跨域访问实战：JSONP与JSON处理

Ajax跨域访问(ASP.NET Web)

怎样实现Ajax 跨域访问

Ajax跨域访问解决方案

ajax 跨域 源码下载

ajax 设置Access-Control-Allow-Origin实现跨域访问

js 跨域访问给出示例

原生js解决ajax跨域

has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space `local`

ajax资源跨域问题解决方法

java ajax 跨域access-control-allow-origin

最新资源

ajax 跨域源码下载