집 >웹 프론트엔드 >JS 튜토리얼 >AJAX 단순 비동기 통신 예시 분석

AJAX 단순 비동기 통신 예시 분석

亚连원래의: 2018-05-25 11:44:031581검색

이 글은 AJAX 단순 비동기 통신을 주로 소개하며, Ajax 비동기 통신의 기술과 관련 주의 사항이 있으니 참고할 만한 내용입니다.

이 글의 예시는 그 방법을 설명합니다. AJAX 단순 비동기 통신. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

클라이언트: 서버에 빈 요청을 보냅니다.

코드는 다음과 같습니다.

<html>
<head>
<title>XMLHttpRequest</title>
<script language="javascript">
var xmlHttp;
function createXMLHttpRequest(){
  if(window.ActiveXObject)
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  else if(window.XMLHttpRequest)
    xmlHttp = new XMLHttpRequest();
}
function startRequest(){
  createXMLHttpRequest();
  xmlHttp.open("GET","9-1.aspx",true);
  xmlHttp.onreadystatechange = function(){
    if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
      alert("服务器返回: " + xmlHttp.responseText);
  }
  xmlHttp.send(null);
}
</script>
</head>
<body>
<input type="button" value="测试异步通讯" onClick="startRequest()">
</body>
</html>

서버 측: 클라이언트에 직접 문자열을 반환합니다.

<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%@ Import Namespace="System.Data" %>
<%
    Response.Write("异步测试成功，很高兴");
%>

질문 1:

IE 브라우저는 비동기 통신 결과를 자동으로 캐시하므로 서버의 반환 결과를 실시간으로 업데이트하지 않습니다. (단, Firefox는 정상적으로 새로고침됩니다.)

서버에 비동기적으로 연결할 때 IE의 캐시 문제를 해결하려면 클라이언트 코드를 다음과 같이 변경하세요.

var sUrl = "9-1.aspx?" + new Date().getTime(); //地址不断的变化
xmlHttp.open("GET",sUrl,true);

현재 시간의 밀리초 매개변수를 접속된 서버 주소의 끝, 각 요청의 URL 주소가 다르기 때문에 IE 브라우저를 속여 IE 캐시로 인한 업데이트 문제를 해결합니다.

질문 2:

프로그램을 테스트할 때 클라이언트와 서버가 모두 동일한 컴퓨터에 있는 경우 비동기 개체가 현재 요청의 http 상태 코드 status == 0을 반환하므로 클라이언트 코드가 다시 변경됩니다.

//if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
if( xmlhttp.readyState == 4)
{
   if( xmlhttp.status == 200 || //status==200 表示成功！
     xmlhttp.status == 0 ) //本机测试时，status可能为0。
      alert("服务器返回: " + xmlHttp.responseText);
}

그래서 최종 클라이언트 코드는 다음과 같습니다.

<html>
<head>
<title>XMLHttpRequest</title>
<script language="javascript">
var xmlHttp;
function createXMLHttpRequest(){
  if(window.ActiveXObject)
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  else if(window.XMLHttpRequest)
    xmlHttp = new XMLHttpRequest();
}
function startRequest(){
  createXMLHttpRequest();
  var sUrl = "9-1.aspx?" + new Date().getTime(); //地址不断的变化
  xmlHttp.open("GET",sUrl,true);
  xmlHttp.onreadystatechange = function(){
    //if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
    if( xmlhttp.readyState == 4)
    {
     if( xmlhttp.status == 200 || //status==200 表示成功！
       xmlhttp.status == 0) //本机测试时，status可能为0。
      alert("服务器返回: " + xmlHttp.responseText);
     }
  }
  xmlHttp.send(null);
}
</script>
</head>
<body>
<input type="button" value="测试异步通讯" onClick="startRequest()">
</body>
</html>

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되기를 바랍니다.

AJAX 단순 비동기 통신 예시 분석

관련 기사