1
我已經編寫了一個非常基本的頁面與搜索文本輸入與Ajax自動完成。我將input onchange屬性設置爲調用一個ajax函數，該函數將從服務器檢索一組值，並將選項添加到關聯的數據列表中。 當我改變文本輸入中的某些內容時，JavaScript不會執行。但是，當我最小化窗口或單擊一個新的選項卡時，我確實執行了它，因此它不是語法問題，也不是我認爲的文件包含。 我也嘗試清除我的緩存，它沒有效果（並且我每次關閉它時，我的Firefox都完全清除）。這可能是由於什麼原因造成的？ 我將粘貼我的源代碼：Firefox當它不應該執行時它應該
我的AJAX類。它確實有效，我在工作中測試了它，並且它工作正常。不需要閱讀它，我只是粘貼它，以防你想看看。
/**
* @file ajax.js
* @version 1.0 - 2012-07-30
* @author *****
* @brief This file describes a class allowing to easily perform AJAX requests.
*/
/**
* @class Ajax
* @brief Used to performs AJAX requests.
* @details Usage example :
*
* var request1 = new Ajax()
* .url('some_url')
* .parameters('some_parameters')
* .callback(function(xhr) { alert(xhr.responseText); })
* .method('GET')
* .execute();
*
* var request2 = new Ajax();
* request2.url('some_url');
* request2.parameters('some_parameters');
* request2.callback(function(xhr) { alert(xhr.responseXml); });
* request2.execute();
*
* Using setters is not necessary, properties can be set manually. Setters only allow to chain calls by returning this.
* The order in which properties are set does not matter as long as the mandatory ones are set before calling 'execute'.
* If the server returns a string it can be retrieved from xhr.responseText. If it returns an XML file, it will be in
* xhr.responseXml.
*/
function Ajax()
{
/**
* @brief (string) URL of the request (MANDATORY).
* @details It main contain parameters, but if so, the property 'parameters' should be used instead.
*/
var url;
/**
* @brief (string) Method to use for the request.
* @details Can be either 'GET' or 'POST'.
*/
var method = 'POST';
/**
* @brief Function to be called once the request has been performed.
* @details This callback function will be given the XMLHttpRequest object as a parameter.
*/
var callback;
/**
* @brief Parameters of the URL.
* @details Must be in the following format : 'arg1=value1&arg2=value2'... and contain no question mark.
*/
var parameters;
/**
* @brief Indicates if the request is syncrhonous.
*/
var wait = false;
/**
* @brief Sets the 'url' property.
* @details Returns the object to chain setter calls.
* @param String.
* @return Ajax.
*/
this.url = function($url) { url = $url; return this; };
/**
* @brief Sets the 'method' property.
* @details Returns the object to chain setter calls.
* @param String.
* @return Ajax.
*/
this.method = function($method) { method = $method; return this; };
/**
* @brief Sets the 'callback' property.
* @details Returns the object to chain setter calls.
* @param Function.
* @return Ajax.
*/
this.callback = function($callback) { callback = $callback; return this; };
/**
* @brief Sets the 'parameters' property.
* @details Returns the object to chain setter calls. WARNING : Using parameters will change the method to POST. If
* parameters must be passed using GET, they must be included in the URL.
* @param String.
* @return Ajax.
*/
this.parameters = function($parameters) { parameters = $parameters; method = 'POST'; return this; };
this.wait = function($wait) { wait = $wait; return this; };
// FIXME POST semble poser probleme lorsque l'on renvoie du json et que l'on l'éval.
/**
* @brief Performs the AJAX request.
* @details The mandatory properties must be set before calling this method.
*/
this.execute = function()
{
var xhr = null;
try { xhr = new XMLHttpRequest(); }
catch(e) {
try { xhr = new ActiveXObject("Msxml2.XMLHTTP"); }
catch(e2) {
try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); }
catch(e) {}
}
}
var self = this;
xhr.onreadystatechange = function() {
if(4 === xhr.readyState && 200 === xhr.status) {
if(callback) return callback(xhr);
}
};
xhr.open(method, url, !wait);
if('POST' === method) xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xhr.send(parameters ? parameters : null);
return this;
};
return this;
}
我的AJAX自動完成功能：
function ajaxAutoComplete(inputId)
{
var input = document.getElementById(inputId);
if(null === input) alert('ajaxAutoComplete : invalid input ID.');
if(!input.list) alert('ajaxAutoComplete : input has no associated data list');
var list = document.getElementById(input.list.id);
if(null === list) alert('ajaxAutoComplete : input has an invalid list ID.');
var suggestions;
new Ajax()
.url('../Controller/index.php?exec=ajaxAutoComplete')
.parameters('searchInput=' + input.value)
.callback(function(xhr)
{
suggestions = eval('(' + xhr.responseText + ')');
while(list.hasChildNode) list.removeChild(list.firstChild);
for(var i = 0; i < suggestions.length; ++i)
{
var option = document.createElement('option');
option.value = suggestions[i];
list.appendChild(option);
}
})
.wait(false)
.execute();
} // ajaxAutoComplete()
和HTML代碼：
<!DOCTYPE html>
<html>
<head>
<title>Image Module</title>
<meta charset="utf-8">
<script type="text/javascript" src="../Js/main_dev.js"></script>
</head>
<body>
<header>
<h1>Image module</h1>
</header>
<nav>
<form action="#" method="#">
<fieldset>
<label for="searchInput">Search</label>
<input id="searchInput" list="searchSuggestions" name="searchInput" type="text" value="search" maxlength="255" onchange="ajaxAutoComplete(this.id)">
<datalist id="searchSuggestions">
</datalist>
<input type="submit" value="Search">
</fieldset>
</form>
</nav>
<div class="Content">
</div>
<footer>
<span></span>
</footer>
</body>
</html>
服務器返回隨機生成的號碼如的JSON編碼數組： [1611 1515187，415417，7815，587187]
我使用Firefox 14.
任何想法？ 感謝您的閱讀！ :)
2/3評論和文檔 - 1/3代碼 - 我的PM會佩服你：D – 2012-08-06 19:44:25
雖然從頭開始寫點東西是一個很好的學習經歷，你可以用jquery在1行中做所有這些:) – jbabey 2012-08-06 20:02:07