jquery的ajax跨域请求原理和示例
2023-06-13 09:15:26 时间
今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发
JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式。分别是JQuery的jquery.ajaxjsonp格式和jquery.getScript方式。
什么是jsonp格式呢?API原文:如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型。使用这种类型的话,会创建一个查询字符串参数callback=?,这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名,以便完成一个有效的JSONP请求。意思就是远程服务端需要对返回的数据做下处理,根据客户端提交的callback的参数,返回一个callback(json)的数据,而客户端将会用script的方式处理返回数据,来对json数据做处理。JQuery.getJSON也同样支持jsonp的数据方式调用。
客户端JQuery.ajax的调用代码示例:
$.ajax({
type:"get",
async:false,
url:"http://www.xxx.com/ajax.do",
dataType:"jsonp",
jsonp:"callbackparam",//服务端用于接收callback调用的function名的参数
jsonpCallback:"success_jsonpCallback",//callback的function名称
success:function(json){
alert(json);
alert(json[0].name);
},
error:function(){
alert("fail");
}
});
服务端返回数据的示例代码:
publicvoidProcessRequest(HttpContextcontext){
context.Response.ContentType="text/plain";
StringcallbackFunName=context.Request["callbackparam"];
context.Response.Write(callbackFunName+"([{name:\"John\"}])");
}
相关文章
- jquery的ajax跨域解决方案「建议收藏」
- ajax cors跨域_jquery跨域
- jquery validation engine ajax验证,jQuery Validation Engine 表单验证「建议收藏」
- struts2:使用JQuery、JSON和AJAX处理请求详解编程语言
- jQuery Google Charts—-一个封装google chart api的jquery插件详解编程语言
- jquery基础详解编程语言
- jQuery与AJAX详解编程语言
- jquery swipper插件的一些弊端详解编程语言
- 学习Ajax基于MySQL的实例实践(ajax实例 mysql)
- 用jQuery扩展自写的UI导航
- Jquery+ajax请求data显示在GridView上(asp.net)
- 通过jquery的$.getJSON做一个跨域ajax请求试验
- jQuery页面图片伴随滚动条逐渐显示的小例子
- JQuery的Ajax跨域请求原理概述及实例
- Jquery同辈元素选中/未选中效果的实例代码
- 通过AJAX的JS、JQuery两种方式解析XML示例介绍
- jQuery插件jQuery-JSONP开发ajax调用使用注意事项
- jquery实现点击弹出层效果的简单实例
- js与jQuery实现的兼容多浏览器Ajax请求实例
- jQuery+ajax中getJSON()用法实例
- jQuery中DOM操作实例分析
- Jquery通过JSON字符串创建JSON对象