深入理解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 相关文章推荐
js window.print实现打印特定控件或内容
Sep 16 Javascript
js使用递归解析xml
Dec 12 Javascript
Javascript类型转换的规则实例解析
Feb 23 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
Dec 26 Javascript
JavaScript优化以及前段开发小技巧
Feb 02 Javascript
详解ES6之用let声明变量以及let loop机制
Jul 15 Javascript
浅析Vue实例以及生命周期
Aug 14 Javascript
详解webpack自定义loader初探
Aug 29 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
Oct 29 Javascript
Vue组件基础用法详解
Feb 05 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
May 10 Javascript
浅谈node.js中间件有哪些类型
Apr 29 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
discuz Passport 通行证 整合笔记
2008/06/30 PHP
php判断变量类型常用方法
2012/04/24 PHP
PHP简单实现断点续传下载的方法
2015/09/25 PHP
开启PHP Static 关键字之旅模式
2015/11/13 PHP
通过继承IHttpHandle实现JS插件的组织与管理
2010/07/13 Javascript
原生js结合html5制作简易的双色子游戏
2015/03/30 Javascript
js如何实现点击标签文字,文字在文本框出现
2015/08/05 Javascript
FullCalendar日历插件应用之数据展现(一)
2015/12/23 Javascript
深入浅析JavaScript中的3DES
2016/08/24 Javascript
jQuery简单倒计时效果完整示例
2016/09/20 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
2016/12/12 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
2018/08/23 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
2018/09/05 Javascript
详解JavaScript 为什么要有 Symbol 类型?
2019/04/03 Javascript
使用layui实现树形结构的方法
2019/09/20 Javascript
JQuery中DOM节点的操作与访问方法实例分析
2019/12/23 jQuery
使用python在校内发人人网状态(人人网看状态)
2014/02/19 Python
进一步探究Python中的正则表达式
2015/04/28 Python
Python内置函数——__import__ 的使用方法
2017/11/24 Python
CentOS7.3编译安装Python3.6.2的方法
2018/01/22 Python
对python中Librosa的mfcc步骤详解
2019/01/09 Python
Pandas分组与排序的实现
2019/07/23 Python
python 实现"神经衰弱"翻牌游戏
2020/11/09 Python
BannerBuzz加拿大:在线定制横幅印刷、广告和标志
2020/03/10 全球购物
Levi’s西班牙官方网站:李维斯,著名的牛仔裤品牌
2020/08/20 全球购物
会计系毕业个人自荐信格式
2013/09/23 职场文书
yy结婚证婚词
2014/01/10 职场文书
秋季红领巾广播稿
2014/01/27 职场文书
写给老婆的检讨书
2014/02/21 职场文书
白酒市场营销方案
2014/02/25 职场文书
解除同居协议书
2015/01/29 职场文书
会议通知范文
2015/04/15 职场文书
学习党史心得体会2016
2016/01/23 职场文书
Mac M1安装mnmp (Mac+Nginx+MySQL+PHP) 开发环境
2021/03/29 PHP
MySQL中存储时间的最佳实践指南
2021/07/01 MySQL
基于Redis zSet实现滑动窗口对短信进行防刷限流的问题
2022/02/12 Redis