深入理解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 相关文章推荐
对于this和$(this)的个人理解
Sep 08 Javascript
一个简单的Node.js异步操作管理器分享
Apr 29 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
Dec 29 Javascript
理解javascript中的严格模式
Feb 01 Javascript
Javascript之String对象详解
Jun 08 Javascript
基于JS实现仿百度百家主页的轮播图效果
Mar 06 Javascript
js鼠标跟随运动效果
Mar 11 Javascript
Angular中使用$watch监听object属性值的变化(详解)
Apr 24 Javascript
BootStrap daterangepicker 双日历控件
Jun 02 Javascript
JavaScript变量作用域_动力节点Java学院整理
Jun 27 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
Aug 10 Javascript
vue实力踩坑之push当前页无效
Apr 10 Vue.js
判断是否存在子节点的实现代码
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制作的意见反馈表源码
2007/03/11 PHP
php存储过程调用实例代码
2013/02/03 PHP
解析php函数method_exists()与is_callable()的区别
2013/06/21 PHP
Web 前端设计模式--Dom重构 提高显示性能
2010/10/22 Javascript
Javascript学习笔记之相等符号与严格相等符号
2014/11/23 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
Javascript中Date类型和Math类型详解
2016/02/27 Javascript
JavaScript实现邮箱地址自动匹配功能代码
2016/11/28 Javascript
利用canvas实现的加载动画效果实例代码
2017/07/05 Javascript
红黑树的插入详解及Javascript实现方法示例
2018/03/26 Javascript
JavaScript 2018 中即将迎来的新功能
2018/09/21 Javascript
vue 进阶之实现父子组件间的传值
2019/04/26 Javascript
layui监听单元格编辑前后交互的例子
2019/09/16 Javascript
jQuery实现计算器功能
2020/10/19 jQuery
[00:36]DOTA2上海特级锦标赛 Archon战队宣传片
2016/03/04 DOTA
Python 字典与字符串的互转实例
2017/01/13 Python
Python、PyCharm安装及使用方法(Mac版)详解
2017/04/28 Python
分析经典Python开发工程师面试题
2019/04/08 Python
pytorch 实现cross entropy损失函数计算方式
2020/01/02 Python
完美解决keras 读取多个hdf5文件进行训练的问题
2020/07/01 Python
Django中F函数的使用示例代码详解
2020/07/06 Python
利用Python pandas对Excel进行合并的方法示例
2020/11/04 Python
12个不为大家熟知的HTML5设计小技巧
2016/06/02 HTML / CSS
全球速卖通法国在线交易平台:AliExpress法国
2017/07/07 全球购物
Blue Nile中国官网:全球知名的钻石和珠宝网络零售商
2020/03/22 全球购物
生产现场工艺工程师岗位职责
2013/11/28 职场文书
母婴店促销方案
2014/03/05 职场文书
补充协议书范本
2014/04/23 职场文书
关于梦想的演讲稿
2014/05/05 职场文书
采购部2015年度工作总结
2015/07/24 职场文书
公司车队管理制度
2015/08/04 职场文书
2016民族团结先进个人事迹材料
2016/02/26 职场文书
看古人们是如何赞美老师的?
2019/07/08 职场文书
导游词之唐山景点
2019/12/18 职场文书
Python爬虫之用Xpath获取关键标签实现自动评论盖楼抽奖(二)
2021/06/07 Python
为什么MySQL 删除表数据 磁盘空间还一直被占用
2021/10/16 MySQL