下面小编就为大家带来一篇深入理解jquery跨域请求方法。小编觉得挺不错的,现在分享给大家,也给大家做个参考。
项目中关于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跨域请求方法就是小编分享给大家的全部内容了,希望能给大家一个参考
jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯。 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法,当然,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()的(这个后面会说到). 1. load( url, [data], [callback] ) :载入远程HTML 文件代码并插入至DOM 中。 url (String) : 请求的HTML页的URL地址。 data (Map) : (可选参数) 发送至服务器的key/value 数据。 callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。 这个方法默认使用GET 方式来传递的,如果[data]参数有传递数据进去,就会自动转换为POST方式的。jQuery 1.2 中,可以指定选择符,来筛选载入的HTML 文档,DOM 中将仅插入筛选出的HTML 代码。语法形如"url #some > selector"。 这个方法可以很方便的动态加载一些HTML文件,例如表单。 示例代码: $(".ajax.load").load("[url]https://www.wendangku.net/doc/eb15899546.html,/QLeelulu/archive/2008/03/30/1130270.html[/url] .post", function (responseText, textStatus, XMLHttpRequest){ this;//在这里this指向的是当前的DOM对象,即$(".ajax.load")[0] //alert(responseText);//请求返回的内容 //alert(textStatus);//请求状态:success,error //alert(XMLHttpRequest);//XMLHttpRequest对象 }); 这里将显示结果。 注:不知道为什么URL写绝对路径在FF下会出错,知道的麻烦告诉下。下面的get()和post()示例使用的是绝对路径,所以在FF下你将会出错并不会看到返回结果。还有get()和post()示例都是跨域调用的,发现传上来后没办法获取结果,所以把运行按钮去掉了。 2. jQuery.get( url, [data], [callback] ):使用GET方式来进行异步请求 参数: url (String) : 发送请求的URL地址. data (Map) : (可选) 要发送给服务器的数据,以Key/value 的键值对形式表示,会做为QueryString附加到请求URL中。 callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。 这是一个简单的GET 请求功能以取代复杂$.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用$.ajax。示例代码: $.get("./Ajax.aspx", {Action:"get",Name:"lulu"}, function (data, textStatus){ //返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等. this; // 在这里this指向的是Ajax请求的选项配置信息,请参考下图
jQuery Ajax 全解析【.ajax .post .get】 1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中。 url (String) : 请求的HTML页的URL地址。 data (Map) : (可选参数) 发送至服务器的 key/value 数据。 callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。 这个方法默认使用 GET 方式来传递的,如果[data]参数有传递数据进去,就会自动转换为POST方式的。jQuery 1.2 中,可以指定选择符,来筛选载入的 HTML 文档,DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。 这个方法可以很方便的动态加载一些HTML文件,例如表单。 示例代码: $(".ajax.load").load("https://www.wendangku.net/doc/eb15899546.html,/QLeelulu/archive/2008/03 /30/1130270.html .post", function (responseText, textStatus, XMLHttpRequest){ this;//在这里this指向的是当前的DOM对象,即 $(".ajax.load")[0] //alert(responseText);//请求返回的内容 //alert(textStatus);//请求状态:success,error //alert(XMLHttpRequest);//XMLHttpRequest对象 }); 注:不知道为什么URL写绝对路径在FF下会出错,知道的麻烦告诉下。下面的get()和post()示例使用的是绝对路径,所以在FF下你将会出错并不会看到返回结果。还有get()和post()示例都是跨域调用的,发现传上来后没办法获取结果,所以把运行按钮去掉了。 2. jQuery.get( url, [data], [callback] ):使用GET方式来进行异步请求 参数: url (String) : 发送请求的URL地址.
JSONP(JSON With Padding),就是打包在函数调用中的的JSON(或者包裹的JSON)。AJAX和JSONP在jQuery中的调用方式看起来极为相像,千万不要被这种现象迷惑,它们本质上有很大不同。AJAX是通过XMLHttpRequest对象获取非页面内容,而JSONP是动态的添加 3. 20.
21. 22. 23.