>웹 프론트엔드 >JS 튜토리얼 >ASP.NET_jquery의 AJAX 호출 예제 코드

ASP.NET_jquery의 AJAX 호출 예제 코드

WBOY
WBOY원래의
2016-05-16 17:53:581276검색

1 머리말
최근 ASP.NET에서 AJAX 호출을 했습니다. 클라이언트는 먼저 ASP.NET 서버 배경에서 페이지 템플릿을 가져온 다음 페이지 템플릿을 구현하기 위해 페이지가 초기화될 때 서버에서 관련 데이터를 가져옵니다. . 동적 디스플레이. 구체적인 구현은 다음과 같습니다.
1) 클라이언트가 ASP.NET 배경에 HTTP GET 요청을 보냅니다.
2) 배경이 HTML 템플릿을 클라이언트에 보내고 XML 문자열을 메모리에 저장합니다(동적 표시에 필요한 데이터 포함). 페이지 템플릿) )
3) 클라이언트가 페이지를 초기화할 때 AJAX 요청을 보내고 XML 문자열을 가져옵니다.
4) 얻은 XML 문자열을 사용하여 HTML 페이지 템플릿의 동적 표시를 달성하기 위해 HTML 템플릿을 사용자 정의합니다. .
2 여러 핵심 사항에 대한 소개 및 코드 예제
2.1 ASP.NET 서버 측
2.1.1 C#을 사용하여 XML 문자열 생성
이는 System.Xml 네임스페이스 아래의 여러 클래스를 사용하여 구현할 수 있습니다. 다음은 코드 샘플입니다.

코드 복사 코드는 다음과 같습니다.

ArrayList 단계 = new ArrayList() ;
String errordiscription = "위치에 없음";
for (int i = 0; i < 5; i )
{
steps.Add(new Step(@" Images/1.jpg", "step21 설명"));
}
XmlDocument doc = new XmlDocument();
XmlNode docNode = doc.CreateXmlDeclaration("1.0", "UTF-8", null );
doc.AppendChild(docNode);
//루트 추가
XmlNode rootNode = doc.CreateElement("Root")
doc.AppendChild(rootNode); 오류 설명 노드 추가
XmlNode errorNode = doc.CreateElement("ErrorDescription");
errorNode.AppendChild(doc.CreateTextNode(errordiscription))
rootNode.AppendChild(errorNode); 노드 단계 추가
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(((Step)steps [i]) .imagePath));
productsNode.AppendChild(productNode);
}
Global.Repairsteps= doc.InnerXml;


생성된 XML은 다음과 같습니다.


- <루트>
위치에 없음
<단계 설명="step21 설명">images/1.jpg< ;/step>
<단계 설명="단계21 설명">images/1.jpg
<단계 설명="단계21 설명"> Images/1.jpg
<단계 설명="step21 설명">images/1.jpg
< ;/Steps>


2.1.2 Ajax 요청에 응답하고 XML 스트림 반환
여기에 HTML 헤더를 추가하고



코드 복사
코드는 다음과 같습니다. Response.Clear(); Response.AddHeader("Content-Type", "text/xml")
Response.Write(Global.Repairsteps)
Response.End() ;


2.1.3 요청 간 다중 데이터 공유
여러 요청 간 데이터 공유를 구현하는 방법은 매우 간단하고 직관적입니다. 전역 개체를 사용하면 됩니다.



코드 복사// / /// 중요한 내용을 저장하는 전역 변수
///

정적 문자열
///
// / 정적 중요 데이터를 가져오거나 설정합니다.
공개 정적 문자열 Repairsteps
{
get
{
return _repairsteps; >}
설정
{
_repairsteps = value;
}
}
}


2.2 클라이언트
2.2.1 AJAX XML 가져오기



코드 복사


코드는 다음과 같습니다.

$.ajax({
유형: "GET",
url: "http://localhost:3153/WebSite2/",
캐시: false,
dataType: "xml",
error:function(xhr, status, errorThrown) {
alert(errorThrown 'n' status 'n' xhr.statusText)
},
성공: function(xml) {
//여기서 Ajax를 통해 수신된 xml을 처리할 수 있습니다
}})

2.2.2 HTML 목록 요소를 동적으로 삽입
가장 일반적인 방법은 html을 생성하는 것입니다. stream 을 사용한 다음 추가 또는 html을 사용하여 Stream을 DOM에 삽입합니다. 여기에는 문제가 있습니다. 스트림에 큰따옴표나 작은따옴표가 있으면 많은 "" 구분 기호를 사용해야 하는데, 이는 오류가 발생하기 쉽고 읽을 수 없으며 실제로 JQuery에서 새 요소를 생성합니다. 기능. $에 대한 입력 매개변수에 가 포함되어 있는 한 JQuery는 이를 선택기 표현식으로 이해하지 못하지만 생성된 새 DOM 요소로 이해합니다. 다음은 코드 샘플입니다.
코드 복사 코드는 다음과 같습니다.

$( 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(
$('< li>') .append(
$('').attr('href', stepimagepath).append(
$('').attr('src', stepimagepath).attr ('alt', stepdescription)
)));
}

생성된 HTML 섹션은 다음과 같습니다.
코드 복사 코드는 다음과 같습니다.

    ;step21 설명
    < li>step21 설명
    < ;li>21단계 설명
  • step21 설명
  • >
  • step21 설명
  • 🎜>



3 요약
이 글에서는 ASP.NET에서 Ajax를 사용할 때 접할 수 있는 몇 가지 핵심 사항을 소개합니다. C#은 XML 스트림, AJAX 구현(서버 및 클라이언트), 전역 변수 및 HTML 요소를 동적으로 삽입하는 더 나은 방법을 생성합니다.
4 참조

http://www. -aspnet

http://api.jquery.com/jQuery/
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사:모방 중관촌 온라인 홈페이지 팝업 광고 플러그인(jQuery 버전)_jquery다음 기사:모방 중관촌 온라인 홈페이지 팝업 광고 플러그인(jQuery 버전)_jquery

관련 기사

더보기