深入理解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中settimeout方法加参数
Feb 28 Javascript
JS中类或对象的定义说明
Mar 10 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
Dec 18 Javascript
即将发布的jQuery 3 有哪些新特性
Apr 14 Javascript
JS简单实现无缝滚动效果实例
Aug 24 Javascript
Node.js的基本知识简单汇总
Sep 19 Javascript
JS实现汉字与Unicode码相互转换的方法详解
Apr 28 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
Jul 17 Javascript
深入理解vue中slot与slot-scope的具体使用
Jan 26 Javascript
JS实现的缓冲运动效果示例
Apr 30 Javascript
ES6小技巧之代替lodash
Jun 07 Javascript
详解webpack-dev-middleware 源码解读
Mar 23 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 循环列出目录内容的函数代码
2010/05/26 PHP
PHP使用range协议实现输出文件断点续传代码实例
2014/07/04 PHP
laravel 出现command not found问题的解决方案
2019/10/23 PHP
Javascript 两个窗体之间传值实现代码
2009/09/25 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
2013/03/20 Javascript
jquery实现ajax提交form表单的方法总结
2014/03/03 Javascript
node.js中的fs.linkSync方法使用说明
2014/12/15 Javascript
jquery带动画效果幻灯片特效代码
2015/08/27 Javascript
jQuery动态加载css文件实现方法
2016/06/15 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
2016/11/22 Javascript
Bootstrap缩略图与警告框学习使用
2017/02/08 Javascript
nodejs multer实现文件上传与下载
2017/05/10 NodeJs
ES6中Array.find()和findIndex()函数的用法详解
2017/09/16 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
2017/10/14 jQuery
bootstrap模态框关闭后清除模态框的数据方法
2018/08/10 Javascript
解决node-sass偶尔安装失败的方法小结
2018/12/05 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
2019/03/04 Javascript
JS实现关闭小广告特效
2021/01/29 Javascript
深入webpack打包原理及loader和plugin的实现
2020/05/06 Javascript
详解vue组件之间的通信
2020/08/30 Javascript
Vue SPA 首屏优化方案
2021/02/26 Vue.js
python中global用法实例分析
2015/04/30 Python
在Django中创建第一个静态视图
2015/07/15 Python
python学习笔记--将python源文件打包成exe文件(pyinstaller)
2018/05/26 Python
Python Django模板之模板过滤器与自定义模板过滤器示例
2019/10/18 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
安装完Python包然后找不到模块的解决步骤
2020/02/13 Python
香港唯港荟酒店预订:Hotel ICON
2018/03/27 全球购物
BISSELL官网:北美吸尘器第一品牌
2019/03/14 全球购物
自我鉴定四大框架
2014/01/17 职场文书
2014年科室工作总结
2014/11/20 职场文书
护士辞职信怎么写
2015/02/27 职场文书
初中生物教学反思
2016/02/20 职场文书
《工作是最好的修行》读后感3篇
2019/12/13 职场文书
如何利用pygame实现打飞机小游戏
2021/05/30 Python
Nginx禁止ip访问或非法域名访问
2022/04/07 Servers