>  기사  >  웹 프론트엔드  >  Ajax의 기본 구현에서 MIME 유형을 사용하는 방법

Ajax의 기본 구현에서 MIME 유형을 사용하는 방법

不言
不言원래의
2018-07-02 17:02:221646검색

다음은 Ajax의 기본 구현에서 MIME 유형의 사용에 대한 기사입니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

문제 설명

다음 예제는 Ajax 게시 요청 코드입니다. 이 코드를 테스트하고 실행한 결과 반환된 상태 코드는 400으로 서버가 할 수 없는 요청이었습니다. 나중에 검토하고 수정한 결과, 다음 코드

원본 코드

var send = function (url, params, fn) {
  var me = this;
  var xhr = null;
  var data = '';
  fn = fn || function() {};
  params = params || {};
  for(var item in params) {
   data += item + '=' + params[item] + '&';
  }
  if(data[data.length - 1] == '&') {
   data = data.slice(0, data.length - 1);
  }
  if(window.XMLHttpRequest) {
   xhr = new XMLHttpRequest();
  }else if(window.ActiveXObject) {
   xhr= new ActiveXObject("Microsoft.XMLHTTP");
  }
  xhr.open("post", url, true);
  xhr.setRequestHeader("Content-type", "application/json");
  xhr.onreadystatechange = function () {
   if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
    fn(JSON.parse(xhr.responseText));
   }
  };
  xhr.send(JSON.stringify(params));
}

수정된 코드

var send = function (url, params, fn) {
    var me = this;
    var xhr = null;
    fn = fn || function() {};
    params = params || {};
    if(window.XMLHttpRequest) {
      xhr = new XMLHttpRequest();
    }else if(window.ActiveXObject) {
      xhr= new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhr.open("post", url, true);
    xhr.setRequestHeader("Content-type", "application/json");
    xhr.onreadystatechange = function () {
      if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
        fn(JSON.parse(xhr.responseText));
      }
    };
    xhr.send(JSON.stringify(params));
}

이 두 코드의 차이점은 수정된 코드는 데이터 변수의 처리를 제거하고 전송 시 전달된 매개변수를 params 변수로 변경한다는 것입니다

Problem Solving

문제는 해결되었지만, Before 네이티브 Ajax를 사용할 때 메소드가 post일 때 전달되는 매개변수는 "name=123&age=32" 형식인데 왜 지금 직렬화된 JSON 객체를 전달해도 괜찮은 걸까요?

이 때 제가 추가한 MIME 유형을 발견했는데, 여기서 Content-type을 "application/json"으로 설정했는데, 이때 일반적으로 사용되는 The가 생각났습니다. MIME 유형은 "application/x-www-form-urlencoded"입니다. 이 경우 send 메소드로 전달되는 매개변수는 "name=123&age=32"여야 합니다. 이제 혼란은 끝났습니다(~ ̄▽ ̄). ~

Supplement

그나저나 상태 코드가 405 입니다. 지난번에 봤을 때 프론트 엔드에서 요청을 보냈을 때 전달된 매개 변수가 잘못되었습니다. 왜냐하면 배경이 아직 이 요청에 대한 처리를 추가하지 않았기 때문입니다

위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트를 주목하세요!

관련 권장 사항:

네이티브 JS의 Ajax 요청 함수 기능 작성

ajaxFileUpload를 사용하여 파일을 비동기적으로 업로드하는 방법

Ajax 가져오기 및 게시 요청 소개

위 내용은 Ajax의 기본 구현에서 MIME 유형을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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