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

亚连
풀어 주다: 2018-05-25 11:44:03
원래의
1557명이 탐색했습니다.

이 글은 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 메커니즘 및 도메인 간 통신에 대한 자세한 설명

Ajax 새로 고침 없는 페이징을 위한 성능 최적화 방법


firefox 기반 Ajax 이미지 업로드

위 내용은 AJAX 단순 비동기 통신 예시 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿