>웹 프론트엔드 >JS 튜토리얼 >Ajax 요청 기술에 대한 간략한 토론

Ajax 요청 기술에 대한 간략한 토론

亚连
亚连원래의
2018-05-23 15:55:351669검색

이제 Ajax 요청 기술에 대해 간략하게 설명하겠습니다. 이제 그것을 여러분과 공유하고 모든 사람에게 참고 자료로 제공하겠습니다.

1. writed writing :

html, css, javascript 및 json

2에 대한 특정 기본 지식이 있습니다. 즉, "비동기" "Javascript 및 XML"(비동기 JavaScript 및 XML)은 대화형 웹 애플리케이션을 생성하기 위한 웹 개발 기술을 나타냅니다.

3. ajax를 사용하는 이유

동적 웹 개발 기술에서는 클라이언트(일반적으로 브라우저)와 서버 간의 데이터 상호 작용이 매우 빈번하며 네트워크 리소스를 절약하고 좋은 사용자 경험을 제공하는 것이 매우 중요합니다. . Ajax는 전체 페이지를 새로 고치지 않고도 콘텐츠를 업데이트하기 위해 배경과의 데이터 상호 작용을 가능하게 하는 비동기 요청 방식을 사용합니다...

4. 네이티브 ajax 사용 방법

Ajax 기술 사용의 핵심은 XMLHttpRequest에 있습니다. (참고: ie5 및 ie6은 ActiveXObject를 사용합니다.) 따라서 이 개체를 잘 활용하는 것이 핵심입니다.

참고:

   

function loadData() {
  //创建XMLHttpRequest对象
  var xmlHttpRequestObj = {};
  //创建json对象,传送json格式数据到服务端
  Var jsonObj = {};
  if (window.XMLHttpRequest) {
  // IE7+, Firefox, Chrome, Opera, Safari
     xmlHttpRequestObj =new XMLHttpRequest();
   } else {
     // IE6, IE5
     xmlHttpRequestObj =new ActiveXObject("Microsoft.XMLHTTP");
   }
  //当请求状态改变时会调用xmlHttpRequestObj .onreadystatechange方法
    xmlHttpRequestObj .onreadystatechange = function() {
     if (xmlHttpRequestObj .readyState == 0 ) {
      Alert(“open()函数未执行”);
       } else if(xmlHttpRequestObj.readyState == 1) {
        Alert(“open()函数已执行,send()函数未执行”);
     } else if(xmlHttpRequestObj.readyState == 2) {
        Alert(“send()函数已执行,头部和状态码可以获取”)
     } else if(xmlHttpRequestObj.readyState == 3) {
        Alert(“头部已收到,解析响应体”);
    } else if(xmlHttpRequestObj.readyState == 4) {
        Alert(“请求完成”);
        If (xmlHttpRequestObj.status == 200) {
          Alert(“响应就绪,反序列化json对象填充数据到页面”);
        } else if (xmlHttpRequestObj.status == 400) {
          Alert(“页面丢失”);
        } else {
          Alert(“服务异常”);
        }
    }
   }
  //method:请求方式:GET、POST、PUT、DELETE... Url:请求的地址 asnyc:是否采用异步
  xmlHttpRequestObj.open("method", "url", async);
  //设置请求头,POST请求格式需要载入,其他不需要
  xmlHttpRequestObj.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  //请求数据,参数为jsonObj json对象
  xmlHttpRequestObj.send(jsonObj);
}

위 내용은 모두에게 도움이 되기를 바랍니다. 앞으로도 다들. 관련기사:

Ajax 로딩 국화 로딩 효과

Ajax+php는 제품 분류의 3단계 연계를 구현합니다

Ajax 기술 구성 및 핵심 원리 분석

위 내용은 Ajax 요청 기술에 대한 간략한 토론의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.