【发布时间】：2014-01-17 01:00:14
【问题描述】：
我最近完成了有关 PHP MVC 的阅读，我想做一个 MVC 的 ajax 版本，但我遇到了 MIME 类型的问题。我想要做的是将所有服务器调用重定向到index.html 页面，所以如果用户转到一个不存在的页面，该页面将加载索引页面，然后 ajax 可以使用 uri 来做这件事。
没有 htaccess 文件一切正常，但是当取消注释时，我会遇到浏览器无法读取 CSS、JS 和任何链接图像的问题，因为根据控制台将 MIME 类型设置为 HTML。
[编辑]
在 fiddler 中进一步检查后，似乎浏览器正在发送 index.html 文件而不是 CSS 和 JavaScript 文件，所以我似乎需要能够在它是一个例外的情况下CSS 或 JS 文件。但我认为这是 RewriteCond -f || 的目的-d 在 htaccess 文件中..
从上次编辑中我发现我可以对 rewriteCond 进行例外处理以允许 CSS 和 JS 文件通过。但是现在在 ajax 调用中使用的 PHP 文件正在显示 HTML 内容...我对 htaccess 文件所做的更改如下
RewriteEngine On
RewriteCond &{REQUEST_FILENAME} !-f
RewriteCond &{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !css$
RewriteCond %{REQUEST_URI} !js$
RewriteCond %{REQUEST_URI} !php$
RewriteRule (.*) index.html [L]
[/edit]
这里是复制我正在测试的部分，你可以在你的本地主机上运行。
https://www.dropbox.com/s/qx0d76xjvfuz681/ajaxTest.zip
感谢您的帮助，
安德鲁
htaccess
RewriteEngine On
RewriteCond &{REQUEST_FILENAME} !-f
RewriteCond &{REQUEST_FILENAME} !-d
RewriteRule (.*) index.html [L]
index.html
<html>
<head>
<meta charset="utf-8">
<title>ajax mvc test</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<nav>
<ul>
<li><a href="one" class="links link1">one</a></li>
<li><a href="two" class="links link2">two</a></li>
<li><a href="three" class="links link3">three</a></li>
</ul>
</nav>
<div class="main"></div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
main.css
body{
background: #f2f2e6;
font-family: sans-serif;
}
h2{
font-size: 2em;
color: #5a2306;
}
main.js
(function(){
// get the address of the webpage
var url = window.location.pathname,
// get the breadcrumb
urlrep = url.match(/(.*)index\.html/)[1],
// create regEx to test later
address = new RegExp(urlrep);
function update(method){
// update the history of the webpage
var state = {
data: "this is the data",
title: "title",
url: method
}
updated(method);
history.pushState(state, state.title, state.url);
}
function updated(method){
// run the ajax call
if(method !== 'index'){
console.log("not matched index no ajax call");
ajaxPost(method + '.php');
}
}
var nav = document.getElementsByClassName('links');
// set event listeners on links
for (var i = 0; i < nav.length; i++) {
(function(x){
nav[x].addEventListener('click', function(e){
e.preventDefault();
console.log("textContent: " + e.target.textContent);
update(e.target.textContent);
});
})(i);
};
// set event listener to browser popstate
window.addEventListener('popstate', function(e){
var rep = window.location.pathname.replace(address, '').replace(/\.html/, '');
console.log("popstate: " + rep);
updated(rep);
});
// run the ajax call.
function ajaxPost(address){
var ajax,
main = document.getElementsByClassName('main')[0];
console.log("address: " + address);
ajax = new XMLHttpRequest();
ajax.onreadystatechange = function(){
if(ajax.readyState == 1){
// sendFunc
main.innerHTML = "";
}
if(ajax.readyState == 4){
// returnFunc
main.innerHTML = ajax.responseText;
}
}
ajax.open('post', address, true);
ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded");
ajax.send();
}
})();
one.php
<?php
echo "<h2>one</h2>";
echo "<p>Its like a symbology of this of your mouth is eating food, from your mouth to your heart, is your freedom and your independence and your identity. The best way to communicate is compatible. Compatible communication is listening with open ears and an open mind, and not being fearful or judgemental about what you're hearing.</p>";
echo "<p>Ipsum text generated by<a href=\"http://www.buseyipsum.com\"> Busey Ipsum </a> </p>";
?>
两个.php
<?php
echo "<h2>two</h2>";
echo "<p>This is just common superficiality. Is thats whats so special about a woman? Superficiality with their face colours? This is just common superficiality. Is thats whats so special about a woman? Superficiality with their face colours?</p>";
echo "<p>Ipsum text generated by<a href=\"http://www.buseyipsum.com\"> Busey Ipsum </a> </p>";
?>
三个.php
<?php
echo "<h2>three</h2>";
echo "<p>I would like to give you a backstage pass to my imagination. Have you urinated? Have you drained your bladder? Are you free? Because if you havent it will only come out later. I'm giving you some information that your bodily fluids may penetrate your clothing fibre's without warning.</p>";
echo "<p>Ipsum text generated by<a href=\"http://www.buseyipsum.com\"> Busey Ipsum </a> </p>";
?>
【问题讨论】：
标签： javascript html ajax .htaccess mime