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

다음은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!