jquery的ajax跨域请求原理和示例


Posted in Javascript onMay 08, 2014

今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发
JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式。分别是JQuery的 jquery.ajax jsonp格式和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'); 
} 
});

服务端返回数据的示例代码:

public void ProcessRequest (HttpContext context) { 
context.Response.ContentType = "text/plain"; 
String callbackFunName = context.Request["callbackparam"]; 
context.Response.Write(callbackFunName + "([ { name:\"John\"}])"); 
}
Javascript 相关文章推荐
javascript 24小时弹出一次的代码(利用cookies)
Sep 03 Javascript
javascript定义函数的方法
Dec 06 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
Jul 20 Javascript
JavaScript  event对象整理及详细介绍
Oct 10 Javascript
BootStrap中Table隐藏后显示问题的实现代码
Aug 31 Javascript
浅谈vue+webpack项目调试方法步骤
Sep 11 Javascript
node.js博客项目开发手记
Mar 16 Javascript
微信小程序实现图片上传功能
May 28 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
Sep 02 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
Oct 31 Javascript
vue fetch中的.then()的正确使用方法
Apr 17 Javascript
Element Alert警告的具体使用方法
Jul 27 Javascript
Javascript单元测试框架QUnitjs详细介绍
May 08 #Javascript
javascript与有限状态机详解
May 08 #Javascript
ajax提交表单实现网页无刷新注册示例
May 08 #Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
May 08 #Javascript
js动态删除div元素基本思路及实现代码
May 08 #Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
May 08 #Javascript
jquery查找tr td 示例模拟
May 08 #Javascript
You might like
Yii 2.0中场景的使用教程
2017/06/02 PHP
javascript静态的url如何传递
2007/05/03 Javascript
dojo学习第二天 ajax异步请求之绑定列表
2011/08/29 Javascript
JQuery防止退格键网页后退的实现代码
2012/03/23 Javascript
jquery 滚动条事件简单实例
2013/07/12 Javascript
使用JavaScript制作一个简单的计数器的方法
2015/07/07 Javascript
分享纯手写漂亮的表单验证
2015/11/19 Javascript
正则表达式,替换所有HTML标签的简单实例
2016/11/28 Javascript
微信小程序 picker-view 组件详解及简单实例
2017/01/10 Javascript
Swiper自定义分页器使用详解
2017/12/28 Javascript
vue 实现剪裁图片并上传服务器功能
2018/03/01 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
2018/10/10 Javascript
python开发之thread线程基础实例入门
2015/11/11 Python
老生常谈Python基础之字符编码
2017/06/14 Python
Python实现抢购IPhone手机
2018/02/07 Python
pycharm在调试python时执行其他语句的方法
2018/11/29 Python
python中selenium操作下拉滚动条的几种方法汇总
2019/07/14 Python
Python3 tkinter 实现文件读取及保存功能
2019/09/12 Python
Django框架HttpResponse对象用法实例分析
2019/11/01 Python
记一次pyinstaller打包pygame项目为exe的过程(带图片)
2020/03/02 Python
使用 css3 transform 属性来变换背景图的方法
2019/05/07 HTML / CSS
纯HTML5+CSS3制作生日蛋糕(代码易懂)
2016/11/16 HTML / CSS
Vrbo西班牙:预订您的度假公寓(公寓、乡村房屋…)
2020/04/27 全球购物
优秀幼教自荐信
2014/02/03 职场文书
红旗方阵解说词
2014/02/12 职场文书
《月光启蒙》教学反思
2014/03/01 职场文书
2014年大学班级工作总结
2014/11/14 职场文书
团代会闭幕词
2015/01/28 职场文书
小学端午节活动总结
2015/02/11 职场文书
六一儿童节致辞稿(3篇)
2019/07/11 职场文书
餐饮行业关注的9大营销策略
2019/08/26 职场文书
七年级作文之《我和我的祖国》观后感作文
2019/10/18 职场文书
Python 如何安装Selenium
2021/05/06 Python
教你使用Python pypinyin库实现汉字转拼音
2021/05/27 Python
js中Object.create实例用法详解
2021/10/05 Javascript
MySQL 语句执行顺序举例解析
2022/06/05 MySQL