Ajax introduction:
The English translation is often the same as that of the Ajax football team. Web application interaction, such as Flickr, Backpack, and Google, has made a qualitative leap in this regard. This term is derived from the conversion from a Web-based application to a data-based application. In data-based applications, user-required data, such as the contact list, can be obtained from a server independent of the actual web page and can be dynamically written into the web page, color the slow Web application experience to make it look like a desktop application.
The core of Ajax is the JavaScript Object XmlHttpRequest. This object was first introduced in Internet Explorer 5. It is a technology that supports asynchronous requests. In short, XmlHttpRequest allows you to use JavaScript to request and process responses to the server without blocking users.
Copy to ClipboardReference: [www.bkjia.com] <! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Script type = "text/javascript" src = "ajax. js" charset = "UTF-8"> </script>
</Head>
<Body>
<Input type = "text" id = "url_text" name = "text"/>
<Input type = "submit" id = "OK" value = "submit" onclick = "ChenkGet ();"/>
<Div width = "300px" Heiget = "300px" id = "hakecc"> </div>
</Body>
</Html> Javascript code:
Copy to ClipboardReference: [www.bkjia.com]/*
By y0umer
[60 min]
Function: createXmlHttpRequestobject
Returm Xmlobject;
*/
Var XmlHttp;
Function createXmlHttpRequestObject (){
If (window. ActiveXobject) {// determines whether it is an IE browser
Try {// start with try
Xmlhttp = new ActiveXobject ("Microsoft. XMLHTTP"); // use an ActiveX object to Create ajax
} Catch (e ){
XmlHttp = false;
} // Try end
} Else {// non-ie kernels such as Chrome and FireFox
Try {
XmlHttp = new XMLHttpRequest (); // It is considered non-ie
} Catch (e ){
XmlHttp = false; // other non-mainstream browsers
}
} // Judge the end. If the creation is successful, a DOM object is returned. If the creation is unsuccessful, a false object is returned.
If (xmlHttp)
{
Return xmlHttp;
} Else {
Alert ("An error occurred while creating the object. Please check whether the browser supports XmlHttpRequest! ");
}
} // Function body
// CreateXmlHttpRequestObject ();
/*************************************** *******/
/*
ChenkGet uses AJAX asynchronous GET to request a PHP File
*/
Function ChenkGet (){
// Create an object instance first
CreateXmlHttpRequestObject ();
// Use the event object to obtain the value of the text box ID
Var cont1 = document. getElementById ("url_text"). value;
Var url = "test. php? Type = "+ cont1; // URL to be sent
XmlHttp. onreadystatechange = ajaxok; // determines the browser Status Bar (receives events triggered by playing data)
XmlHttp. open ("GET", url, false); // GET sends data to the server
XmlHttp. send (null );
}
// Start data submission
// The callback function is used to receive data returned by the server.
Function ajaxok ()
{
If (xmlHttp. readyState = 4 & xmlHttp. status = 200)
{
// Indicates that the data has been received
Document. getElementById ("hakecc"). innerHTML = xmlHttp. responseText;
}
} PHP code:
Copy to ClipboardReference: [www.bkjia.com] <? Php
Header ('conent-type: type/html; charset = gb2312 ');
$ Val = $ _ GET ['type'];
Echo "value:". $ val;
?> Run:
