Home > Developer > JavaScript
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> video playback-ajax comments </title>
<Style>
# Comment {
Width: 500px;
Height: 400px;
Background-color: # FC6;
}
</Style>
<! -- This part is encapsulated -->
<Script src = "ajaxUtil. js" language = "javascript" type = "text/javascript"> </script>
<Script language = "javascript" type = "text/javascript">
Function test (){
/*
No refreshing comment on ajax
1. Publish comments to the following area without refreshing them
2. store content on the server through ajax
3. Obtain server data and display it to the comment area.
*/
Var comment =$ $ ("com ");
// Initialize the url
Var url = "ajax-youku-server.php ";
Var params = "comment =" + encodeURI (comment. value );
Get (url, params, processCommentData );
}
Function processCommentData (xhr ){
// Obtain the div object
Var div = document. getElementById ("comment ");
// Generate a paragraph mark
Var p = document. createElement ("p ");
// Generate a text node
Var text = document. createTextNode ("comment:" + xhr. responseText );
// Add text to the p element <p> text </p>
P. appendChild (text );
// Append the paragraph mark to the div
Div. appendChild (p );
}
</Script>
</Head>
<Body>
Youku
<Hr>
<! -- This part imitates the video, but it is replaced with SWF -->
<Script type = "text/javascript">
Swfobject. registerObject ("FlashID ");
</Script>
<Object id = "FlashID" classid = "clsid: D27CDB6E-AE6D-11cf-96B8-444553540000" width = "960" height = "90">
<Param name = "movie" value = "b3d2d01e7b0c2fgj92dc04af9f3f5b142512.16.swf"/>
<Param name = "quality" value = "high"/>
<Param name = "wmode" value = "opaque"/>
<Param name = "swfversion" value = "8.0.35.0"/>
<! -- This param label prompts you to use Flash Player 6.0 r65 and later to download the latest Flash Player. If you do not want the user to see this prompt, delete it. -->
<Param name = "expressinstall" value = "Scripts/expressInstall.swf"/>
<! -- The next object tag is used for non-IE browsers. So use IECC to hide it from IE. -->
<! -- [If! IE]> -->
<Object type = "application/x-shockwave-flash" data = "b3d2d01e7b0c2fgj92dc04af9f3f5b142512.16.swf" width = "960" height = "90">
<! -- <! [Endif] -->
<Param name = "quality" value = "high"/>
<Param name = "wmode" value = "opaque"/>
<Param name = "swfversion" value = "8.0.35.0"/>
<Param name = "expressinstall" value = "Scripts/expressInstall.swf"/>
<! -- The browser displays the following alternative content to users using Flash Player 6.0 and earlier versions. -->
<Div>
<H4> the content on this page needs a newer version of Adobe Flash Player. </H4>
<P> <a href = "http://www.adobe.com/go/getflashplayer"> </> </p>
</Div>
<! -- [If! IE]> -->
</Object>
<! -- <! [Endif] -->
</Object>
<Hr>
<Textarea cols = "45" id = "com" rows = "4"> </textarea> <br>
<Input type = "button" value = "onclick =" test () "/>
<Hr/>
<Div id = "comment"> </div>
<Script type = "text/javascript">
Swfobject. registerObject ("FlashID ");
Swfobject. registerObject ("FlashID ");
</Script>
</Body>
</Html>
Server code:
<? Php
// Omitted the steps for inserting a database
Echo $ _ GET ['comment'];
?>
Encapsulate some code:
Function get (url1, params, methodName ){
/*
Basic Steps for using ajax:
1. initialize the ajax Engine
2. encapsulate the url (set the path to be requested)
3. Open the ajax engine (synchronous and asynchronous; Use get or post for this transmission)
4. The information to be requested is sent to the server through the engine for processing.
5. The processing status that the listening server returns to the ajax Engine
6. Determine whether the interaction is complete. If the interaction is complete, retrieve the returned number.
*/
// Initialize the ajax Engine
Var xhr = new XMLHttpRequest (); // This method is only applicable to IE browsers, and there are still issues with ie6.
Var url = url1 + "? "+ Params +" & r = "+ Math. random ();
// Alert (url );
// Open the engine
Xhr. open ("get", url, true); // readyState = 1
// Send the request
Xhr. send (null); // readyState = 2
// Listen for a change in the value of readyState, and execute the following function for each change
Xhr. onreadystatechange = function (){
// If the value is 4, the interaction is complete. We can retrieve the content returned by the server.
If (xhr. readyState = 4 ){
// Why is dynamic? The method name is a variable methodName.
MethodName (xhr );
}
}
}
// $ () Is used to conveniently retrieve the id = "id" object.
Function $ (id ){
Return document. getElementById (id );
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
