跨域请求之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 MD4
Dec 20 Javascript
jquery动态加载select下拉框示例代码
Dec 10 Javascript
javascript学习笔记(二)数组和对象部分
Sep 30 Javascript
node.js中的fs.readdirSync方法使用说明
Dec 17 Javascript
js表单中选择框值的获取及表单的序列化
Dec 17 Javascript
JS脚本实现动态给标签控件添加事件的方法
Jun 02 Javascript
关于Iframe父页面与子页面之间的相互调用
Nov 22 Javascript
VeeValidate 的使用场景以及配置详解
Jan 11 Javascript
js中怎么判断两个字符串相等的实例
Jan 17 Javascript
浅谈Vuex注入Vue生命周期的过程
May 20 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
Oct 28 Javascript
使用webpack和rollup打包组件库的方法
Feb 25 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
利用discuz自带通行证整合dedecms的方法以及文件下载
2007/03/06 PHP
Ubuntu 16.04下安装PHP 7过程详解
2017/03/28 PHP
javascript之对系统的toFixed()方法的修正
2007/05/08 Javascript
XmlUtils JS操作XML工具类
2009/10/01 Javascript
javascript中的变量是传值还是传址的?
2010/04/19 Javascript
jQuery选择头像并实时显示的代码
2010/06/27 Javascript
Javascript 命名空间模式
2013/11/01 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
2014/09/09 Javascript
JavaScript中的操作符==与===介绍
2014/12/31 Javascript
微信jssdk在iframe页面失效问题的解决措施
2016/03/03 Javascript
基于React实现表单数据的添加和删除详解
2017/03/14 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
2017/07/08 jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
2017/07/08 jQuery
React Native中的RefreshContorl下拉刷新使用
2017/10/09 Javascript
layui的table单击行勾选checkbox功能方法
2018/08/14 Javascript
JavaScript实现图片轮播特效
2019/10/23 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
2019/11/05 Javascript
python对html代码进行escape编码的方法
2015/05/04 Python
在Django中管理Users和Permissions以及Groups的方法
2015/07/23 Python
使用python装饰器计算函数运行时间的实例
2018/04/21 Python
python实现复制大量文件功能
2019/08/31 Python
wxPython实现带颜色的进度条
2019/11/19 Python
python GUI库图形界面开发之PyQt5打开保存对话框QFileDialog详细使用方法与实例
2020/02/27 Python
PyQt5 如何让界面和逻辑分离的方法
2020/03/24 Python
Jupyter notebook 远程配置及SSL加密教程
2020/04/14 Python
Python DataFrame使用drop_duplicates()函数去重(保留重复值,取重复值)
2020/07/20 Python
一篇文章搞懂python的转义字符及用法
2020/09/03 Python
Python 远程开关机的方法
2020/11/18 Python
Aerosoles爱柔仕官网:美国舒软女鞋品牌
2017/07/17 全球购物
欧洲最大的高尔夫零售商:American Golf
2019/09/02 全球购物
高中毕业生自我鉴定范文
2013/09/26 职场文书
《第一次抱母亲》教学反思
2014/04/16 职场文书
2015年校本培训工作总结
2015/07/24 职场文书
《桂花雨》教学反思
2016/02/19 职场文书
2019年亲子运动会口号
2019/10/11 职场文书
Oracle设置DB、监听和EM开机启动的方法
2021/04/25 Oracle