Ajax asynchronously invokes a data instance
Through Ajax in the client call back code, through the background code changes, repair, query data, and return the results to the client, in the client to get the data returned by the server to do the appropriate operation, so that through the HTML control to manipulate some of the Web page effects more difficult to achieve the function , such as HTML control access to the query database tutorial, and the results to the client display, this aspect in the Google Map development application More, below a simple example to illustrate:
Add an. asp tutorial X's page, named: ajaxpkashx.aspx, complete with the following code:
1 <%@ Page language= "C #" autoeventwireup= "true" codebehind= "AjaxPKashx.aspx.cs" inherits= "ajaxtest.ajaxpkashx"% >
2
3 <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
4
5 6 7 <title> through Ajax to achieve client access to background data </title>
8 9 <body>
<script language= "javascript" type= "Text/javascript" >
11//For browsers without XMLHttpRequest objects, you need to construct a
12//This method can be written in a public JS file, define the global variable save
if (!window. XMLHttpRequest) {
window. XMLHttpRequest = function () {
Return to new ActiveXObject ("Microsoft.XMLHTTP");
16}
17}
Trigger event for the//html button control
function Showuserinfo ()
20 {
21//Get Pass Parameters
var UserID = document.getElementById ("Tbid"). Value;
23//Receive returned results
var jsuserinfo = "";
25//Decomposition Returns the result string, the array form appears
var objarray = new Array ();
27//define a XMLHttpRequest for requesting sample.ashx files
var arequest = new XMLHttpRequest ();
29//Asynchronous call to Sample.ashx file and pass parameters
30
31//First parameter transmission mode
32//The second parameter is the address of the destination
33//The third parameter is to indicate whether the call is asynchronous, false is asynchronous, that is, synchronous;
Arequest.open ("POST", "sample.ashx?userid=" + userid,true);
35
36////Request completed will receive this event
Panax Arequest.onreadystatechange = function ()
38 {
39//Status 4 indicates successful request
if (arequest.readystate = 4)
41 {
42//Get return results
Jsuserinfo = Arequest.responsetext;
44//To return the result processing
if (Jsuserinfo.length > 0)
46 {
Objarray = Jsuserinfo.split (",");
48}
document.getElementById ("Spno"). Value = Objarray[0].tostring ();
document.getElementById ("Spname"). Value = Objarray[1].tostring ();
Wuyi document.getElementById ("SpTime"). Value = Objarray[2].tostring ();
52}
53}
Arequest.send (NULL);
55}
</script>
<form id= "Form1" runat= "Server" >
<div>
<asp:textbox id= "Tbid" runat= "Server" ></asp:TextBox>
<input id= "btshow" type= "button" value= "button" onclick= "Showuserinfo ();"/>
</div>
<div>
<asp:label id= "Label1" runat= "Server" text= "Work No.:" ></asp:Label>
<input id= "Spno" type= "text"/>
</div>
<div>
<asp:label id= "Label2" runat= "Server" text= "Name:" ></asp:Label>
<input id= "Spname" type= "text"/>
</div>
<div>
<asp:label id= "Label3" runat= "Server" text= "entry Time:" ></asp:Label>
<input id= "SpTime" type= "text"/>
</div>
</form>
</body>
In line 34th
Arequest.open ("POST", "sample.ashx?userid=" + userid,true);
Sample.ashx is the "general handler" file, also is the background code to write the place, according to my understanding, this kind of file system will generate two methods, does not allow in adds any method, or adds also invalid, waits for the verification, has the more clear prawn please advise, the following is the file's entire code:
This method is created automatically when you create a file, and when we pass at the client
1 using System;
2 using System.Data;
3 using System.Web;
4 using System.Collections;
5 using System.Web.Services;
6 using System.Web.Services.Protocols;
7
8 namespace Ajaxtest
9 {
Ten///<summary>
A summary of///$codebehindclassname $
///</summary>
[WebService (Namespace = "http://tempuri.org/")]
[WebServiceBinding (ConformsTo = wsiprofiles.basicprofile1_1)]
public class Sample:ihttphandler
16 {
17
ProcessRequest void (HttpContext context)
19 {
The context. Response.ContentType = "Text/plain";
21//user ID, receiving the parameters from the client.
String UserID = "";
23//Returns the string
String userInfo = "";
25//Read the client pass parameters
-If (!string. IsNullOrEmpty (httpcontext.current.request["userid"))
UserID = httpcontext.current.request["UserID"];
28
29//through the parameters of the client to get background data, including the operation of the database after the return of the dataset, this is not cumbersome
30//Acquired data can be encapsulated in JSON or XML format and sent to the client as String
31//If the data is simple, return a string, as follows:
UserInfo = "8080, John, 2008-07-01";
The context. Response.Write (UserInfo);
34}
35
public bool IsReusable
37 {
Get
39 {
return false;
41}
42}
43}
44}
Our code only needs to be written in this method.
public void ProcessRequest (HttpContext context)
Arequest.open ("POST", "sample.ashx?userid=" + userid,true);
When this method invokes this "generic handler", the system calls the method by default, so our processing code and return value are all done in that way, so there's a bad place where you have to create a new "generic handler" every time you call. It can be imagined that if this method is used frequently in the project, this kind of file to create many, the corresponding project management is more depressing; This problem is also a solution, Ajax call WebService can be resolved, by invoking the established method and the established return value to achieve
Return method:
Context. Response.Write (UserInfo);
This method allows you to return a string type of userinfo variable back to the client, and the client receives the string type variable to operate on, and the client receives the following code:
Jsuserinfo = Arequest.responsetext;
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
