使用jsonp进行跨站点数据访问

使用jsonp 可以解决ajax 的跨域问题，使用起来比较简单。

具体的测试环境搭建如下

1.一个简单的MVC 站点

2.一个简单的html文件（这次的测试是在web 站点中，当然可以是一个简单的html 文件）

MVC 的设计代码如下

public class ActionloginController : Controller
{

public ActionResult dalong(string name)
{
var list = new List<User>();
for (int i = 0; i < 20000; i++)
{
list.Add(new User() { userage = i + 1, username = name });
}
var tep = Newtonsoft.Json.JsonConvert.SerializeObject(list);
var requesest= HttpContext.Request["callback"];
HttpContext.Response.ContentType = "text/plain";
var respond = HttpContext.Response;
var data = new User() { userage = 333, username = "dddddd" };
var datatep = Newtonsoft.Json.JsonConvert.SerializeObject(data);
respond.Write(requesest + "(" + tep + ")");
Response.End();
return null;
}
}

以上代码就是在controller 中编写的action 就是进行数据集合的序列化以及解析使用jquery ajax 方法 返回的jsonp 请求

callback 是我们定义的处理回调函数

html端的代码

ajax 的代码如下：

function TestAjax() {

$.ajax({
type: "get",
async: false,
url: "http://localhost:55721/Actionlogin/dalong", //实际上访问时产生的地址为: ajax.ashx?callbackfun=jsonpCallback&id=10
data: { name: "dalonrrr" },
cache: false, //默认值true
dataType: "jsonp",
jsonpCallback: "dalongcallback",
//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
//如果这里自定了jsonp的回调函数，则success函数则不起作用;否则success将起作用
success: ongetdata,
error:function(){
alert('fail');
}
});
}

ongetdata 方法如下：

function ongetdata(result) {

var data = result;
listdemo = result;
var tep = "";
for (var i = 0; i < 3; i++) {
tep += "user name is :" + data[i].username + "user age is :" + data[i].userage + "\n";
}
}

listdemo  为全局变量进行数据的存储

数据显示的代码如下:

function dispaly() {
var ul = document.getElementById('list');
for (var i = 0; i < listdemo.length; i++) {
var li = document.createElement('li');
li.innerHTML = '<p> username is :' + listdemo[i].username + 'user age is :' + listdemo[i].userage + '</p>';
ul.appendChild(li);
}

}

进行测试的界面

jquery ajax 生成的请求参数：

服务器返回的请求数据：

对应的json数据：

以上就是在学习测试中的一些记录。