JS에서 구현한 Ajax 메소드에 대한 자세한 설명

이번에는 Ajax의 JS 구현에 대해 자세히 설명하겠습니다. Ajax의 JS 구현 시 주의사항은 무엇인가요? 다음은 실제 사례입니다.

1. Ajax란 무엇입니까

새로 고침 없이 데이터 읽기 또는 데이터 제출

(최초의 ajax 등장: 구글 지도, 새로운 보기를 보려면 드래그하세요)

애플리케이션:

사용자 등록

, 온라인 채팅, Weibo 특징: 데이터는 서버에서만 읽을 수 있습니다(따라서 자체 서버 프로그램 AMP를 구성해야 함)

2. Ajax 사용

1. 기본: 정적 TXT 파일 요청 및 표시

btn.onclick=function(){
  ajax('abc.txt',function(str){
    alert(str);
  });
}

①인코딩 Ajax의 파일은 페이지 인코딩과 일치해야 합니다.

②캐시 및 캐싱 방지(장점이 단점보다 크므로 항상 캐시를 지울 수는 없습니다.)

캐시는 네트워크 액세스 속도를 높이는 데 도움이 됩니다. 서버에 있는 파일입니다. 한 번만 읽히고 두 번째에는 실제로 네트워크를 통해 요청하는 대신 하드 디스크와 캐시에서 직접 가져옵니다.

때로는 캐싱을 방지해야 합니다(예: 서버는 변경되지만 클라이언트 요청은 여전히 ​​원래 것입니다. 방법은 다음과 같습니다. 타임스탬프를 추가합니다:

ajax('abc.txt?t='+new Date().getTime(),function(str){});
//new Date().getTime()为现在的毫秒数，用户绝对不可能在1毫秒内点两次，所以每次请求的t都不一样

2. 동적 데이터: 요청 Js(또는 json) 파일

Ajax가 서버에서 읽는 모든 내용은 텍스트(문자열) 형식이 존재하는데 어떻게 변환하나요?

eval()은 문자열

ajax('abc.txt',function(str){
    var arr=eval(str);
    alert(arr);
});

예: paging

<ul id="list">
</ul>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>

window.onload=function(){
  var oUl=getElementById("list");
  var aBtn=getElementsByTagName("a");
  var i;
  for(i=0;i<aBtn.length;i++){
    aBtn[i].index=i;
    aBtn[i].onclick=function(){
      ajax(&#39;page&#39;+(this.index+1)+&#39;.txt&#39;,function(str){
        var aData=eval(str);
        oUl.innerHTML=&#39;&#39;;
        for(i=0;i<aData.length:i++){
          var oLi=document.createElement("li");
          oLi.innerHTML=&#39;<strong>'+aData[i].user+'</strong><i>'+aData[i].pass+'</i>';
          oUl.appendChild(oLi);
        }
      });
    };
  }
};

3. Ajax 원리

HTTP 요청 방법

1.GET--데이터(예: 게시물 탐색)를 얻는 데 사용됩니다. 제출할 URL(웹사이트)에 데이터 넣기 보안 낮음, 용량 낮음, 공유 용이함(다른 사람에게 URL 보내기)

2.POST--데이터 업로드(사용자 등록 등)에 사용됨 데이터를 다른 곳에 넣음 보통 수준의 보안을 갖추고 있으며 용량이 거의 무제한이며 공유가 쉽지 않습니다

4. 자체 Ajax 기능을 캡슐화합니다

1. 서버에 연결합니다

3. request

4. 반품 받기

function ajax(url,fnSucc,fnFaild){
  //1.创建
  var oAjax=null;
  if(window.XMLHttpRequest){ //对ie6来说，直接用XMLHttpRequest是不存在的会出错
    oAjax=new XMLHttpRequest(); //ie6以上
  }else{
    oAjax=new ActiveXObject("Microsoft.XMLHTTP"); //ie6
  }
  //2.连接服务器，open(方法，url，是否异步)
  oAjax.open('GET'，url，true);
  //3.发送请求
  oAjax.send();
  //4.接收返回 OnReadyStateChange
  oAjax.onreadystatechange=function(){    //onreadystatechange事件
    if(oAjax.readyState==4){ //readyState属性：请求状态 4是完成（完成不代表成功）
      if(oAjax.status==200){ //status属性：请求结果 200代表成功
        fnSucc(oAjax.responseText); //responseText属性：服务器发回给我们的内容
      }
      else{
        if(fnFaild){
          fnFaild();
        }
      }
    }
  };
};

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

jQuery Ajax 분석

AJAX 주입 사용법에 대한 자세한 설명

위 내용은 JS에서 구현한 Ajax 메소드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!