跨域请求之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 相关文章推荐
jQuery ctrl+Enter shift+Enter实现代码
Feb 07 Javascript
从零开始学习jQuery (三) 管理jQuery包装集
Feb 23 Javascript
js关闭当前页面(窗口)的几种方式总结
Mar 05 Javascript
浅析js中的浮点型运算问题
Jan 06 Javascript
jQuery的观察者模式详解
Dec 22 Javascript
js实现屏幕自适应局部代码分享
Jan 30 Javascript
JavaScript代码实现图片循环滚动效果
Mar 19 Javascript
jQuery获取this当前对象子元素对象的方法
Nov 29 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
Dec 20 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
Jan 22 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
Aug 31 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
Mar 07 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/11/25 PHP
自己写了一个php检测文件编码的函数
2014/04/21 PHP
php实现无限级分类查询(递归、非递归)
2016/03/10 PHP
Zend Framework教程之Bootstrap类用法概述
2016/03/14 PHP
PHP经典设计模式之依赖注入定义与用法详解
2019/05/21 PHP
jQuery技巧大放送 学习jquery的朋友可以看下
2009/10/14 Javascript
js简单实现用户注册信息的校验代码
2013/11/15 Javascript
JSON无限折叠菜单编写实例
2013/12/16 Javascript
jquery选择checked在ie8普通模式下的问题
2014/02/12 Javascript
window.open 以post方式传递参数示例代码
2014/02/27 Javascript
javascript折半查找详解
2015/01/26 Javascript
在JavaScript中访问字符串的子串
2015/07/07 Javascript
微信小程序 教程之事件
2016/10/18 Javascript
微信小程序之拖拽排序(代码分享)
2017/01/21 Javascript
详解Weex基于Vue2.0开发模板搭建
2017/03/20 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
2017/07/05 Javascript
Javascript中Promise的四种常用方法总结
2017/07/14 Javascript
Vue组件实例间的直接访问实现代码
2017/08/20 Javascript
基于jquery ajax的多文件上传进度条过程解析
2019/09/11 jQuery
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
2019/09/29 Javascript
vue项目配置使用flow类型检查的步骤
2020/03/18 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
2020/08/08 Javascript
[03:54]DOTA2英雄梦之声_第06期_昆卡
2014/06/23 DOTA
python中getattr函数使用方法 getattr实现工厂模式
2014/01/20 Python
详解Python的Lambda函数与排序
2016/10/25 Python
Ubuntu下创建虚拟独立的Python环境全过程
2017/02/10 Python
python3.6+django2.0开发一套学员管理系统
2018/03/03 Python
python中实现将多个print输出合成一个数组
2018/04/19 Python
Django实现学员管理系统
2019/02/26 Python
Python如何给你的程序做性能测试
2020/07/29 Python
PyCharm2020.1.2社区版安装,配置及使用教程详解(Windows)
2020/08/07 Python
实例教程 一款纯css3实现的数字统计游戏
2014/11/10 HTML / CSS
瑞贝卡·泰勒官方网站:Rebecca Taylor
2016/09/24 全球购物
.NET remoting的两种通道是什么
2016/05/31 面试题
Win11怎么跳过联网验机 ?Win11跳过联网验机激活教程
2022/04/05 数码科技
Java后端 Dubbo retries 超时重试机制的解决方案
2022/04/14 Java/Android