本次AJAX测试例子:
上面的错误主要是路径出错,要注意项目的默认路径,相对路径和绝对路径
(注意:open的文件路径和文件内容可以自行修改)
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h1>AJAX tset</h1>
</div>
<button type="button" onclick="loadDoc1()">./ajax_info.txt</button>
<button type="button" onclick="loadDoc2()">/ajax_info.txt</button>
<button type="button" onclick="loadDoc3()">/AJAXTXT/AJAXTXT.txt</button>
<button type="button" onclick="document.getElementById('demo').innerHTML = 'XAJAX tset'">恢复</button>
<script>
function loadDoc1() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "./ajax_info.txt", true);
xhttp.send();
}
function loadDoc2() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "/ajax_info.txt", true);
xhttp.send();
}
function loadDoc3() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "/AJAXTXT/AJAXTXT.txt", true);
xhttp.send();
}
</script>
</body>
</html>
本地运行的AJAX例子(就是直接点击.html文件):
出现错误:AJAX.html:23 GET file:///D:/javascript%20study/demo_get.asp?t=0.47891536460396633 net::ERR_FAILED
原因:访问本地.txt文件会出现跨域问题,浏览器不支持跨域
解决:需要创建虚拟的服务机运行,简单的方法就是用相应软件创建网页运行,比如使用Visual Studio 创建一个网页文件运行
步骤:
- 使用Visual Studio创建一个web应用,可自行选择,这边为了方便修改直接使用模板创建(这个创建的是.net framework)
(注意:使用.net core的话,静态文件比如.txt默认放在wwwroot文件里,通过“/+该文件目录下的文件路径”访问,并需要在配置文件添加app.UseStaticFiles();使用静态文件,可以修改app.UseStaticFiles(filename)修改静态文件存放路径,静态文件只能在该设置目录下访问)
2.生成的项目中选中index文件进行修改测试
3. index文件里粘贴上述代码,并在对应路径创建txt及赋予内容
注意:上述代码控件以及文件路径和文件内容可自行修改,本次代码是为了方便后面错误解释,txt文件里的内容为this is + 对应路径
实现效果:
原始(右边是按F12出现的控制台,可以用来查看错误信息等):
变化:
点击“./ajax_info.txt”按钮会出现报错:Failed to load resource: the server responded with a status of 404 ()
GET https://localhost:44370/Home/ajax_info.txt 404
原因:”./ajax_info.txt”路径不对,跟配置信息有关系(这个配置不太会修改)
查看在网页上的路径:
(根据红框提示可查看路径)
查看本地路径:与index文件同级,但是与网页上的路劲不一致,这就会导致文件访问不了,这边不建议放在与index.vbhtml文件同级目录下,由于项目的配置文件设置问题,在这个目录下的文件路径设置会有问题
解决1修改路径:修改txt存放路径:1.可以防止在项目文件主目录中,通过”/”访问
2.可以新建文件夹存放,通过“/文件夹名字访问”
3..net core 静态文件只能放在app.UseStaticFiles(filename)设置的目录下,默认为wwwroot下
如果都正常的话,还会出错,就需要清理文件解决方案,重新生成,因为配置文件的一些配置信息没有修改
(可参照下图)
解决2修改浏览器属性(本次测试该方法未实现,可自行测试):
在网络上查找的方法,修改浏览器的属性,使它可以跨域:
右键浏览器属性,在对应位置上添加“ --allow-file-access-from-files”(记得最好要有空格)