JQuery的Ajax跨域请求原理概述及实例


Posted in Javascript onApril 26, 2013

今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到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 相关文章推荐
Web版彷 Visual Studio 2003 颜色选择器
Jan 09 Javascript
json 定义
Jun 10 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
Nov 14 Javascript
js仿百度有啊通栏展示效果实现代码
May 28 Javascript
node.js正则表达式获取网页中所有链接的代码实例
Jun 03 Javascript
js怎么判断flash swf文件是否加载完毕
Aug 14 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
Jun 15 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
May 12 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
Jun 13 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
Vue 引入AMap高德地图的实现代码
Apr 29 Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
May 16 Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
Apr 26 #Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
Apr 26 #Javascript
基于jquery中children()与find()的区别介绍
Apr 26 #Javascript
基于jQuery选择器的整理集合
Apr 26 #Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
Apr 26 #Javascript
Javascript计算两个marker之间的距离(Google Map V3)
Apr 26 #Javascript
jquery中.add()的使用分析
Apr 26 #Javascript
You might like
PHP中替换换行符的几种方法小结
2012/10/15 PHP
Yii2中添加全局函数的方法分析
2017/05/04 PHP
thinkPHP实现的省市区三级联动功能示例
2017/05/05 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
phpinfo的知识点总结
2019/10/10 PHP
对laravel的csrf 防御机制详解,及form中csrf_token()的存在介绍
2019/10/24 PHP
在 Laravel 6 中缓存数据库查询结果的方法
2019/12/11 PHP
如何通过PHP实现Des加密算法代码实例
2020/05/09 PHP
23个超流行的jQuery相册插件整理分享
2011/04/25 Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
2014/09/21 Javascript
第一次接触神奇的Bootstrap网格系统
2016/07/27 Javascript
详解angular中的作用域及继承
2017/05/31 Javascript
微信小程序 检查接口状态实例详解
2017/06/23 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
2020/03/04 Javascript
JavaScript实现答题评分功能页面
2020/06/24 Javascript
vue 实现把路由单独分离出来
2020/08/13 Javascript
利用Python命令行传递实例化对象的方法
2016/11/02 Python
Django 模型类(models.py)的定义详解
2019/07/19 Python
Pycharm的Available Packages为空的解决方法
2020/09/18 Python
详解Python爬虫爬取博客园问题列表所有的问题
2021/01/18 Python
全面总结使用CSS实现水平垂直居中效果的方法
2016/03/10 HTML / CSS
美国知名的在线旅游服务网站:Priceline
2016/07/23 全球购物
英国婴儿和儿童服装网站:Vertbaudet
2018/04/02 全球购物
ColourPop美国官网:卡拉泡泡,洛杉矶彩妆品牌
2019/04/28 全球购物
英国买鞋网站:Charles Clinkard
2019/11/14 全球购物
牵手50台湾:专为黄金岁月的单身人士而设的交友网站
2021/02/18 全球购物
会计岗位说明书
2014/07/29 职场文书
2014年保险业务员工作总结
2014/12/23 职场文书
财产保全担保书
2015/01/20 职场文书
我们的节日元宵节活动总结
2015/02/06 职场文书
阿凡达观后感
2015/06/10 职场文书
感恩教育观后感
2015/06/17 职场文书
苦儿流浪记读书笔记
2015/07/01 职场文书
P站美图推荐——变身女主角特辑
2022/03/20 日漫
MySql中的json_extract函数处理json字段详情
2022/06/05 MySQL
MySQL详细讲解变量variables的用法
2022/06/21 MySQL