深入理解jquery跨域请求方法


Posted in Javascript onMay 18, 2016

项目中关于ajax jsonp的使用,

出现了问题:可以成功获得请求结果,但没有执行success方法

总算搞定了,记录一下

function TestAjax()
 {
  $.ajax({
    type : "get",
    async : false,
    url : "ajaxHandler.ashx", //实际上访问时产生的地址为: ajax.ashx?callbackfun=jsonpCallback&id=10
    data : {id : 10},
    cache : false, //默认值true
    dataType : "jsonp",
    jsonp: "callbackfun",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback)
    jsonpCallback:"jsonpCallback",
      //自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名
      //如果这里自定了jsonp的回调函数,则success函数则不起作用;否则success将起作用
    success : function(json){
      alert(json.message);
    },
    error:function(){
      alert("erroe");
    }
  });
}

function jsonpCallback(data) //回调函数
{
  alert(data.message); //
}
 

public class ajaxHandler : IHttpHandler
{
  public void ProcessRequest (HttpContext context) {
    context.Response.ContentType = "text/plain";
    string callbackfun = context.Request["callbackfun"];
    context.Response.Write(callbackfun + "({name:\"John\", message:\"hello John\"})");
    context.Response.End();
  }
  public bool IsReusable {get {return false;}
}

ajax请求参数说明:

dataType string 服务器返回的数据类型。

如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如XML MIME类型就被识别为XML。

可用值:

"xml": 返回 XML 文档,可用 jQuery 处理。

"html": 返回纯文本 HTML 信息;包含的script标签会在插入dom时执行。

"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。

注意:在远程请求时(不在同一个域下),所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)

"json": 返回 JSON 数据 。

"text": 返回纯文本字符串

"jsonp":jsonp格式。使用jsonp形式调用函数时,

访问url时会自动将url后面添加上如"callback=callbackFunName" 以执行回调函数(callbackFunName)。

jsonp string

在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=?"这种get或post请求中url参数里的"callback"部分,

比如 jsonp:'callbackfun' 则将会生成"callbackfun=?"传给服务器。

jsonpCallback String  此参数为jsonp请求指定一个回调函数名。

这个值将用来取代jQuery自动生成的随机函数名。 即上面"callback=?"中的问号部分

这主要用来让jQuery生成度独特的函数名,这样请求更容易,也能方便地提供回调函数和错误处理。

也可以在想让浏览器缓存GET请求的时候,指定这个回调函数名。

 ajax jsonp与普通的ajax请求的主要区别在于——请求响应结果的处理。如上面代码所示的响应结果为:

  jsonpCallback({ name:"world",message:"hello world"});

实际上就是调用jsonp回调函数jsonpCallback,并将要响应的字符串或json传入此方法,

关于自定了jsonp的回调函数, success函数则不起作用

大概其底层的实现(当然这是默认的回调函数的时候,否则就不会执行success的方法吧):

function default_jsonpCallback(data)
{
  success(data); //在默认的回调方法中执行
}

最后一个比较简单的方法,

$.getJSON("GetUserbyName.aspx?name=ww&callback=?",
function(date)
{
//....
}
)

以上这篇深入理解jquery跨域请求方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通用javascript脚本函数库 方便开发
Oct 13 Javascript
jquery怎样实现ajax联动框(一)
Mar 08 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
May 23 Javascript
JavaScript代码复用模式详解
Nov 07 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
Dec 16 Javascript
原生JS实现网络彩票投注效果
Sep 25 Javascript
Bootstrap基本样式学习笔记之表单(3)
Dec 07 Javascript
gulp安装以及打包合并的方法教程
Nov 19 Javascript
详解webpack运行Babel教程
Jun 13 Javascript
JavaScript的词法结构精华篇
Oct 17 Javascript
jQuery层叠选择器用法实例分析
Jun 28 jQuery
JS数组方法reverse()用法实例分析
Jan 18 Javascript
判断是否存在子节点的实现代码
May 18 #Javascript
利用AJAX实现WordPress中的文章列表及评论的分页功能
May 17 #Javascript
Bootstrap教程JS插件弹出框学习笔记分享
May 17 #Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
May 17 #Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
May 17 #Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
May 17 #Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
May 17 #Javascript
You might like
PHP调用存储过程返回值不一致问题的解决方法分析
2016/04/26 PHP
php原生导出excel文件的两种方法(推荐)
2016/11/19 PHP
Javascript 去除数组的重复元素
2010/05/04 Javascript
javascript Array.prototype.slice使用说明
2010/10/11 Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
2011/03/28 Javascript
js下拉菜单语言选项简单实现
2013/09/23 Javascript
用jquery修复在iframe下的页面锚点失效问题
2014/08/22 Javascript
jQuery判断数组是否包含了指定的元素
2015/03/10 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
2016/11/07 Javascript
五步轻松实现zTree的使用
2017/11/01 Javascript
Vue.js搭建移动端购物车界面
2020/06/28 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
2018/07/10 Javascript
浅入深出Vue之组件使用
2019/07/11 Javascript
解决vue无法侦听数组及对象属性的变化问题
2020/07/17 Javascript
Vue多选列表组件深入详解
2021/03/02 Vue.js
[00:48]DOTA2国际邀请赛公开赛报名开始 扫码开启逐梦之旅
2018/06/06 DOTA
Python随机生成信用卡卡号的实现方法
2015/05/14 Python
python抓取并保存html页面时乱码问题的解决方法
2016/07/01 Python
python读取几个G的csv文件方法
2019/01/07 Python
python实现爬取百度图片的方法示例
2019/07/06 Python
python 使用shutil复制图片的例子
2019/12/13 Python
ITK 实现多张图像转成单个nii.gz或mha文件案例
2020/07/01 Python
Python使用正则表达式实现爬虫数据抽取
2020/08/17 Python
详解Python遍历列表时删除元素的正确做法
2021/01/07 Python
美国羊皮公司:Overland
2018/01/15 全球购物
Gweniss格温妮丝女包官网:英国纯手工制造潮流包包品牌
2018/02/07 全球购物
澳大利亚墨尔本的在线时装店:LORETA
2018/09/14 全球购物
美国在线购买和出售礼品卡网站:EJ Gift Cards
2019/06/09 全球购物
Bose英国官方网站:美国知名音响品牌
2020/01/26 全球购物
农林环境专业求职信
2014/03/13 职场文书
《爱如茉莉》教后反思
2014/04/12 职场文书
确保减税降费落地生根,用实实在在措施
2019/07/19 职场文书
导游词之京东大峡谷旅游区
2019/10/29 职场文书
《妈妈别哭,有我在》读后感3篇
2020/01/13 职场文书
sqlserver连接错误之SQL评估期已过的问题解决
2022/03/23 SQL Server
Java实现扫雷游戏详细代码讲解
2022/05/25 Java/Android