AJAX XML HttpRequest 대상 상세 설명

4844 단어 AJAXXMLHttpRequest
AJAX 는 대화 형 웹 애플 리 케 이 션 을 만 드 는 웹 개발 기술 로 비동기 자바 script 과 XML 의 집합 이다.핵심 은 XML HttpRequest 대상 으로 서버 측 에 전체 페이지 를 제출 하지 않 고 부분 업데이트 웹 페이지 를 실현 할 수 있 으 며 AJAX 의 웹 응용 프로그램 구조의 핵심 기술 이다.
기본 속성:

기본 방법:

XML HttpRequest 5 단계:      
첫째:XML HttpRequest 대상 만 들 기
제2:등록 리 턴 함수
셋째:서버 와 상호작용 하 는 매개 변 수 를 설정 합 니 다.
넷 째:서버 측 에 보 내 는 데 이 터 를 설정 하고 서버 측 과 의 상호작용 을 시작 합 니 다.
다섯 째:서버 와 의 상호작용 이 완료 되 었 는 지 판단 하고 서버 측 이 정확 한 데 이 터 를 되 돌려 주 었 는 지 판단 합 니 다.
HTML 코드:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
 <title></title> 
 <script type="text/javascript" > 
  var xmlhttp; 
  function submit() {    
   //1、  XMLHttpRequest   
   if (window.XMLHttpRequest) { 
    xmlhttp = new XMLHttpRequest(); 
    if (xmlhttp.overrideMineType) {//         mozillar    BUG     
     //            ,   text/xml    mime-type 
     xmlhttp.overrideMineType("text/xml"); 
    } 
   } else if (window.ActiveXObject) {//  IE        
    var activexName = ["MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.5.0", 
   "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", 
   "MSXML2.XMLHTTP", "Miscrosoft XMLHTTP"]; 
    for (var i = 0; i < activexName.length; i++) { 
     try{ 
      xmlhttp=new ActiveXObject(activexName[i]); 
      break; 
     } catch (e) { } 
    } 
   } 
 
   if (xmlhttp == undefined || xmlhttp == null) { 
    alert("          XMLHttpRequest  ,      "); 
    return; 
   } 
 
   //2、       
   xmlhttp.onreadystatechange = callback; 
   //      
   var username = document.getElementById("userName").value; 
   //       ,     (  POST    ) 
   var args = "username=" + encodeURIComponent(username); 
 
   //GET    
   //3、             
   //xmlhttp.open("GET", "XMLHttpRequest.aspx?username=" + username, true); 
 
   //POST   
   //3、             
   //  Post         
   xmlhttp.open("POST", "XMLHttpRequest.aspx?username=" + username, true); 
   //  Content-Type  ,            
   xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
 
 
   //4、            ,           
   //  GET   
   //xmlhttp.send(null); 
   //  POST   
   xmlhttp.send(args); 
 
   function callback() { 
    //5、              ,                  
    if (xmlhttp.readyState == 4) {//readyState=4       
     if (xmlhttp.status == 200) {//status=200          
      //           
      var message = xmlhttp.responseText; 
      var div = document.getElementById("message"); 
      div.innerHTML = message; 
     } 
    } 
   } 
  } 
 </script> 
</head> 
<body> 
 <input type="text" id="userName" /> 
 <input type="button" value="     " onclick="submit()" /> 
 <br /> 
 <div id="message"></div> 
</body> 
</html> 
aspx 의 코드:

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
 
namespace XMLHttpRequest    
{ 
 public partial class XMLHttpRequest : System.Web.UI.Page 
 { 
  protected void Page_Load(object sender, EventArgs e) 
  { 
   //Response.Clear(); 
   //     ,get    Request.QueryString   
   //string username = Request.QueryString["username"]; 
   //POST  ,  Request.Form 
   string username = Request.Form["username"]; 
 
   Response.Write("  :'" 
    + username + "'<br/>  :'" + DateTime.Now.ToString() + "'"); 
   Response.End(); 
  } 
 } 
} 
 요약:
     XML HttpRequest 는 AJAX 의 핵심 부분 이 므 로 잘 이해 해 야 합 니 다.처음 접 촉 했 을 때 어떻게 된 일 인지 잘 모 르 는 경우 도 있 었 고,동 영상 에서 도 원생 의 AJAX 를 다 루 고 있어 겉 으로 는 이해 하기 어 려 울 것 같 지만,구체 적 인 데모 실천 을 통 해 알 수 있 듯 이 이것 은 쉽게 이해 할 수 있 었 다.
이상 은 본문의 전체 내용 이 므 로 여러분 의 학습 에 도움 이 되 기 를 바 랍 니 다.

좋은 웹페이지 즐겨찾기