When I learned about Ajax, I made the following simple Ajax example. I didn't use any dynamic language. It was completely HTML and Javascript. As for the server Source, I had to be a thief.Www.cc168.com.cn(Great Wall Securities) Open Fund daily net worth query page.
After the HTTP content of the web page is obtained using the XMLHTTP object, the HTTP content is intercepted in Split mode, the web content that you need is retrieved, and then bound to the DIV of the page. The CSS style sheet also uses cc168.com.cn remotely.
^ _ ^. I hope Great Wall Securities can forgive such theft.ProgramCan it be counted as "Stealing? A maximum .:-)
The principle is very simple, but it seems that this method is more useful. If your website wants to provide functions and does not want to provide data web services, you may want to steal them.
<HTML>
<Head>
<Link href = "http://www.cc168.com.cn/css/index.css" rel = "stylesheet" type = "text/CSS">
<LINK rel = "stylesheet" href = "http://www.cc168.com.cn/css/framework.css" type = "text/CSS"/>
<Script language = "JavaScript">
Window. onload = function ()
{
Createdateselect ();
}
VaR XMLHTTP = false;
VaR E;
// Create an XMLHTTP object
Function getxmlhttpobj ()
{
VaR c = NULL;
Try
{
C = new activexobject ("msxml2.xmlhttp ");
}
Catch (E)
{
Try
{
C = new activexobject ("Microsoft. XMLHTTP ");
}
Catch (SC)
{
C = NULL;
}
}
If (! C & typeof XMLHttpRequest! = "Undefined ")
{
C = new XMLHttpRequest ();
}
Return C;
}
// Call the Remote Method
Function callserver (E)
{
Try
{
If (XMLHTTP & XMLHTTP. readystate! = 0)
{
XMLHTTP. Abort ();
}
XMLHTTP = getxmlhttpobj ();
If (XMLHTTP)
{
Document. getelementbyid ("outgroup"). style. Display = "NONE ";
// Obtain the query date
VaR datesele = E. Options [E. selectedindex]. value;
Document. getelementbyid ("date"). innerhtml = datesele + "open fund net worth ";
// Construct the query connection string
VaR url = "http://www.cc168.com.cn/service/FundNetValue.jsp? Newenddate = "+ datesele;
// Open the connection
XMLHTTP. Open ("get", URL, true );
// Set the callback function
XMLHTTP. onreadystatechange = updatepage;
// Send the request
XMLHTTP. Send (null );
}
Else
{
Document. getelementbyid ("flag"). innerhtml = "XMLHTTP object creation failed ";
}
}
Catch (E)
{
Document. getelementbyid ("flag"). innerhtml = "query error:" + E;
}
}
// Callback Handler
Function updatepage ()
{
Try {
If (XMLHTTP. readystate = 1)
{
Document. getelementbyid ("flag"). innerhtml = "loading the connection object ......";
}
If (XMLHTTP. readystate = 2)
{
Document. getelementbyid ("flag"). innerhtml = "the connection object has been loaded. ";
}
If (XMLHTTP. readystate = 3)
{
Document. getelementbyid ("flag"). innerhtml = "getting data ......";
}
If (XMLHTTP. readystate = 4)
{
VaR response = XMLHTTP. responsetext;
VaR openvalue = response. Split ("<TD class = \" info-head \ "width = \" 400 \ "valign = \" Top \ ">") [1];
VaR openvalue = openvalue. Split ("</TD> </tr>") [0];
// Alert (openvalue );
Document. getelementbyid ("out"). innerhtml = openvalue;
VaR openvalue1 = response. Split ("<TD class = \" info-head \ "width = \" 400 \ "valign = \" Top \ ">") [2];
VaR openvalue1 = openvalue1.split ("</TD> </tr>") [0];
Document. getelementbyid ("out1"). innerhtml = openvalue1;
VaR openvalue2 = response. Split ("<TD class = \" info-head \ "width = \" 400 \ "valign = \" Top \ ">") [3];
VaR openvalue2 = openvalue2.split ("</TD> </tr>") [0];
Document. getelementbyid ("out2"). innerhtml = openvalue2;
VaR openvalue3 = response. Split ("<TD class = \" info-head \ "width = \" 400 \ "valign = \" Top \ ">") [4];
VaR openvalue3 = openvalue3.split ("</TD> </tr>") [0];
Document. getelementbyid ("out3"). innerhtml = openvalue3;
Document. getelementbyid ("flag"). innerhtml = "query ended ";
Document. getelementbyid ("outgroup"). style. Display = "";
}
}
Catch (E)
{
Document. getelementbyid ("flag"). innerhtml = "Callback processing error:" + E;
}
}
// Select the creation date drop-down box
Function createdateselect ()
{
VaR html = [];
For (VAR iyear = 2005; iyear <= 2006; iyear ++)
{
For (VAR Imonth = 1; Imonth <= 12; Imonth ++)
{
For (VAR iday = 1; iday <= 31; iday ++)
{
HTML [HTML. length] = "<option value = \" "+ iyear +" \-"+ Imonth +" \-"+ iday +" \ ">" + iyear + "year" + imonth + "month" + iday + "day" + "</option> ";
}
}
}
Document. getelementbyid ("datesele "). innerhtml = "<select name = \" datesele \ "id = \" datesele \ "onchange = \" callserver (this); \ ">" + HTML. join ("") + "</SELECT> ";
}
</SCRIPT>
</Head>
<Body>
<Form>
<Div> select the transaction date: </div>
<Div>
<Div id = "datesele" align = left>
</Div>
<Div id = "flag" align = right> </div>
</Div>
<Div id = "date"> </div>
<Div id = "outgroup" style = "display: none">
<Div id = "out"> </div>
<Div id = "out1"> </div>
<Div id = "out2"> </div>
<Div id = "out3"> </div>
</Div>
</Form>
</Body>
</Html>
Code :
1. The code is mainly divided into two parts: JS processing and body (nonsense)
2. Several layers are used in the body part: datasele: Display date selection drop-down box; flag: status Indicator; date: display the selected date; outgroup: display the Fund's net worth result group; Out To out3 are the results of several types of open fund net worth
3. js part: page loading processing: Page initialization settings; Creating XMLHTTP objects: creating different XMLHTTP connection Objects Based on different client browsers; calling remote methods: Constructing connection strings and sending requests; callback processing functions: determine the return status of the connection object and display the status. After obtaining the result completely, assign a value to the DOM layer. Select the creation date drop-down box: select the dynamic creation date drop-down box, add the selected event to it.
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
