跨域请求之jQuery的ajax jsonp的使用解惑


Posted in Javascript onOctober 09, 2011

直接执行了error方法提示错误——ajax jsonp之前并没有用过,对其的理解为跟普通的ajax请求差不多,没有深入了解;出现了这种错误,几经调试(检查后台的代码和js部分的属性设置)还是不行,让我感觉很是意外和不解。于是,决定仔细研究下ajax jsonp的使用,并将最后测试成功的学习经验和大家分享下!

首先,贴出可以成功执行的代码:
(页面部分)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>Untitled Page</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript"> 
jQuery(document).ready(function(){ 
$.ajax({ 
type : "get", 
async:false, 
url : "ajax.ashx", 
dataType : "jsonp", 
jsonp: "callbackparam",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback) 
jsonpCallback:"success_jsonpCallback",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名 
success : function(json){ 
alert(json); 
alert(json[0].name); 
}, 
error:function(){ 
alert('fail'); 
} 
}); 
var a="firstName Brett"; 
alert(a); 
}); 
</script> 
</head> 
<body> 
</body> 
</html>

(处理程序部分)
<%@ WebHandler Language="C#" Class="ajax" %> 
using System; 
using System.Web; 
public class ajax : IHttpHandler { 
public void ProcessRequest (HttpContext context) { 
context.Response.ContentType = "text/plain"; 
string callbackFunName = context.Request["callbackparam"]; 
context.Response.Write(callbackFunName + "([ { name:\"John\"} ] )"); 
} 
public bool IsReusable { 
get { 
return false; 
} 
} 
}

(请求抓包截图)

跨域请求之jQuery的ajax jsonp的使用解惑

ajax请求参数说明:
dataType String
预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如XML MIME类型就被识别为XML。在1.4中,JSON就会生成一个JavaScript对象,而script则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后,传递给回调函数。可用值:
"xml": 返回 XML 文档,可用 jQuery 处理。
"html": 返回纯文本 HTML 信息;包含的script标签会在插入dom时执行。
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。'''注意:'''在远程请求时(不在同一个域下),所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
"json": 返回 JSON 数据 。
"jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
"text": 返回纯文本字符串
jsonp String
在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分,比如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。
jsonpCallback String
为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。这主要用来让jQuery生成度独特的函数名,这样管理请求更容易,也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存GET请求的时候,指定这个回调函数名。

ajax jsonp与普通的ajax请求的主要区别在于——请求响应结果的处理。如上面代码所示的响应结果为:
success_jsonpCallback([ { name:"John"} ] ); ————其实就是,调用jsonp回调函数success_jsonpCallback,并将要响应的字符串或json传入此方法(作为参数值),其底层的实现,大概的猜想应该是:

function success_jsonpCallback(data) 
{ 
success(data); 
}

经测试,ajax jsonp对同步或异步请求没有影响。 好了,如有解释不对或不完整的地方,希望大家见谅,欢迎留言、扔板砖!
Javascript 相关文章推荐
js静态作用域的功能。
Dec 25 Javascript
关于javascript function对象那些迷惑分析
Oct 24 Javascript
js中apply方法的使用详细解析
Nov 04 Javascript
JavaScript实现的日期控件具体代码
Nov 18 Javascript
jquery+css实现的红色线条横向二级菜单效果
Aug 22 Javascript
Javascript Event(事件)的传播与冒泡
Jan 23 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
Mar 22 Javascript
详解处理bootstrap4不支持远程静态框问题
Jul 20 Javascript
如何将百度地图包装成Vue的组件的方法步骤
Feb 12 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
May 07 Javascript
mapboxgl实现带箭头轨迹线的代码
Jan 04 Javascript
vue实现登陆页面开发实践
May 30 Vue.js
多浏览器兼容性比较好的复制到剪贴板的js代码
Oct 09 #Javascript
jquery利用event.which方法获取键盘输入值的代码
Oct 09 #Javascript
javascript之bind使用介绍
Oct 09 #Javascript
javascript之querySelector和querySelectorAll使用说明
Oct 09 #Javascript
使用jQuery操作Cookies的实现代码
Oct 09 #Javascript
jQuery实现切换页面布局使用介绍
Oct 09 #Javascript
passwordStrength 基于jquery的密码强度检测代码使用介绍
Oct 08 #Javascript
You might like
PHP输出控制功能在简繁体转换中的应用
2006/10/09 PHP
php json_encode奇怪问题说明
2011/09/27 PHP
CI框架中cookie的操作方法分析
2014/12/12 PHP
PHP中抽象类和抽象方法概念与用法分析
2016/05/24 PHP
js展开闭合效果演示代码
2013/07/24 Javascript
JQuery与JS里submit()的区别示例介绍
2014/02/17 Javascript
关于JavaScript作用域你想知道的一切
2016/02/04 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
jquery 手势密码插件
2017/03/17 Javascript
javascript+html5+css3自定义弹出窗口效果
2017/10/26 Javascript
使用vue的transition完成滑动过渡的示例代码
2018/06/25 Javascript
javascript设计模式之装饰者模式
2020/01/30 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
2020/10/24 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
2020/10/28 Javascript
[01:16:37]【全国守擂赛】第三周决赛 Dark Knight vs. 一个弱队
2020/05/04 DOTA
[58:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第一场 1月31日
2021/03/11 DOTA
Python中的面向对象编程详解(下)
2015/04/13 Python
Python pygorithm模块用法示例【常见算法测试】
2018/08/16 Python
Python 异步协程函数原理及实例详解
2019/11/13 Python
python装饰器代替set get方法实例
2019/12/19 Python
python中的逆序遍历实例
2019/12/25 Python
Linux安装Python3如何和系统自带的Python2并存
2020/07/23 Python
会走动的图形html5时钟示例
2014/04/27 HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
2016/11/14 HTML / CSS
奥地利网上书店:Weltbild
2017/07/14 全球购物
益模软件Java笔试题
2012/03/27 面试题
英语专业大学生求职简历的自我评价
2013/10/18 职场文书
工厂保洁员岗位职责
2013/12/04 职场文书
学习交流会主持词
2014/04/01 职场文书
酒店端午节活动方案
2014/08/26 职场文书
优秀团支部申报材料
2014/12/26 职场文书
毕业生入职感言
2015/07/31 职场文书
《观察物体》教学反思
2016/02/17 职场文书
2019年房屋委托租赁合同范本(通用版)!
2019/07/17 职场文书
Python实现学生管理系统并生成exe可执行文件详解流程
2022/01/22 Python
Golang解析JSON对象
2022/04/30 Golang