跨域请求之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 相关文章推荐
跨浏览器通用、可重用的选项卡tab切换js代码
Sep 20 Javascript
js setTimeout 参数传递使用介绍
Aug 13 Javascript
ie浏览器使用js导出网页到excel并打印
Mar 11 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
Nov 03 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
Apr 17 Javascript
基于Layer+jQuery的自定义弹框
May 26 Javascript
基于JS实现的随机数字抽签实例
Dec 08 Javascript
AngularJS学习第二篇 AngularJS依赖注入
Feb 13 Javascript
详解node+express+ejs+bootstrap构建项目
Sep 27 Javascript
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
JS数组去重的6种方法完整实例
Dec 08 Javascript
了解JavaScript中let语句
May 30 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
BBS(php &amp; mysql)完整版(一)
2006/10/09 PHP
php 实现进制转换(二进制、八进制、十六进制)互相转换实现代码
2010/10/22 PHP
PHP语言中global和$GLOBALS[]的分析 之二
2012/02/02 PHP
ThinkPHP模板判断输出Defined标签用法详解
2014/06/30 PHP
通过php添加xml文档内容的方法
2015/01/23 PHP
PHP实现指定字段的多维数组排序函数分享
2015/03/09 PHP
php获取、检查类名、函数名、方法名的函数方法
2015/06/25 PHP
PHP+redis实现微博的推模型案例分析
2019/07/10 PHP
你所要知道JS(DHTML)中的一些技巧
2007/01/09 Javascript
ext for eclipse插件安装方法
2008/04/27 Javascript
收集的10个免费的jQuery相册
2011/02/26 Javascript
Javascript 浮点运算的问题分析与解决方法
2013/08/27 Javascript
js中的异常处理try...catch使用介绍
2013/09/21 Javascript
window.location不跳转的问题解决方法
2014/04/17 Javascript
jquery常用方法及使用示例汇总
2014/11/08 Javascript
JavaScript实现的背景自动变色代码
2015/10/17 Javascript
异步加载JS、CSS代码(推荐)
2016/06/15 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
2017/07/12 Javascript
JavaScript创建对象的七种方式全面总结
2017/08/21 Javascript
webpack配置之后端渲染详解
2017/10/26 Javascript
JS实现非首屏图片延迟加载的示例
2018/01/06 Javascript
vue循环数组改变点击文字的颜色
2019/10/14 Javascript
在主机商的共享服务器上部署Django站点的方法
2015/07/22 Python
python编程开发之类型转换convert实例分析
2015/11/13 Python
python执行使用shell命令方法分享
2017/11/08 Python
flask框架路由常用定义方式总结
2019/07/23 Python
Python实现自定义读写分离代码实例
2019/11/16 Python
Pytest单元测试框架如何实现参数化
2020/09/05 Python
通过代码简单了解django model序列化作用
2020/11/12 Python
从Pytorch模型pth文件中读取参数成numpy矩阵的操作
2021/03/04 Python
HTML5探秘:用requestAnimationFrame优化Web动画
2018/06/03 HTML / CSS
介绍一下SQL注入攻击的种类和防范手段
2012/02/18 面试题
幼儿园八一建军节活动方案
2014/08/27 职场文书
共产党员批评与自我批评
2014/10/15 职场文书
python基础学习之生成器与文件系统知识总结
2021/05/25 Python
Java Socket实现Redis客户端的详细说明
2021/05/26 Redis