AJAX call example code in ASP.NET_jquery

1 Preface
Recently I made an AJAX call in ASP.NET: the client first gets a page template from the ASP.NET Server background, and then gets some relevant data from the Server when the page is initialized to implement the page template. Dynamic display. The specific implementation is:
1) Client sends HTTP GET request to ASP.NET background
2) The background sends an HTML template to Client and stores an XML String in memory (containing the data required for dynamic display of the page template) )
3) When the client initializes the page, it sends an AJAX request and gets the XML String
4) Use the obtained XML String to customize the HTMl template to achieve dynamic display of the HTML page template.
2 Introduction and code examples of several key points
2.1 ASP.NET Server side
2.1.1 Use C# to generate XML String
This can be achieved using several classes under System.Xmlnamespace. The following is Code sample,

Copy code The code is as follows:

ArrayList steps = new ArrayList() ;
String errordiscription = "Not in position";
for (int i = 0; i < 5; i )
{
steps.Add(new Step(@"images/1. jpg", "step21 description"));
}
XmlDocument doc = new XmlDocument();
XmlNode docNode = doc.CreateXmlDeclaration("1.0", "UTF-8", null);
doc.AppendChild(docNode);
//add the root
XmlNode rootNode = doc.CreateElement("Root");
doc.AppendChild(rootNode);
//add the error description node
XmlNode errorNode = doc.CreateElement("ErrorDescription");
errorNode.AppendChild(doc.CreateTextNode(errordiscription));
rootNode.AppendChild(errorNode);
//add the node steps
XmlNode productsNode = doc.CreateElement("Steps");
rootNode.AppendChild(productsNode);
for (int i = 0; i < steps.Count; i )
{
XmlNode productNode = doc.CreateElement("step");
XmlAttribute productAttribute = doc.CreateAttribute("description");
productAttribute.Value = ((Step)steps[i]).description;
productNode.Attributes.Append(productAttribute);
//productNode.Value = ((Step)steps[i]).imagePath;
productNode.AppendChild(doc.CreateTextNode(((Step)steps[i]) .imagePath));
productsNode.AppendChild(productNode);
}
Global.Repairsteps= doc.InnerXml;

The generated XML is as follows:

Copy code The code is as follows:

-
Not in position
-
images/1.jpg< ;/step>
images/1.jpg
images/1.jpg
images/1.jpg
images/1.jpg
< ;/Steps>

2.1.2 Respond to Ajax request and return XML stream
There is only one thing to note here, add an HTML Header and declare Content-Type .

Copy code The code is as follows:

Response.Clear();
Response. AddHeader("Content-Type", "text/xml");
Response.Write(Global.Repairsteps);
Response.End();

2.1.3 Multiple Data sharing between Requests
The method to realize data sharing between multiple Requests is very simple and intuitive, just use a Global object.

Copy code The code is as follows:

public class Global
{
// /

/// Global variable storing important stuff.
///

static string _repairsteps;
///

// / Get or set the static important data.
///

public static string Repairsteps
{
get
{
return _repairsteps;
}
set
{
_repairsteps = value;
}
}
}

2.2 Client
2.2.1 AJAX Get XML

Copy code The code is as follows:

$.ajax({
type: "GET",
url: "http://localhost:3153/WebSite2/",
cache: false,
dataType: "xml",
error:function(xhr, status, errorThrown) {
alert(errorThrown 'n' status 'n' xhr.statusText);
},
success: function(xml) {
//Here we can process the xml received via Ajax
}});

2.2.2 Dynamically inserting HTML List elements
The more common method is to generate html stream , and then use append or html to insert the Stream into the DOM. There is a problem with this. If there happen to be double quotes or single quotes in the Stream, a lot of "" delimiters must be used, which is error-prone, unreadable, and inconvenient. In fact, JQuery has create new element function. As long as the input parameter to $ contains , JQuery will not understand it as a selector expression, but will understand it as a generated new DOM element. The following is a code sample.

Copy code The code is as follows:

$(xml).find ("step").each(function(){
var stepimagepath=$(this).text();
var stepdescription=$(this).attr("description");
additem( stepimagepath, stepdescription);
});
function additem(stepimagepath, stepdescription){
$('.ad-thumbs ul').append(
$('

') .append(
$('').attr('href', stepimagepath).append(
$('').attr('src', stepimagepath).attr ('alt', stepdescription)
)));
}

The generated HTML section is as follows:

Copy code The code is as follows:

• 


• 


• 


• 


• 

3 Summary
This article introduces several key points that you may encounter when using Ajax in ASP.NET. C# generates XML stream, AJAX implementation (Server and Client), Global variables, and a better way to dynamically insert HTML elements.
4 Reference
http://www. dotnetperls.com/global-variables-aspnet
http://api.jquery.com/jQuery/