ajax+asp implementation Data No refresh Save query code

Last Update:2017-01-13 Source: Internet

Author: User

Tags html page access database

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

1. Foreground Ajax code (JavaScript) creation.
2. Backend Server ASP Ajax code writing.
3. Demonstration and explanation of asp+ajax+ database.

The first step: the creation of the foreground Ajax code (JavaScript).
We first create a index.html foreground file with the following content code:

The code is as follows

Copy Code

<title>ajax Tutorial Instance-ajax Tutorial Instance-asp+ajax+access database application-Script home original AJAX instance tutorial </title>
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<body>
<script> var xmlHttp

function Showcustomer (str)
{
var url= "getcustomer.asp?sid=" + math.random () + "&q=" + str
Xmlhttp=getxmlhttpobject (statechanged)
Xmlhttp.open ("Get", url, True)
Xmlhttp.send (NULL)
}

function statechanged ()
{
if (xmlhttp.readystate==4 | | xmlhttp.readystate== "complete")
{
document.getElementById ("Txthint"). Innerhtml=xmlhttp.responsetext
}
}

function Getxmlhttpobject (handler)
{
var objxmlhttp=null

if (Navigator.userAgent.indexOf ("Opera") >=0)
{
Alert ("This example doesn ' t work in Opera")
Return
}
if (Navigator.userAgent.indexOf ("MSIE") >=0)
{
var strname= "Msxml2.xmlhttp"

If (navigator.appVersion.indexOf ("MSIE 5.5") >=0)
{
strname= ' microsoft.xmlhttp '
}
try
{
Objxmlhttp=new ActiveXObject (strName)
Objxmlhttp.onreadystatechange=handler
return objxmlhttp
}
CATC H (e)
{
Alert ("Error. Scripting for ActiveX might is disabled ")
Return
}
}
if (Navigator.userAgent.indexOf (" Mozilla ") >=0)
{
Objxmlhttp=new XMLHttpRequest ()
Objxmlhttp.onload=handler
Objxmlhttp.onerror=handler
Return OB Jxmlhttp
}

</script> <form> Select users:
<select name= "Customers onchange=" Showcustome R (this.value) ">
<option value=" 1 "> Script home .by.alixixi.com</option>
<option value=" 2 "> Wow plug Net </option>
<option value= "3" > Radio </option>
</select>
</form><p>
& Lt;div id= "txthint" ><b> Web site information ...</b></div>
</p></body>

Ajax Code Explanation:
The key code for the JS section, the principle is to create a customer's Microsoft.XMLHTTP object, to complete the foreground data and service-side ASP interaction.
Then note that <select name= "Customers" onchange= "Showcustomer (this.value)" >
This line of code, the principle is through Showcustomer (this.value) trigger Ajax foreground Script object, the user in the Drop-down list of the results selected by Microsoft.XMLHTTP sent to the server processing, and then returned to the foreground ID for Txthint <div id= "Txthint" ><b> user information ...</b></div> layer label is displayed.

The second step: backend Server ASP Ajax code writing.
After creating the index.html, we will then create a getcustomer.asp file, please confirm your ASP environment all OK:
The code for getcustomer.asp is as follows:

The code is as follows

Copy Code

<%
Sql= "SELECT * from CUSTOMERS WHERE customerid="
Sql=sql & Request.QueryString ("Q")
Set Conn=server.createobject ("ADODB. Connection ")
Conn. Provider= "Microsoft.Jet.OLEDB.4.0"
Conn. Open (Server.MapPath ("Ajaxjiaocheng.mdb"))
Set rs = Server.CreateObject ("Adodb.recordset")
Rs. Open SQL, Conn
Response.Charset = "GB2312"
If not Rs. EOF Then
Response.Write "<li> No.:" &rs (0) & "</li>"
Response.Write "<li> Name:" &rs (1) & "</li>"
Response.Write "<li> Click:" &rs (2) & "</li>"
Response.Write "<li> Introduction:" &rs (3) & "</li>"
End If
Rs.close
Set rs = Nothing
Conn.close
Set conn = Nothing
%>

Ajax Code Explanation:
If you have an ASP based on a friend can understand, connect the database code and with the front desk sent over the Q parameter query the corresponding database results:

The code is as follows	Copy Code
Sql= "SELECT * from CUSTOMERS WHERE customerid=" Sql=sql & Request.QueryString ("Q") Set Conn=server.createobject ("ADODB. Connection ") Conn. Provider= "Microsoft.Jet.OLEDB.4.0" Conn. Open (Server.MapPath ("Ajaxjiaocheng.mdb")) Set rs = Server.CreateObject ("Adodb.recordset") Rs. Open SQL, Conn

The next thing to note is this line of code:
Response.Charset = "GB2312" is the key to solve the Ajax Chinese garbled
Many people in the use of Ajax process, often encounter Ajax Chinese display into garbled problem, in fact, in Asp+ajax application is very easy to solve this problem, Only need to add this line of code before the Response.Write statement output Chinese content, can easily solve the Ajax Chinese garbled problem.

Continue to explain the next section of code, that is, display the corresponding database query results, close the database connection:

The code is as follows	Copy Code
If not Rs. EOF Then Response.Write "<li> No.:" &rs (0) & "</li>" Response.Write "<li> Name:" &rs (1) & "</li>" Response.Write "<li> Click:" &rs (2) & "</li>" Response.Write "<li> Introduction:" &rs (3) & "</li>" End If Rs.close Set rs = Nothing Conn.close Set conn = Nothing

The third step: demonstration and explanation of the example of asp+ajax+ database

All the way down, the code is very concise. Next we enclose the database table with the following description:

Library Name: Ajaxjiaocheng.mdb
Table Name: Customers

Field 1:customerid Automatic numbering
Field 2:name Text Format
Field 3:NL number format
Field 4:address Text Format
See here, do not know if you can understand how Ajax works? It is recommended that you write the code and test it step-by-step with this tutorial.

This example is intuitive to say that you can understand this:
Choose Onchange= from the <select name= "Customers" Showcustomer "This.value (Showcustomer)" > Drop-down list on the index.html page to trigger the JS code ( This.value) event, will select the option value <option value= "1" > Script House </option>
The following code is passed to the ASP file:

The code is as follows	Copy Code
var url= "getcustomer.asp?sid=" + math.random () + "&q=" + str Xmlhttp=getxmlhttpobject (statechanged) Xmlhttp.open ("Get", url, True) Xmlhttp.send (NULL)

ASP files receive the Q parameter, output the corresponding query results of the database, and then JS will check the output state of the ASP, if the output is completed will return the result to the index.html file ID txthint label.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More