使用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数据:
以上就是在学习测试中的一些记录。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。