关于Js的跨域操作

2,309 views

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,309
On SlideShare
0
From Embeds
0
Number of Embeds
108
Actions
Shares
0
Downloads
42
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

关于Js的跨域操作

  1. 1. 关于 Javascript 的跨域操作 兰波 天津网博互动科技有限公司
  2. 2. 关于 Javascript 的跨域操作 www.a.com
  3. 3. 关于 Javascript 的跨域操作 www.a.com
  4. 4. 关于 Javascript 的跨域操作 login.php a.com b.com Get : username, passowrd {error: date:} Javascript: if (ture) setCookie
  5. 5. 跨域 POST 或 GET 没有问题 关于 Javascript 的跨域操作
  6. 6. <ul><li><html> </li></ul><ul><li><body> </li></ul><ul><li><form method=get action=&quot;http://b.com/request.php&quot;> </li></ul><ul><li>username:<input name=username> </li></ul><ul><li>password:<input name=password> </li></ul><ul><li><input type=submit value=submit> </li></ul><ul><li></form> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>关于 Javascript 的跨域操作 a.com/request.html
  7. 7. <ul><li><?php </li></ul><ul><li>echo $_GET['username']; </li></ul><ul><li>echo $_GET['password']; </li></ul><ul><li>echo $_POST['username']; </li></ul><ul><li>echo $_POST['password']; </li></ul><ul><li>?> </li></ul>关于 Javascript 的跨域操作 b.com/request.php
  8. 8. 开始用 js 获取结果 关于 Javascript 的跨域操作
  9. 9. <ul><li><html><body> </li></ul><ul><li><iframe width=0 height=0 name='_hide'></iframe> </li></ul><ul><li><script> </li></ul><ul><li>function foo() { </li></ul><ul><li>..... </li></ul><ul><li>} </li></ul><ul><li></script> </li></ul><ul><li><form method=get action=&quot;http://b.com/request.php&quot; target='_hide'> </li></ul><ul><li><pre> </li></ul><ul><li>username:<input id=username name=username> </li></ul><ul><li>password:<input id=password name=password> </li></ul><ul><li><input type=submit value=submit> </li></ul><ul><li></pre> </li></ul><ul><li></form></body></html> </li></ul>关于 Javascript 的跨域操作 a.com/request.html
  10. 10. <ul><li><script> </li></ul><ul><li>Function foo() { </li></ul><ul><li>setCookie(); </li></ul><ul><li>} </li></ul>关于 Javascript 的跨域操作 <?php if ($_GET[username] == ‘u’ && $_GET[password] == ‘p’) { echo “<script>parent.foo();</script>” } ?>
  11. 11. <ul><li>$.get('b.com/request.php', </li></ul><ul><li>{'username':$('#username').val() </li></ul><ul><li>'password':$('#password').val() </li></ul><ul><li>}, function(data){ </li></ul><ul><li>if (data.error == '') { </li></ul><ul><li> setCookie(); </li></ul><ul><li> } else { </li></ul><ul><li> ... </li></ul><ul><li> } </li></ul><ul><li>} </li></ul><ul><li>) </li></ul>关于 Javascript 的跨域操作
  12. 12. <ul><li>a.com </li></ul>关于 Javascript 的跨域操作 b.com post a.com b.com post parent.xx callback
  13. 13. 关于 Javascript 的跨域操作
  14. 14. 如何解决 关于 Javascript 的跨域操作
  15. 15. a.com <script src=“b.com/requrest.php?u=xx&p=xx”></script> 关于 Javascript 的跨域操作 Header('application/ x - javascript ' ); <script>setCooke;</script> b.com/request.php a.com/request.html
  16. 16. <ul><li>getJSON </li></ul>关于 Javascript 的跨域操作 Jquery 1.2 以后:
  17. 17. <ul><li>$.get('http://b.com/request.php?callback=?', </li></ul><ul><li>{'username':$('#username').val(), 'password':$('#password').val()}, </li></ul><ul><li>function(data){ </li></ul><ul><li>if (data.error == '') { </li></ul><ul><li> setCookie(); </li></ul><ul><li> } else { </li></ul><ul><li> ... </li></ul><ul><li> } </li></ul><ul><li>}) </li></ul>关于 Javascript 的跨域操作
  18. 18. <ul><li>echo $_GET['callback'].&quot;({'error':'xxxx','data':'yyyy'})&quot;; </li></ul>关于 Javascript 的跨域操作
  19. 19. 关于 Javascript 的跨域操作 http://b.com/request.php?callback=jsonp1236928692745&_=1236928765485 &username=bbb&password=sss
  20. 20. <ul><li>'http://b.com/xx.php ? callback= ? ' </li></ul>关于 Javascript 的跨域操作 echo $_GET[' callback '] .&quot;({'error':'xxxx','data':'yyyy'})&quot;; 强调一下,容易误会的地方:
  21. 21. 谢谢。 <ul><li>目的:希望能省大家一点 google 的时间。 </li></ul>关于 Javascript 的跨域操作

×