Ajax+js는 비동기식 상호작용을 실현합니다.

이 글은 ajax와 결합된 네이티브 javascript로 구현된 비동기 상호작용 방법과 코드를 공유합니다. 도움이 필요한 친구들이 참고할 수 있습니다.

비동기 상호작용에 관해서라면 모두가 ajax라고 말할 것입니다. 마치 ajax 기술이 비동기 상호작용의 대명사가 된 것처럼 말이죠. 그러면 우리는 ajax의 핵심 객체를 연구할 것입니다!

ajax를 사용하여 비동기 상호작용을 구현하는 것은 다름 아닌 것입니다. 4단계:

1. ajax 코어 객체 만들기

2. 서버와 연결 설정

3. 서버에 요청 보내기

4. 서버 응답 데이터 받기

신비해 보이는 비동기 상호 작용. 이 4단계를 명확히 하고 나면 아마도 모두가 내 마음 속에 예비적인 아이디어가 있다는 것을 이해할 것입니다.

먼저 우리는 ajax의 핵심 객체를 생성합니다. 브라우저 호환성 문제로 인해 핵심 ajax 객체를 생성할 때 호환성 문제를 고려해서는 안 됩니다. 비동기 상호 작용을 달성하기 위한 후속 단계는 첫 번째 단계는 ajax 코어 객체가 성공적으로 생성되었는지 여부입니다.

 function getXhr(){
      // 声明XMLHttpRequest对象
      var xhr = null;
      // 根据浏览器的不同情况进行创建
       if(window.XMLHttpRequest){
      // 表示除IE外的其他浏览器
           xhr = new XMLHttpRequest();
       }else{
         // 表示IE浏览器
         xhr = new ActiveXObject('Microsoft.XMLHttp');
       }
       return xhr;
 }
 // 创建核心对象
 var xhr = getXhr();

위 코드를 통해 성공적으로 ajax 코어 객체를 생성했습니다. xhr. 다음에 언급되는 ajax 핵심 개체는 모두 xhr로 명명됩니다.

두 번째 단계는 서버와 연결을 설정하고 ajax 핵심 개체를 통해 open(method, url, async) 메서드를 호출하는 것입니다.

설명 공개 메소드의 형식 매개변수:

method는 요청 메소드(get 또는 post)를 나타냅니다.

url은 요청된 PHP의 주소를 나타냅니다(요청 유형이 get인 경우 요청된 데이터는 url 주소를 따릅니다). 물음표와 함께 null 값이 아래의 send 메소드로 전달됩니다.)

async는 비동기 여부를 나타내는 부울 값이며, 최신 사양에서는 이 항목을 더 이상 채울 필요가 없습니다. , 공식에서는 ajax를 사용하는 것이 비동기를 달성하는 것이라고 믿기 때문입니다.

xhr.open("get","01.php?user=xianfeng");//这是get方式请求数据
xhr.open("post","01.php");//这是以post方式请求数据

세 번째 단계에서는 서버에 요청을 보내고 ajax 코어 개체를 사용하여 send 메서드를 호출합니다

포스트 메서드인 경우 요청된 데이터는 name=value 형태로 send 메소드에 담겨 서버로 전송됩니다. get 메소드는 null 값을 직접 전달합니다

xhr.send("user=xianfeng");//这是以post方式发送请求数据
xhr.send(null);//这是以get方式

네 번째 단계는 서버에서 반환된 데이터를 수신하는 것입니다. onreadystatechange 이벤트는 서버의 통신 상태를 모니터링합니다. ReadyState 속성을 통해 서버의 현재 통신 상태를 가져옵니다. status는 status 코드를 가져오고 responseText 속성을 사용하여 서버 응답에서 반환된 데이터를 받습니다( 여기서는 텍스트 유형 string형식 데이터를 나타냅니다. 나중에 XML 형식 데이터와 유명한 json 형식 데이터를 작성하세요.

xhr.onreadystatechange = function(){
   　　　　　　　　　　　　　　　// 保证服务器端响应的数据发送完毕,保证这次请求必须是成功的
             　　　if(xhr.readyState == 4&&xhr.status == 200){
          　　　　　　// 接收服务器端的数据
          　　　　　　var data = xhr.responseText;
          　　　　　　 // 测试
          　　　　　　 console.log(data);
              　　 } 
             };

위 내용은 Ajax+js는 비동기식 상호작용을 실현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!