跨域请求之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 相关文章推荐
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
Sep 20 Javascript
javascript 实现map集合
Apr 03 Javascript
javascript常见数据验证插件大全
Aug 03 Javascript
js 实现数值的千分位及保存小数方法(推荐)
Aug 01 Javascript
Vue方法与事件处理器详解
Dec 01 Javascript
3分钟掌握常用的JS操作JSON方法总结
Apr 25 Javascript
ajax跨域访问遇到的问题及解决方案
May 23 Javascript
vue点击标签切换选中及互相排斥操作
Jul 17 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
Jul 22 Javascript
vue select 获取value和lable操作
Aug 28 Javascript
Vertx基于EventBus发送接受自定义对象
Nov 16 Javascript
js 数组 fill() 填充方法
Nov 02 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
java EJB 加密与解密原理的一个例子
2008/01/11 PHP
PHP 编写的 25个游戏脚本
2009/05/11 PHP
PHP Session机制简介及用法
2014/08/19 PHP
Laravel5.7 Eloquent ORM快速入门详解
2019/04/12 PHP
Yii框架ACF(accessController)简单权限控制操作示例
2019/04/26 PHP
二行代码解决全部网页木马
2008/03/28 Javascript
js replace正则表达式应用案例讲解
2013/01/17 Javascript
js实现碰撞检测特效代码分享
2016/10/16 Javascript
vue2.0+webpack环境的构造过程
2016/11/08 Javascript
3分钟掌握常用的JS操作JSON方法总结
2017/04/25 Javascript
原生JS实现Ajax跨域请求flask响应内容
2017/10/24 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
2018/04/07 Javascript
vue插件draggable实现拖拽移动图片顺序
2018/12/01 Javascript
Vue+webpack实现懒加载过程解析
2020/02/17 Javascript
[45:59]完美世界DOTA2联赛PWL S2 FTD vs GXR 第二场 11.22
2020/11/24 DOTA
用Python进行一些简单的自然语言处理的教程
2015/03/31 Python
python实现八大排序算法(2)
2017/09/14 Python
使用python语言,比较两个字符串是否相同的实例
2018/06/29 Python
对Python通过pypyodbc访问Access数据库的方法详解
2018/10/27 Python
python实现RabbitMQ的消息队列的示例代码
2018/11/08 Python
Python中捕获键盘的方式详解
2019/03/28 Python
利用anaconda作为python的依赖库管理方法
2019/08/13 Python
Pycharm添加虚拟解释器报错问题解决方案
2020/10/13 Python
Lands’ End官网:经典的美国生活方式品牌
2016/08/14 全球购物
英国领先的在线旅游和休闲零售商:lastminute.com
2019/01/23 全球购物
Hotels.com日本:国外和海外住宿,酒店预订
2019/12/13 全球购物
写一个方法1000的阶乘
2012/11/21 面试题
请编写一个 C 函数,该函数在给定的内存区域搜索给定的字符,并返回该字符所在位置索引值
2014/09/15 面试题
C#里面如何倒序排列一个数组的元素?
2013/06/21 面试题
自我鉴定怎么写
2013/12/05 职场文书
主持人演讲稿范文
2013/12/28 职场文书
农村婚礼证婚词
2014/01/10 职场文书
北京导游词
2015/02/12 职场文书
可可西里观后感
2015/06/08 职场文书
人生一定要学会的三样东西:放下、忘记、珍惜
2019/08/21 职场文书
2019升学宴主持词范本5篇
2019/10/09 职场文书