前端AJAX在Apache中的配置問題(總結)

本人在學習前端AJAX的過程中需要相關的服務器配置實現。首先下載XAMPP,作用是建站集成。我使用的是Apache
我修改了端口號,點擊config,選擇第一個http.cong,在記事本中ctrl+f將所有的80改成81之後保存
這裏寫圖片描述
點擊start,在瀏覽器端口輸出http://localhost:81/,出現了XAMPP的登錄頁面。
但是現在,問題來了,我是用的是WebSorm , 在這個文件夾下面佈置的Ajax文件。
這裏寫圖片描述
想了很多辦法,其中包括在WebSorm軟件下的Settings中更改端口號,或者增加服務器。。。
但是行不通。又上網搜了下,正確的做法是這樣的。
找到我們的XAMPP的安裝文件加下
這裏寫圖片描述
修改httpd.conf文件,在244,245行,默認是我們的安裝路徑
這裏寫圖片描述
改爲在WebSorm中在文件夾下面佈置的Ajax文件夾的路徑。
這裏寫圖片描述
改好後,重新啓動服務器。輸入http://localhost:81/
然後我們就看到了文件夾下一下的內容
這裏寫圖片描述
希望後面搞前端的同學可以少走些彎路了。。。

測試代碼,新建一個ajax-03.txt,寫入內容。 ajax-03.html發送ajax,如下

<html>
<head>
</head>

<body>

<script type="text/javascript">

function ajaxFunction(the_request_url)
{
    var xmlHttp;

    try {
        xmlHttp = new XMLHttpRequest() ;   
    }    
    catch(e) {
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch(e) {
            try {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(e) {
                alert("您的瀏覽器不支持ajax") ;
                return false;
            }    
        }    
    }

    if (xmlHttp) {
        xmlHttp.open('GET', the_request_url, true);     
        xmlHttp.onreadystatechange = function() {
            if (xmlHttp.readyState ==4 ) {
                if (xmlHttp.status == 200 ) {
                    document.getElementById('vv').innerHTML = xmlHttp.responseText;        
                }     
            }   
        };
        xmlHttp.send(null);
    } else {
        alert('error');     
    }
}


</script>

<input type="button" id="test" value="test" onclick="javascript:ajaxFunction('ajax-3.txt')" />
<br/><br/>
<div id="vv">test ajax</div>

</body>

</html>

點擊test按鈕,就會出現ajax技術取出的ajax-3.txt’內容。
這裏寫圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章