跨域请求之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 相关文章推荐
无阻塞加载脚本分析[全]
Jan 20 Javascript
jquery form表单序列化为对象的示例代码
Mar 05 Javascript
js实现class样式的修改、添加及删除的方法
Jan 20 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
Feb 05 Javascript
跟我学习JScript的Bug与内存管理
Nov 18 Javascript
JS表格组件神器bootstrap table详解(基础版)
Dec 08 Javascript
HTML5 canvas 9绘制图片实例详解
Sep 06 Javascript
node学习记录之搭建web服务器教程
Feb 16 Javascript
ionic3 懒加载
Aug 16 Javascript
详解node服务器中打开html文件的两种方法
Sep 18 Javascript
JS栈stack类的实现与使用方法示例
Jan 31 Javascript
微信小程序中悬浮窗功能的实现代码
Aug 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
《APMServ 5.1.2》使用图解
2006/10/23 PHP
PHP 检查扩展库或函数是否可用的代码
2010/04/06 PHP
ThinkPHP 连接Oracle数据库的详细教程[全]
2012/07/16 PHP
PHP删除HTMl标签的三种解决方法
2013/06/30 PHP
神盾加密解密教程(二)PHP 神盾解密
2014/06/08 PHP
高质量PHP代码的50个实用技巧必备(下)
2016/01/22 PHP
PHP底层运行机制与工作原理详解
2020/07/31 PHP
js 复制或插入Html的实现方法小结
2010/05/19 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
2013/06/19 Javascript
js用typeof方法判断undefined类型
2014/07/15 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
2015/02/05 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
2015/09/20 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
十大热门的JavaScript框架和库
2017/03/21 Javascript
使用OPENLAYERS3实现点选的方法
2020/09/24 Javascript
javaScript中的空值和假值
2017/12/18 Javascript
vue项目部署到Apache服务器中遇到的问题解决
2018/08/24 Javascript
Vue结合后台导入导出Excel问题详解
2019/02/19 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
2020/08/04 Javascript
使用Python脚本生成随机IP的简单方法
2015/07/30 Python
Python实现FTP上传文件或文件夹实例(递归)
2017/01/16 Python
Python子类继承父类构造函数详解
2019/02/19 Python
python整合ffmpeg实现视频文件的批量转换
2019/05/31 Python
利用python实现周期财务统计可视化
2019/08/25 Python
python 实现多线程下载m3u8格式视频并使用fmmpeg合并
2019/11/15 Python
python科学计算之scipy——optimize用法
2019/11/25 Python
Python中pyecharts安装及安装失败的解决方法
2020/02/18 Python
基于 HTML5 WebGL 实现的垃圾分类系统
2019/10/08 HTML / CSS
鲜为人知的HTML5语音合成功能
2019/05/17 HTML / CSS
香港最新科技与优质家居产品购物网站:J SELECT
2018/08/21 全球购物
美国一家著名的手表在线折扣网站:Discount Watch Store
2020/02/24 全球购物
文明家庭先进事迹材
2014/01/27 职场文书
电子装配专业毕业生求职信
2014/04/23 职场文书
我的中国心演讲稿
2014/09/04 职场文书
Mysql数据库命令大全
2021/05/26 MySQL
浅谈Redis变慢的原因及排查方法
2022/06/21 Redis