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 CSS修改学习第五章 给“上传”添加样式
Feb 19 Javascript
require.js深入了解 require.js特性介绍
Sep 04 Javascript
简述JavaScript的正则表达式中test()方法的使用
Jun 16 Javascript
JavaScript让Textarea支持tab按键的方法
Jun 26 Javascript
有关Promises异步问题详解
Nov 13 Javascript
Bootstrap项目实战之首页内容介绍(全)
Apr 25 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
Jun 12 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
Dec 25 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
Mar 30 Javascript
详解用node-images 打造简易图片服务器
May 08 Javascript
VUE中的无限循环代码解析
Sep 22 Javascript
vue自定义指令的创建和使用方法实例分析
Dec 04 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
提升PHP执行速度全攻略(下)
2006/10/09 PHP
php 分库分表hash算法
2009/11/12 PHP
将一维或多维的数组连接成一个字符串的php代码
2010/08/08 PHP
php数据库连接时容易出错的特殊符号问题
2010/09/01 PHP
php数组函数序列之array_flip() 将数组键名与值对调
2011/11/07 PHP
php ci框架中加载css和js文件失败的原因及解决方法
2014/07/29 PHP
php删除数组中重复元素的方法
2015/12/22 PHP
PHP url的pathinfo模式加载不同控制器的简单实现
2016/08/12 PHP
php使用crypt()函数进行加密
2017/06/08 PHP
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
2010/02/07 Javascript
javascript textContent与innerText的异同分析
2010/10/22 Javascript
修改jquery.lazyload.js实现页面延迟载入
2010/12/22 Javascript
基于jquery的无限级联下拉框js插件
2011/10/29 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
2014/12/10 Javascript
基于jQuery实现点击弹出层实例代码
2016/01/01 Javascript
基于JS实现的笛卡尔乘积之商品发布
2016/05/13 Javascript
react开发中如何使用require.ensure加载es6风格的组件
2017/05/09 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
2017/05/11 Javascript
jquery实现图片放大点击切换
2017/06/06 jQuery
Angular2 自定义validators的实现方法
2017/07/05 Javascript
javaScript封装的各种写法
2017/08/14 Javascript
Element Cascader 级联选择器的使用示例
2020/07/27 Javascript
vue flex 布局实现div均分自动换行的示例代码
2020/08/05 Javascript
python正则表达式match和search用法实例
2015/03/26 Python
使用pandas中的DataFrame数据绘制柱状图的方法
2018/04/10 Python
Python3.5文件读与写操作经典实例详解
2019/05/01 Python
PYQT5实现控制台显示功能的方法
2019/06/25 Python
python程序文件扩展名知识点详解
2020/02/27 Python
python中如何使用虚拟环境
2020/10/14 Python
CSS3等相关属性制作分页导航实现代码
2012/12/24 HTML / CSS
享受加州生活方式的时尚舒适:XCVI
2018/07/09 全球购物
serialVersionUID具有什么样的特征
2014/02/20 面试题
期末自我鉴定
2014/02/02 职场文书
团结演讲稿范文
2014/05/23 职场文书
开国大典观后感
2015/06/04 职场文书
趣味运动会新闻稿
2015/07/17 职场文书