且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

使用AJAX来加载网页内容到DIV

更新时间:2023-12-05 09:53:04

有关AJAX项目开始与像 jQuery的库。它可以处理大量的工作给你。

使用jQuery的步骤是这样的:

  1. 使用 AJAX命令检索您的服务器的数据。

      $。阿贾克斯({
      网址:'search.php中,
      数据:查询= SEARCH_TERMS
      成功:完成(数据));  

  2. 更​​新使用功能,像结果DIV:

     
    功能完成的(结果){
        $('#search_results)的innerHTML(结果)。
    } 

I have a text field. When I type something into than text field, I want to load stuff into the DIV below. That's my code equivalent:

<input type="text" onkeyup="/* I am not sure how it's done, but I'll just write: */ document.getElementById('search_results').innerHTML = getContents('search.php?query='+this.value);" /><br/>
<div id="search_results"></div>

Hope you can help. Thanks in advance!

EDIT: I would appreciate it if the solution did not involve using jQuery - as long as it's possible.

ANSWER: How I'm doing it:

<input type="text" onkeyup="loadSearchResults(this.value)" /><br/>
<div id="search_results"></div>

<script>
function loadSearchResults(query){

if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
    var xmlhttp=new XMLHttpRequest();
}else{// code for IE6, IE5
    var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
        document.getElementById("search_results").innerHTML=xmlhttp.responseText;
    }else if(xmlhttp.readyState>=1 && xmlhttp.status==200){
        // show the ajax loader or stuff like that...
    }
}
xmlhttp.open("GET","search.php?search="+query,true);
xmlhttp.send();

}
</script>

For AJAX projects start with a library like jQuery. It will handle a great deal of the work for you.

Using jQuery the steps would be something like:

  1. Use the ajax command to retrieve the data from your server.

    $.ajax({
      url: 'search.php',
      data: "query=search_terms",
      success: finished(data));

  2. update the div on result using a function like:

    
    function finished(result) {
        $('#search_results').innerHTML(result);
    }