最近工作需要,得搞搞前端,这种东西之前没有接触过。出现了各种各样的小错误,莫名奇妙。
在这里记录下出错的问题:
放上原生Js版的Ajax,来自W3school
个人代码差不多如下:
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
{// code for all new browsers
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{// code for IE5 and IE6
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp!=null)
{
xmlhttp.onreadystatechange=state_Change;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
else
{
alert("Your browser does not support XMLHTTP.");
}
}
function state_Change()
{
if (xmlhttp.readyState==4)
{// 4 = "loaded"
if (xmlhttp.status==200)
{// 200 = OK
// ...our code here...
}
else
{
alert("Problem retrieving XML data");
}
}
}
</script>
1. 直接双击运行html,在本地打开html文件,浏览器为chrome,报错原因:跨域冲突,ajax不支持访问本地原件
解决办法:之前没处理过前端的东西,我就直接将其挂载在Flask上了,得到一个local的域名,便解决了该问题。网上说的在Chrome的快捷方式的target后面加东西的,亲测无效
2. 本人是准备直接读取本地的json文件,然而更改json文件后,发现ajax读取的依然是之前的文件,甚至于我将本地json删除后,依然能正常读取。
一开始感觉很纳闷,文件都被我删了,还能读出来?后来发现应该是浏览器有缓存,把缓存清掉应该就可以了
前端坑太大,生活所迫。今后应该不会再涉及前端了,还是搞图像有意思
3. 清楚ajax缓存办法:
1、加时间戮
对于一个浏览器,你的第一次点击是会调用rpc请求的, 但是你再用同一个浏览器提交表单的时候, rpc不会被提交, 因为参数一样, 这个可能是ajax的XMLHttpRequest对象的问题, 如设置了时间间隔了,实际上是(new ActiveXObject(“Microsoft.XMLHTTP”))所以, 在实际操作的时候, 给rpc的参数传递一个没有用的guid= new Date().getTime()
一个时间戳 ,以保证每次的点击事件都会激发rpc请求, 因为这样的参数(或者说url)是不一样的。
为什么要把时间戳追加到目标url?
在某些情况下, 有些浏览器会把多个XMLHttpRequest请求的结果缓存在同一个url。如果对每个请求的响应不同,这就会带来不好的结果。把当前时间戳追加到url的最后,就能确保url的唯一性,从而避免浏览器的缓存结果。
2、在要异步获取的页面中写一段禁止缓存的代码:
Response.Buffer =True
Response.ExpiresAbsolute =Now() - 1
Response.Expires=0
Response.CacheControl=”no-cache”
3、在ajax发送请求前加上xmlHTTP.setRequestHeader(“If-Modified-Since”,”0”);可以禁止缓存
xmlHTTP.open(“get”, URL, true);
xmlHTTP.onreadystatechange = callHTML;
xmlHTTP.setRequestHeader(“If-Modified-Since”,”0”);
xmlHTTP.send();
我仅仅测试了方案3,实验可用。
参考出处:https://www.cnblogs.com/cgli/archive/2011/01/20/1940329.html