AJAX机制详解以及跨域通信(3)

因为script标签返回的都是js代码,且该js代码会自动执行。所以,如果我们请求返回的数据也是类似一段js代码的形式,岂不是就可以实现在脚本加载完毕后自动执行。

如果我们的请求,返回的数据是 callback + '(' + json + ')'; 这种形式的数据, 那么在脚本加载完毕之后也就能自动执行callback()函数了.

4.1.客户端写法

<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> <button>请求数据</button> </body> <script> window.onload=function(){ var button=document.getElementById("ibutton"); function callback(data){ //处理data } button.onclick=function(){ var script=document.createElement("script"); script="http://www.sasd.com/json/?callbak=callback"; document.body.insertBefore(script,document.body.firstChild);//加载脚本 } } </script> </html>

1.客户端将回调函数名写入<Script>脚本的url参数中。

2.script加载的时候会发送跨域请求。

4.2.服务器端

1.通过url得到函数名,命名为callback

2.将请求的数据作为函数的参数格式转化json格式,命名为。

3.将返回结果拼接为 callback+"("+json+")"; --------返回的就是填充式的数据,这段数据在脚本中会自动执行。

4.返回数据.

 4.3.JSONP技术的缺点

1.因为是通过url传参数,所以请求只能是get类型的。

2.<script>目前只有onload属性事件,onerror还没有统一化,如果加载脚本出错,客户端很难得到反馈。

3.所请求数据的站点必须是可信任的,如果返回的数据段中注入的有恶意的代码,危害较大,且难以发现。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wfyxzd.html