跨域请求之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 特殊字符
Apr 05 Javascript
Node.js实战 建立简单的Web服务器
Mar 08 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
Sep 14 Javascript
浅谈Javascript中匀速运动的停止条件
Dec 19 Javascript
被遗忘的javascript的slice() 方法
Apr 20 Javascript
Bootstrap轮播插件使用代码
Oct 11 Javascript
Bootstrap提示框效果的实例代码
Jul 12 Javascript
javascript对HTML字符转义与反转义
Dec 13 Javascript
微信小程序移动拖拽视图-movable-view实例详解
Aug 17 Javascript
vue使用nprogress加载路由进度条的方法
Jun 04 Javascript
Element Alert警告的具体使用方法
Jul 27 Javascript
nuxt 每个页面head标签内容设置方式
Nov 05 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制作图型计数器的例子
2006/10/09 PHP
php接口与接口引用的深入解析
2013/08/09 PHP
php采用ajax数据提交post与post常见方法总结
2014/11/10 PHP
制作安全性高的PHP网站的几个实用要点
2014/12/30 PHP
PHP JSON格式的中文显示问题解决方法
2015/04/09 PHP
Extjs学习笔记之七 布局
2010/01/08 Javascript
js防止表单重复提交实现代码
2012/09/05 Javascript
异步动态加载js与css文件的js代码
2013/09/15 Javascript
JS字符串拼接在ie中都报错的解决方法
2014/03/27 Javascript
JavaScript中的console.time()函数详细介绍
2014/12/29 Javascript
JS/Jquery判断对象为空的方法
2015/06/11 Javascript
Bootstrap每天必学之响应式导航、轮播图
2016/04/25 Javascript
JS常用函数和常用技巧小结
2016/10/15 Javascript
利用Node.JS实现邮件发送功能
2016/10/21 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
2017/12/13 Javascript
JS实现根据指定值删除数组中的元素操作示例
2018/08/02 Javascript
vuex 解决报错this.$store.commit is not a function的方法
2018/12/17 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
2019/08/12 Javascript
[03:12]完美世界DOTA2联赛PWL DAY6集锦
2020/11/05 DOTA
python中关于日期时间处理的问答集锦
2013/03/08 Python
python的描述符(descriptor)、装饰器(property)造成的一个无限递归问题分享
2014/07/09 Python
python中随机函数random用法实例
2015/04/30 Python
详解Python的hasattr() getattr() setattr() 函数使用方法
2018/07/09 Python
Python中实例化class的执行顺序示例详解
2018/10/14 Python
Python微信操控itchat的方法
2019/05/31 Python
基于Python检测动态物体颜色过程解析
2019/12/04 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
python对文件的操作方法汇总
2020/02/28 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
python中用ggplot绘制画图实例讲解
2021/01/26 Python
台湾家适得:Homeget
2019/02/11 全球购物
11月红领巾广播稿
2014/01/17 职场文书
企业口号大全
2014/06/12 职场文书
协会周年庆活动方案
2014/08/26 职场文书
领导班子在批评与自我批评座谈会上的发言
2014/09/28 职场文书
在校证明模板
2015/06/17 职场文书