Ajax implementation is similar to the pull-down principle of Baidu and Google

When you access Google or Baidu, if you want to search for "Avatar", you may only need to enter the word "a" and the website will automatically match some phrases for us to choose from, this design is very user-friendly. Today we will give a brief introduction to this technology. This article assumes that the reader is not clear about Ajax technical details.

 

 

Let's talk about Ajax first. I have not paid any attention to this aspect before. I have a little understanding about it. In fact, it is a client script that can communicate dynamically with the server, A technology that enables interaction without refreshing the Web interface. This technology can bring a great user experience, from the "form" submission method to the interface interaction method, making the entire page look more interactive and more convenient.

 

The general process of AJAX is as follows:

 

1 client script-2 trigger event-3 access server script-4 return data in fixed data format-5 dynamically present the client

Here 4 General data transmission methods are XML or Jason (lightweight)

 

 

The following describes some restrictions on the auto-match input box:

1. Words are taken from a database on the server.

2. Take 10 words at a time.

3. match words as substrings.

 

Let's take a look at the code for the important parts:

 

Client Javascript

VaR http_request = false; </P> <p> function on_search () <br/>{< br/> var content = document. getelementbyid ("searchname "). value; </P> <p> If (content! = "") <Br/> document. getelementbyid ("searchresult "). innerhtml = "searching... "; <br/> else <br/> document. getelementbyid ("searchresult "). innerhtml = ""; </P> <p> // create an HTTP request ////////////////// <br/> http_request = false; <br/> // start to initialize the XMLHTTPRequest object <br/> If (window. XMLHttpRequest) // Mozilla Browser <br/>{< br/> http_request = new XMLHttpRequest (); <br/> If (http_request.overridemimetype) <br/> {// set the mime Category <br/> htT P_request.overridemimetype ("text/XML"); <br/>}< br/> else if (window. activexobject) // IE browser <br/>{< br/> try <br/>{< br/> http_request = new activexobject ("msxml2.xmlhttp "); <br/>}< br/> catch (e) <br/>{< br/> try <br/>{< br/> http_request = new activexobject ("Microsoft. XMLHTTP "); <br/>}< br/> catch (e) {}< br/>}< br/> // exception, an error occurred while creating the object instance <br/> If (! Http_request) <br/>{< br/> document. getelementbyid ("searchresult"). innerhtml = "<font color = Red> fault error: An error occurred while creating the XMLHTTP object! </Font> "; <br/> return false; <br/>}</P> <p> // Add a random number to the URL to prevent the browser from caching the page. <br/> var posturl = "ajax_test.php? Keyword = "+ encodeuricomponent (content) +" & random = "+ math. random () * (10000); </P> <p> http_request.onreadystatechange = showresult; // callback function after registration <br/> http_request.open ("get", posturl, true); <br/> http_request.send (null); </P> <p >}</P> <p> // display the result <br/> function showresult () <br/>{< br/> var html = ""; </P> <p> If (http_request.readystate = 4) <br/>{< br/> If (http_request.status = 200) // The message returned successfully <br/>{< br/> If (! (Http_request.responsetext) <br/>{< br/> document. getelementbyid ("searchresult "). innerhtml = ""; <br/> return; <br/>}< br/> var response = eval ("(" + http_request.responsetext + ")"); <br/> If (response! = NULL) <br/>{< br/> If (response. counter <1) <br/>{< br/> document. getelementbyid ("searchresult "). innerhtml = ""; <br/> return; <br/>}</P> <p> /// // <The result is displayed as needed. <br/> HTML + = '<select name =" select_keyword "ondblclick =" document. searchform. moviename. value = document. searchform. select_keyword.value; "> '; <br/> for (VAR I = 1; I <response. counter; I ++) <br/>{< br/> HTML + = "<option value = '"; <br/> HTML + = response. film [I]; <br/> HTML + = "'>"; <br/> HTML + = response. film [I]; <br/> HTML + = "</option>"; <br/>}< br/> HTML + = "</SELECT> "; <br/> // </P> <p> document. getelementbyid ("searchresult "). innerhtml = HTML; <br/>}</P> <p >}< br/>}

 

The following explains why to add a random number after accessing the URL of the PHP script. (Row 46, VAR posturl = "ajax_test.php? Keyword = "+ encodeuricomponent (content) +" & random = "+ math. Random () * (10000 );)

Because many browsers now have caches, some URLs can be cached, and pages can be displayed without interaction with the server during the next visit.

In this case, the communication is dynamic with the server. If it is cached by the browser, the following situations may occur:

 

The user enters "Avatar". The server database does not contain this content and the search result is blank;

At this time, we will import the "Avatar" field to the server database, and then let the user enter "Avatar ".

At this time, the client has already accessed the PHP address, for example, xxxx. php? Query = avatar, directly calling the browser to cache data, so the search result is still blank.

Therefore, we add a random number to the URL to prevent browser caching.

 

Server scripts

 <? Php <br/> require_once ('connectdb. PHP '); </P> <p> $ content = $ _ Get ["keyword"]; <br/> $ content = urldecode ($ content ); <br/> // echo $ content; <br/> if ($ content! = "") <Br/>{< br/> $ exec = "select * from movie where name like '% ". $ content. "% '"; <br/> $ result = mysql_query ($ Exec); <br/> $ response-> counter = 0; </P> <p> while ($ rs = mysql_fetch_object ($ result) {<br/> $ response-> counter ++; <br/> $ response-> film [$ response-> counter] = $ RS-> name; </P> <p> if ($ response-> counter> 10) <br/> break; // Max to select <br/>}</P> <p> echo json_encode ($ response ); <br/>}< br/>?>

 

In this way, the data can be transmitted back to the Web interface. You can leave it empty when you are dealing with the specific data ~

 

We recommend a well-encapsulated auto complete text -- AutoComplete-jquery Ajax, which uses PHP, MySQL, and JavaScript

 

If you are interested, visit http://www.open-open.com/ajax/ajax200803142220.3.htmto download the source code.