文档库 最新最全的文档下载
当前位置:文档库 › 深入理解jquery跨域请求方法

深入理解jquery跨域请求方法

深入理解jquery跨域请求方法
深入理解jquery跨域请求方法

下面小编就为大家带来一篇深入理解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中的Ajax几种请求方法

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)

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地址.

解决js跨域问题

JSONP(JSON With Padding),就是打包在函数调用中的的JSON(或者包裹的JSON)。AJAX和JSONP在jQuery中的调用方式看起来极为相像,千万不要被这种现象迷惑,它们本质上有很大不同。AJAX是通过XMLHttpRequest对象获取非页面内容,而JSONP是动态的添加 3. 20. 21. 22. 23. 其中get.php的代码是

AJAX跨域的解决方法之PHP后端代理

AJAX是一项客户端技术(JavaScript的XMLHttpRequest对象),在网页上可以用于异步加载数据。但是由于同源策略,一般来说位于服务器1的网页无法与其它的服务器(服务器2)沟通。这就产生了AJAX的跨域问题。解决这个问题有较多的办法可以实现,今天与大家分享一个比较常见的办法——后端代理。 起因: 通常指的AJAX对象(XMLHttpRequest对象)是无法访问其它服务器的数据,于是产生了跨域问题。 思考: 既然前端的AJAX无法跨域访问数据,但是可以访问本站(同源:域名、端口、协议)的数据。而PHP作为一门后端编程语言,是可以任意读取互联网的数据,当然就可以读取其它服务器的数据了。再将PHP读取到的数据交给前端使用,这时前端就能在本站的PHP 程序上得到远程服务器的数据了,也就是说,让本站的PHP程序当一个代理人,代替前端去读取数据再交给前端程序使用。这就是AJAX跨域的解决办法之一——后端代理! 需求: 在本地服务器list.html页面上使用AJAX技术获取并显示来自https://www.wendangku.net/doc/eb15899546.html,/的数据。

基于同源策略,该请求是无法完成的PHP后端代理实现: 1、编写PHP文件get.php PHP访问https://www.wendangku.net/doc/eb15899546.html,的网页数据 2、编写HTML网页list.html

请求本站的后端文件get.php 3、执行结果 使用AJAX也能得到https://www.wendangku.net/doc/eb15899546.html,的数据了 后记: 其实解决AJAX跨域请求数据的办法有很多,比如:JSONP、设置响应头、Iframe等等,可以根据自身的实际情况来使用,今天介绍的后端代理核心点在于让后端程序去实现跨域获取数据,再以同源方式提供给前端页面使用,可以在有后端程序支持的情况下使用。下面再给大家列出一些常见的问题。 1、什么是AJAX? AJAX是一项客户端技术,通常指的是window.XMLHttpRequest对象,也有老版本的IE浏览器以其它的对象名称来代表该对象。 2、什么是同源策略?

jQuery 跨域访问问题解决方法

jQuery 跨域访问问题解决方法 2011-01-19 22:05:12| 分类:默认分类| 标签:|字号大中小订阅 浏览器端跨域访问一直是个问题, 多数研发人员对待js的态度都是好了伤疤忘了疼,所以病发的时候,时不时地都要疼上一疼.记得很久以前使用iframe 加script domain 声明,yahoo js util 的方 式解决二级域名跨域访问的问题. 时间过得好快,又被拉回js战场时, 跨域问题这个伤疤又开疼了. 好在,有jquery帮忙,跨域问题似乎没那么难缠了.这次也借此机会对跨域问题来给刨根问底,结合实际的开发项目,查阅了相关资料,算是解决了跨域问题..有必要记下来备忘. 跨域的安全限制都是指浏览器端来说的.服务器端是不存在跨域安全限制的, 所以通过本机服务器端通过类似httpclient方式完成“跨域访问”的工作,然后在浏览器端用AJAX 获取本机服务器端“跨域访问”对应的url.来间接完成跨域访问也是可以的.但很显然开发量比较大,但限制也最少,很多widget开放平台server端(如sohu博客开放平台)其实就么搞的.不在本次讨 论范围. 要讨论的是浏览器端的真正跨域访问,推荐的是目前jQuery $.ajax()支持get方式的跨域,这其实 是采用jsonp的方式来完成的. 真实案例: 复制代码代码如下: var qsData = {'searchWord':$("#searchWord").attr("value"),'currentUserId':$("#currentUserId").attr("value"),' conditionBean.pageSize':$("#pageSize").attr("value")}; $.ajax({ async:false, url: http://跨域的dns/document!searchJSONResult.action, type: "GET", dataType: 'jsonp', jsonp: 'jsoncallback', data: qsData, timeout: 5000, beforeSend: function(){ //jsonp 方式此方法不被触发.原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件 了 }, success: function (json) {//客户端jquery预先定义好的callback函数,成功获取跨域服务器上的 json数据后,会动态执行这个callback函数 if(json.actionErrors.length!=0){ alert(json.actionErrors); }

ajax面试题

Ajax面试资料整理 1、ajax过程 (1)创建XMLHttpRequest对象,也就是创建一个异步调用对象. (2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息. (3)设置响应HTTP请求状态变化的函数. (4)发送HTTP请求. (5)获取异步调用返回的数据. (6)使用JavaScript和DOM实现局部刷新. 2、异步加载和延迟加载 1.异步加载的方案:动态插入script标签 2.通过ajax去获取js代码,然后通过eval执行 3.script标签上添加defer或者async属性 4.创建并插入iframe,让它异步执行js 5.延迟加载:有些 js 代码并不是页面初始化的时候就立刻需要的,而稍后的某些情况才需要的。 3、请解释一下 JavaScript 的同源策略。 概念:同源策略是客户端脚本(尤其是Javascript)的重要的安全度量标准。它最早出自Netscape Navigator2.0,其目的是防止某个文档或脚本从多个不同源装载。 这里的同源策略指的是:协议,域名,端口相同,同源策略是一种安全协议。指一段脚本只能读取来自同一来源的窗口和文档的属性。 为什么要有同源限制? 我们举例说明:比如一个黑客程序,他利用Iframe把真正的银行登录页面嵌到他的页面上,当你使用真实的用户名,密码登录时,他的页面就可以通过Javascript读取到你的表单中input中的内容,这样用户名,密码就轻松到手了。 4、GET和POST的区别,何时使用POST? GET:一般用于信息获取,使用URL传递参数,对所发送信息的数量也有限制,一般在2000个字符 POST:一般用于修改服务器上的资源,对所发送的信息没有限制。 GET方式需要使用Request.QueryString来取得变量的值,而POST方式通过Request.Form来获取变量的值, 也就是说Get是通过地址栏来传值,而Post是通过提交表单来传值。 然而,在以下情况中,请使用 POST 请求: 无法使用缓存文件(更新服务器上的文件或数据库) 向服务器发送大量数据(POST 没有数据量限制)

相关文档
相关文档 最新文档