跨域请求之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 相关文章推荐
在父页面调用子页面的JS方法
Sep 29 Javascript
jquery如何根据值设置默认的选中项
Mar 17 Javascript
学习javascript面向对象 掌握创建对象的9种方式
Jan 04 Javascript
node.js实现爬虫教程
Aug 25 Javascript
浅析JavaScript中的array数组类型系统
Jul 18 Javascript
js判断所有表单项不为空则提交表单的实现方法
Sep 09 Javascript
使用jquery如何获取时间
Oct 13 Javascript
js利用appendChild对标签进行排序的实现方法
Oct 16 Javascript
Vue的路由动态重定向和导航守卫实例
Mar 17 Javascript
JavaScript动态创建二维数组的方法示例
Feb 01 Javascript
vue+django实现一对一聊天功能的实例代码
Jul 17 Javascript
微信小程序动态设置图片大小的方法
Nov 21 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使用pcntl_fork实现多进程下载图片的方法
2014/12/16 PHP
PHP调试函数和日志记录函数分享
2015/01/31 PHP
微信公众平台之快递查询功能用法实例
2015/04/14 PHP
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
2007/06/02 Javascript
extjs 为某个事件设置拦截器
2010/01/15 Javascript
javascript感应鼠标图片透明度显示的方法
2015/02/24 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
2015/10/01 Javascript
基于JavaScript如何制作遮罩层对话框
2016/01/26 Javascript
JavaScript常用数组算法小结
2016/02/13 Javascript
JavaScript的函数式编程基础指南
2016/03/19 Javascript
jQuery的extend方法【三种】
2016/12/14 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
2017/01/21 Javascript
jQuery使用方法
2017/02/04 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
2017/12/22 Javascript
mpvue跳转页面及注意事项
2018/08/03 Javascript
jquery多级树形下拉菜单的实例代码
2019/07/09 jQuery
微信小程序 高德地图路线规划实现过程详解
2019/08/05 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
2019/08/22 Javascript
微信小程序引入VANT组件的方法步骤
2019/09/19 Javascript
js实现星星海特效的示例
2020/09/28 Javascript
jQuery实现tab栏切换效果
2020/12/22 jQuery
Python爬虫爬取新浪微博内容示例【基于代理IP】
2018/08/03 Python
Django csrf 两种方法设置form的实例
2019/02/03 Python
解决tensorflow添加ptb库的问题
2020/02/10 Python
Python 实现自动完成A4标签排版打印功能
2020/04/09 Python
关于Python 解决Python3.9 pandas.read_excel(‘xxx.xlsx‘)报错的问题
2020/11/28 Python
Viking Direct荷兰:购买办公用品
2019/06/20 全球购物
AJAX的全称是什么
2012/11/06 面试题
优秀小学生家长评语
2014/01/30 职场文书
2014年车间工作总结
2014/11/21 职场文书
2015年采购部工作总结
2015/04/23 职场文书
幽灵公主观后感
2015/06/09 职场文书
为自己工作观后感
2015/06/11 职场文书
redis 查看所有的key方式
2021/05/07 Redis
浅谈MySQL 亿级数据分页的优化
2021/06/15 MySQL
Python中request的基本使用解决乱码问题
2022/04/12 Python