原文地址:http://my.oschina.net/LinBandit/blog/34570
 

前阵子做了一个前端动态加载json数据的应用,其中使用xmlhttprequest动态加载js,但是前提是我的前端必须和js数据之间不能跨域,这个局限就很大了,果然过不多久,就接到要求,这个前端需要整合到另一个服务器上面去,我顿时就傻眼了,因为我最不愿意看到的情况出现了,跨域问题,唉,新手总是怕遇见问题,遇见多了估计就成了高手了。

没办法就只能重写前端获取数据的js逻辑,这次不能使用xmlhttprequest,而是使用动态加载script的方式加载js脚本,之前也曾经试过这种方法,但是碰到了异步加载的问题就搁置了,这次我也想了一些办法解决了这些问题,现在说一说我的思路。

1、如何加载script?

我使用的还是原始的js创建元素的方法加载的:document.createElement("script");然后设置路径等属性;

2、什么时候才能使用动态加载的js文件中的变量?

由于script是异步加载的,所以在执行append方法后,并不能马上使用里面的脚本,必须要等到脚本完全加载完毕之后才能使用,script元素有onload(ff、chrom)、onreadystatechange(ie)、onerror(ie、chrome、ff)属性可以设置回调函数,在ff和chrom中,script加载成功后会执行onload设置的回调函数,而在ie中如果script的加载状态发生变化后就会执行onreadystatechange回调函数,在函数中根据状态码判断加载状态,如果脚本加载失败的时候就会执行onerror的回调函数。

特别的,在ie中,如果你的脚本是已经加载过的,那么ie不会重新再次加载,这个特性在开始的时候可是让我大吃苦头,如果你的脚本是在之前加载过的话,那么在onreadystatechange回调函数中会有相应的状态码加以判断就是readystate=='complete',如果你要加载的脚本中的内容是动态变化的,同一个脚本文件每个一段时间其中的内容就会不一样,这个特性就会带来麻烦了,不过可以在你的脚本地址后面加上"?354354546",就是加上一个问号和一个随机数,这样就能保证在ie中不会应为你的脚本地址加载过就不会再次加载了。

评论2

  •  
    1楼:YehAlice 发表于 2011-11-07 10:01 回复此评论
    1. 跨域获取json数据, 網路上有很多解決方法.
    2. 為何加載script不用jQuery的getScript, 自己用xmlhttprequest要解決跨平台的問題.
    3. jQuery的ajax可以設定cache=true, 不過我的習慣是後面加上版本序號
     
  •  
    2楼:土匪强 发表于 2011-11-08 23:07 回复此评论

    引用来自“YehAlice”的评论

    1. 跨域获取json数据, 網路上有很多解決方法.
    2. 為何加載script不用jQuery的getScript, 自己用xmlhttprequest要解決跨平台的問題.
    3. jQuery的ajax可以設定cache=true, 不過我的習慣是後面加上版本序號

    哈哈,谢谢你的指点啊,我会一一去学习的!

 
 

最新文章

  1. string.empty , "" , null 以及性能的比较
  2. MVC 中aspx的增删改查
  3. 二十六:Struts2 和 spring整合
  4. shell函数
  5. hdu 4605 Magic Ball Game
  6. java中的包装类与装箱拆箱定义
  7. com学习 2015-10-16
  8. html input readonly 和 disable的区别
  9. nodejs中npm工具自身升级
  10. js基础例子dom+原型+oop基础知识记录01
  11. 搜索和搜索形式(SEARCHING and its forms)
  12. 初识sql server 2000-数据库的连接
  13. iOS 之 手势
  14. 基于‘BOSS直聘的招聘信息’分析企业到底需要什么样的PHP程序员
  15. apache hive 1.0.0发布
  16. SpringBoot2
  17. js 中面向对象的多态
  18. 插件Vue.Draggable(5000🌟)
  19. UNIX环境高级编程 第16章 网络IPC:套接字
  20. mybatis基础之二

热门文章

  1. L212
  2. Axure使用笔记1:如何去除IE中每次“已限制网页运行脚本或ActiveX控件”
  3. Ubuntu 12.04硬盘安装教程
  4. HDU 4185
  5. Word Embeddings
  6. 20155220 2016-2017-2 《Java程序设计》第九周学习总结
  7. 第三周作业3——Bug Report
  8. Java-JDK & Android SDK下载安装及配置教程
  9. 有向图与无向图的合并操作区别D(递归与并查集)
  10. hdu2084 数塔 DP