您好,欢迎访问一九零五行业门户网

jsonp+json实现AJAX跨域请求

这次给大家带来jsonp+json实现ajax跨域请求,jsonp+json实现ajax跨域请求的注意事项有哪些,下面就是实战案例,一起来看一下。
ajax(异步的 javascript 和 xml)是用于创建快速动态网页的一种技术,它在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页,ajax 使用xmlhttprequest对象在后台与服务器交换数据,xmlhttprequest 是 ajax 的基础,它允许客户端 javascript 通过 http请求连接到远程服务器。
但是,由于受到浏览器的限制,这种方法不可以进行跨域访问,如果使用这种方法进行跨域访问则会出现安全问题。不过,我们可以发现,在web页面跨域调用 js文件时,不会受到浏览器的限制,所以我们可以利用将远程服务器端的数据装入js格式的文件,然后再用来供客户端进行调用。
json(javascript 对象表示法)是一种轻量级的文本数据交换格式,它具有自我描述性,易于理解。json 可通过 javascript 进行解析,json 数据可使用 ajax 进行传输。
json实例:
{  employees: [  { firstname:bill , lastname:gates },  { firstname:george , lastname:bush },  { firstname:thomas , lastname:carter }  ]  }
json 语法是 javascript 对象表示法语法的子集:
数据在名称/值对中, 数据由逗号分隔 ,花括号保存对象, 方括号保存数组。
json的特性
纯文本,易于跨平台传递
javascript原生支持,后台语言几乎全部支持
使用轻量级的文本数据交换格式,适合在互联网中传递
比 xml 更小、更快,更易解析。
基于json的这些特性,可以通过使服务器动态生成json文件,然后将客户端需要的数据装入这个文件,再将该文件调回客户端供客户端使用。为了便于客户端使用数据,逐渐形成了一种非正式传输协议jsonp,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来装入json数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。
如何使用jsonp
一种简单的方式就是使用jquery来实现:
<!doctype html> <html> <head>  <meta http-equiv="content-type" content="text/html;charset=utf-8">  <title>test</title>  <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>   <script type="text/javascript">   $(document).ready(function(){        $.ajax({     type: get,     async: false,     url: http://encounter.christmas023.space/json.php?name=mavis&age=18,     datatype: jsonp,     jsonp: callback,//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)     jsonpcallback:message,//自定义的jsonp回调函数名称,默认为jquery自动生成的随机函数名,也可以写?,jquery会自动为你处理数据     success: function(json){      alert('你的名字:' + json.name + ' 年龄: ' + json.age);       },     error: function(){      alert('fail');     }    });   });   </script> </head> <body> </body> </html>
type:请求类型,get 或 post,默认为 get;
async:true(异步)或 false(同步),默认情况下为true,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行;
url:发送请求的地址(跨域请求时应为绝对地址);
datatype:指定服务器返回的数据类型;
jsonpcallback:自定义jsonp回调函数名称;
success:请求成功后回调函数;
error:请求失败时调用此方法。
运行结果:
服务器返回的数据类型:
返回一个指定函数名为message的回调函数,函数里面包裹的数据为json格式。
相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!
推荐阅读:
jsonp怎样才能解决ajax跨域
在jquery里调用ajax实现异步
以上就是jsonp+json实现ajax跨域请求的详细内容。
其它类似信息

推荐信息