One-minute Ajax sample of how to implement the suggest Function

Ajax is not a fresh technology. In MSDN, which Microsoft launched in, it introduced the function of msxml and xmlhttpreuqest to remotely read xml documents. However, at that time, the B/S technology was far less popular than today, so ajax was turned out with a nice name and then hyped again.

There are many ajax implementation technologies. Of course, I am referring to the encapsulation method. Here I use an ajax framework that I think is the most reasonable: xajax

Next we will look at how to complete a google suggest application with simple code.

1. First, create an HTML file and copy it in it. Of course, you do not need to write this code. Just copy it.

Include_once ("server1.server. php"); # servidor para XAJAX
$ Xajax-> printJavascript (); // This is the key, so the function is automatically generated here.
?>

Next, we create

 

Here, when onkeydown, we obtain the corresponding suggest based on the user input.

2 In ejemplo2.js

Var inter = null;
// Call the functions in php
Function buscar (){
If (inter) clearInterval (inter );
Inter = setInterval ("xajax_busc (document. getElementById ('cfdd'). value); clearInterval (inter);", 300 );
Gsc_show (document. getElementById ('search-results '));
}

Function gsc_show (elt)
{
If (elt) elt. style. display = 'block ';
}

Function gsc_hide (elt)
{
If (elt) elt. style. display = 'none ';
}

3 In server1.server. php

// This function is used to query suggest. Here we use an array. In actual use, this array is obtained based on DB queries.

Function busc ($ bu ){
If ($ bu! = "") | ($ Bu = "")){
$ ObjResponse = new xajaxResponse ();
$ Cfdds = array ("master data center", "Network Office", "Small Data Center", "20 research buildings ");
$ Sa = "";

Foreach ($ cfdds as $ cfdd ){
$ Sa. ="

. "Onclick =/" javascript: document. getElementById ('cfdd '). value = '$ cfdd'; gsc_hide (document. getElementById ('search-results '));/""
. "> $ Cfdd

";
}
$ ObjResponse-> addAssign ("search-results", "innerHTML", $ sa );
Return $ objResponse-> getXML ();
}
Else {
$ ObjResponse = new xajaxResponse ();
$ ObjResponse-> addAssign ("search-results", "innerHTML ","");
Return $ objResponse-> getXML ();
}
}

// Register this function

$ Xajax = new xajax ("server1.server. php", "xajax _", false );
$ Xajax-> registerFunction ("busc ");

In this way, the suggest function can be implemented. You must think it strange that since ajax is used, neither xmlhttprequest nor xml parsing is called, because these operations are encapsulated by xajax.

In fact, the purpose of ajax operations is html-> javascript-> xmlhttprequest-> php-> xml-> javascript-> html

Now we only need HTML-> JavaScript ....... -> PHP-> ...... -> ...... -> in HTML, three of them are hidden. It is very simple for users.

I will also demonstrate how to extend the xajax implementation and automatically read the cascade select sample.

Trackback: http://tb.blog.csdn.net/TrackBack.aspx? Postid = 508265