Ajax常见问题

 

---

 

1.Ajax缓存问题

如果使用的是get，那么在ie下出现缓存问题。导致代只执行一次。解决办法就是加时间戳或者随机数，使url变为唯一，这样就不会出现ie下的缓存问题了，或者改为post提交。

<script type="text/javascript" >
        document.onclick = function () {
            //不同的浏览器使用不同的方法来创建 XMLHttpRequest 对象。 
            //Internet Explorer 使用 ActiveXObject。
            //其他浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象。
            //按照微软的方式创建对象，也可以加载最新版本的 "Msxml2.XMLHTTP" 
            var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
            //添加时间戳 解决ajax缓存问题
            xhr.open("get", "CacheTest.aspx?_t" + (new Date()), true);
            //readyState有5中状态 每次都会触发 onreadystatechange 事件
            xhr.onreadystatechange = function () {
                //readyState=4表示HTTP 响应已经完全接收 status=200表示全部成功，顺序不能错
                if (xhr.readyState == 4 && xhr.status == 200) {
                    alert(xhr.responseText);
                }
            };
            //发送 HTTP 请求，使用传递给 open() 方法的参数，以及传递给该方法的可选请求体。
            xhr.send();
        };
    </script>

第一种方法是加时间戳

var url ="CacheTest.aspx?t+“ + new Date().getTime();

 

第二种方法加个随机数

var url ="CacheTest.aspx?t+“ + Math.random();

 

小营养

　　HTTP消息头控制缓存

a.输出不缓存

header("Expires:过去的一个时间");
header("Last-Modified:当前时间");
header("Cache-Control:no-store, no-cache, must-revalidate, post-check=0, pre-check=0");
header("Pragma:no-cache"); 

示例:
//1997年7月26日cache失效,因为时间早已经过去,所以cache失效.
header("Expires:Mon, 26 Jul 1997 05:00:00 GMT");
//cache更新时间
header("Last-Modified:" . gmdate("D, d M Y H:i:s") . "GMT");
//不缓存网页
header("Cache-Control:no-cache, must-revalidate, no-store, no-cache, must-revalidate, post-check=0,pre-check=0");
//不缓存网页
header("Pragma:no-cache");

b.输出永久缓存

header("Expires:未来最远的一个时间");
header("Last-Modified:当前时间”);

示例:
header("Expires:" .gmdate ("D, d M Y H:i:s", time() + 3600 * 24 * 30). "GMT");
header("Last-Modified:" . gmdate("D, d M Y H:i:s") . "GMT"); 

c.输入出缓存一部分时间后效

header("Expires:失效的日期");
或header("Cache-Control: max-age=60”)  //60秒后失效
header("Last-Modified:当前时间”);

 

 2.Ajax乱码问题

 1.如果引用js出现乱码问题，一般是因为编码不一样导致，默认js编码是UTF-8。统一文件的编码    

  <script type="text/javascript" src="demo.js" charset="utf-8"></script>

 2.如果文件编码一致，还有乱码问题，添加消息头，自定义告诉浏览器所使用的编码。 header("Content-Type:text/plain;charset=文件编码");

tips：Ajax请求服务器，默认服务器把请求内容转换成UTF-8编码。

 

 3.Ajax跨域问题

1.使用script标签：可以用跨域调用js文件方法，在原文件添加 <script  id="tempScript" type="text/javascript"></script>标签，动态改变src引用地址，再去处理跨域js返回的数据。

   var rs = document.getElementById("tempScript");
    var script = document.createElement("Script");
    script.src = "http://www.baidu.com";
    rs.parentNode.replaceChild(script, rs);
    script.id = "tempScript";

tips：火狐下面，修改已有的js的src属性，不会去加载js文件，所以选择动态添加js的src方法。

 

2.修改host文件：host映射一下域名，浏览器是根据域名判断是否跨域访问的，而不是根据IP。

tips：host文件位置：C:\Windows\System32\drivers\etc\hosts

 

  

3.使用服务器端的代理：服务器可以访问网站任何资源，通过代理获取跨域的资源数据，再由代理把数据发送给应用程序。