深入理解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的类继承
Mar 05 Javascript
JS子父窗口互相操作取值赋值的方法介绍
May 11 Javascript
超棒的响应式布局jQuery插件Freetile.js
Nov 17 Javascript
初识Node.js
Mar 20 Javascript
bootstrap输入框组代码分享
Jun 07 Javascript
JS数组交集、并集、差集的示例代码
Aug 23 Javascript
详解React native全局变量的使用(跨组件的通信)
Sep 07 Javascript
ES6解构赋值的功能与用途实例分析
Oct 31 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
Oct 31 Javascript
详解vue中使用protobuf踩坑记
May 07 Javascript
通过vue手动封装on、emit、off的代码详解
May 29 Javascript
解决VUE双向绑定失效的问题
Oct 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
77A一级收信机修理记
2021/03/02 无线电
PHP5与MySQL数据库操作常用代码 收集
2010/03/21 PHP
PHP将XML转数组过程详解
2013/11/13 PHP
php操作xml入门之xml基本介绍及xml标签元素
2015/01/23 PHP
PHP保存session到memcache服务器的方法
2016/01/19 PHP
php实现的简单数据库操作Model类
2016/11/16 PHP
在Laravel的Model层做数据缓存的实现
2019/09/26 PHP
js Dialog 实践分享
2012/10/22 Javascript
微信WeixinJSBridge API使用实例
2015/05/25 Javascript
两种方法解决javascript url post 特殊字符转义 + & #
2016/04/13 Javascript
AngularJS 中的事件详解
2016/07/28 Javascript
利用bootstrapValidator验证UEditor
2016/09/14 Javascript
利用vue写todolist单页应用
2016/12/15 Javascript
微信小程序实战之上拉(分页加载)效果(2)
2017/04/17 Javascript
HTML5实现微信拍摄上传照片功能
2017/04/21 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
2019/05/16 Javascript
vue spa应用中的路由缓存问题与解决方案
2019/05/31 Javascript
Python的另外几种语言实现
2015/01/29 Python
详解字典树Trie结构及其Python代码实现
2016/06/03 Python
Python实现对字符串的加密解密方法示例
2017/04/29 Python
手写一个python迭代器过程详解
2019/08/27 Python
Python3.7将普通图片(png)转换为SVG图片格式(网站logo图标)动起来
2020/04/21 Python
Python collections.deque双边队列原理详解
2020/10/05 Python
在Python中字典按值排序的实现方法
2020/11/12 Python
如何在Canvas上的图形/图像绑定事件监听的实现
2020/09/16 HTML / CSS
欧洲高端品牌直销店:Fashionesta
2016/08/31 全球购物
奥斯汀独木舟和皮划艇:Austin Canoe & Kayak
2018/05/22 全球购物
GafasWorld西班牙:购买太阳镜、眼镜和隐形眼镜
2019/09/08 全球购物
说一下Linux下有关用户和组管理的命令
2014/08/18 面试题
是否可以从一个static方法内部发出对非static方法的调用?
2014/08/18 面试题
献爱心捐款倡议书
2014/05/14 职场文书
汉语专业毕业生自荐信
2014/07/06 职场文书
2014年光棍节活动策划方案(创意集锦)
2014/09/29 职场文书
论群众路线学习心得体会
2014/10/31 职场文书
先进教师个人事迹材料
2014/12/15 职场文书
校园安全主题班会
2015/08/12 职场文书