跨域请求之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 相关文章推荐
添加JavaScript重载函数的辅助方法2
Jul 04 Javascript
jquery解析XML字符串和XML文件的方法说明
Feb 21 Javascript
js的延迟执行问题分析
Jun 23 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
Mar 21 Javascript
JavaScript中指定函数名称的相关方法
Jun 04 Javascript
一不小心就做错的JS闭包面试题
Nov 25 Javascript
jQuery添加和删除输入文本框标签代码
May 20 Javascript
理解JavaScript原型链
Oct 25 Javascript
js 两个日期比较相差多少天的实例
Oct 19 Javascript
vue使用iframe嵌入网页的示例代码
Jun 09 Javascript
Vue2.0 实现单选互斥的方法
Apr 13 Javascript
vue移动端路由切换实例分析
May 14 Javascript
多浏览器兼容性比较好的复制到剪贴板的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 Class 文章
2007/04/04 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
jQuery+AJAX实现无刷新下拉加载更多
2015/07/03 Javascript
Bootstrap每天必学之级联下拉菜单
2016/03/27 Javascript
js删除局部变量的实现方法
2016/06/25 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
JS中SetTimeout和SetInterval使用初探
2017/03/23 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
2018/05/08 Javascript
微信小程序登录时如何获取input框中的内容
2019/12/04 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
2019/12/10 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
2020/09/21 Javascript
uniapp实现横向滚动选择日期
2020/10/21 Javascript
[46:21]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
[01:08:43]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第一场 1月9日
2021/03/11 DOTA
python迭代器的使用方法实例
2013/11/21 Python
使用python实现递归版汉诺塔示例(汉诺塔递归算法)
2014/04/08 Python
详解Python中的Numpy、SciPy、MatPlotLib安装与配置
2017/11/17 Python
Python爬虫实例扒取2345天气预报
2018/03/04 Python
python求最大连续子数组的和
2018/07/07 Python
Python依赖包整体迁移方法详解
2019/08/15 Python
python在不同条件下的输入与输出
2020/02/13 Python
Python递归函数特点及原理解析
2020/03/04 Python
Pycharm中安装Pygal并使用Pygal模拟掷骰子(推荐)
2020/04/08 Python
python zip()函数的使用示例
2020/09/23 Python
Python Pandas list列表数据列拆分成多行的方法实现
2020/12/14 Python
J2EE面试题
2016/03/14 面试题
编辑找工作求职信分享
2014/01/03 职场文书
十佳美德少年事迹材料
2014/02/05 职场文书
毕业生班级鉴定评语
2015/01/04 职场文书
2015年健康教育工作总结
2015/04/10 职场文书
Python如何配置环境变量详解
2021/05/18 Python
OpenCV-Python实现怀旧滤镜与连环画滤镜
2021/06/09 Python
使用Oracle跟踪文件的问题详解
2021/06/28 Oracle
十大最强水系宝可梦,最美宝可梦排第三,榜首大家最熟悉
2022/03/18 日漫
Redis 哨兵机制及配置实现
2022/03/25 Redis
Win10鼠标轨迹怎么开 Win10显示鼠标轨迹方法
2022/04/06 数码科技