네이티브 js에서 json을 호출하는 방법

이번에는 네이티브 js로 json을 호출하는 방법과 네이티브 js에서 json을 호출할 때 주의사항에 대해 알려드리겠습니다.

Ajax 기본

ajax: 데이터 새로 고침 없음, 서버의 정보 읽기

HTTP 요청 방법:

GET: 게시물 탐색 등 데이터를 얻는 데 사용

ajax.judgeXmlHttpRequest('get', 'index.php', function(data){
  alert(data);  //这是服务器返回的数据
})

POST: 용도 사용자 등록

var dataJson = {
  name: 'ys',age: 123 
}
ajax.judgeXmlHttpRequest('post', 'index.php', function(data){
  alert(data);  //这是服务器返回的数据
},dataJson)

GET과 POST의 차이점:

GET: URL을 통해 전달(URL 입력), 전달된 데이터는 URL에 배치됩니다. 이름 = value& Name = value

get 메소드는 용량이 작고 보안이 낮으며 캐시가 없습니다

POST: URL을 통과하지 않습니다

post는 용량이 크고 일반적으로 최대 2G이며 보안이 비교적 높으며 캐시가 없습니다

네이티브 Ajax 쓰기

Ajax 실행 단계

Ajax 객체 만들기

Non-IE6 브라우저:

var oAjax=new XMLHttpRequest();

IE6 브라우저:

var oAjax=new ActiveXObject("Microsoft.XMLHTTP");

서버에 연결

Ajax.open(方法,文件名,异步传输);

블록 캐싱 방법:

Ajax.open('GET','a.txt?t='+new Date().getTime(),true);

동기화: js 중지 작업 하나씩 수행해야 합니다

비동기: js 중지 작업은 여러 작업을 함께 수행해야 함을 의미합니다

ajax는 동기 전송이 아닌 비동기 전송을 위한 것입니다

요청 보내기

Ajax.send();

반환 값 수신

요청 상태 모니터링: onreadystatechange 이벤트: Ajax와 서버 사이에 통신이 있을 때 발생합니다. 주로 ReadyState 속성에 의해 판단됩니다.

readyState 속성에 의해 판단됩니다. 상태

0(초기화되지 않음) open 메소드가 호출되지 않았습니다

1(로드 중) send() 메소드가 호출되었으며 요청이 전송 중입니다

2(로딩 완료) send() 메소드가 호출되었습니다. 완료되었으며 해당 콘텐츠가 모두 수신되었습니다

3(파싱 중) 영수증이 구문 분석 중입니다. 수신된 응답 콘텐츠

4(완료) 응답 콘텐츠 구문 분석이 완료되었으며 클라이언트에서 호출할 수 있습니다(완료가 반드시 성공하는 것은 아니며, 성공 또는 실패를 감지하려면 상태가 필요합니다)

상태 속성:

요청 결과는 성공(200) 또는 실패(404)입니다. Ajax.status==200

반환 값 responseText:

서버에서 반환된 텍스트: Ajax.responseText(반환된 값은 문자열이며 때로는 다른 형식으로 추가 처리가 필요함)

oAjax.onreadystatechange=function(){
  //oAjax.readyState: 表示浏览器和服务器之间进行到哪一步了
  if(oAjax.readyState==4){ //读取完成
    if(oAjax.status==200){ //读取的结果是成功
      alert('成功:'+oAjax.responseText);
    }
  }
}

네이티브 Ajax를 함수로 캡슐화합니다. 최종 네이티브 Ajax는 다음과 같습니다.

GET 메서드로 캡슐화된 함수는 다음과 같습니다. :

function ajax(url,fnSuccess,fnFaild){
  //1.创建Ajax对象。js中,使用一个没有定义的变量会报错,使用一个没有定义的属性,是undefined。IE6下使用没有定义的XMLHttpRequest会报错,所以当做window的一个属性使用
  if (window.XMLHttpRequest) {
    var oAjax=new XMLHttpRequest();//非IE6
 　　}else{
    var oAjax=new ActiveXObject("Microsoft.XMLHTTP");//IE6
 　　}
  //2.连接到服务器
  oAjax.open('GET',url,true);
  //3.发送请求
  oAjax.send();
  //4.接收返回值
  oAjax.onreadystatechange=function(){
    //oAjax.readyState--浏览器和服务器之间进行到哪一步了
    if(oAjax.readyState==4){ //读取完成
      if(oAjax.status==200){ //读取的结果是成功
        fnSuccess(oAjax.responseText); //成功时执行的函数
   　　 }else{
    　　  if(fnFaild){  //判断是否传入失败是的函数,即用户是否关心失败时的结果
     　　　　 fnFaild(oAjax.responseText); //对失败的原因做出处理
    　　  }
   　　 }
  　　 }
 　　}
　 }

POST 메소드로 캡슐화된 함수는 다음과 같습니다.

function ajaxPost(url,id,fnSuccess,fnFaild){
  //1.创建Ajax对象
  if (window.XMLHttpRequest) {
    var xhr=new XMLHttpRequest();//非IE6
  }else{
    var xhr=new ActiveXObject("Microsoft.XMLHTTP");//IE6
  }
  //2.连接到服务器
  xhr.open("POST",url,true);
  //设置头信息
  xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  var form=document.getElementById(id);
  //3.发送请求，传递数据
  xhr.send(serialize(form));
  xhr.onreadystatechange=function(){
    if(xhr.readyState==4){
      if ((xhr.status>=200 && xhr.status<300) || xhr.status==304) {
        fnSuccess(xhr.responseText);
      }else{
        fnFaild(xhr.responseText);
      }
    }
  };
}

문자 세트 인코딩: 웹 페이지 인코딩은 요청된 파일의 인코딩과 동일해야 합니다. 둘 다 utf8

캐시인 경우 캐싱을 방지합니다(자주 발생). 데이터 변경 등은 캐시할 수 없습니다. 주로 GET 메서드에 사용됩니다. 매개 변수를 전달할 때 경로 뒤에 ?+'를 추가하세요. 데이터'는 원본 데이터에 영향을 미칠 수 없습니다.

ajax('a.txt?t='+new Date().getTime(),function(str){
  alert(str);
},function(str){
  alert(str);
});

ajax 요청 동적 데이터: json 파일

1 ajax 반환 값은 문자열이며, 반환된 배열/json 데이터는 eval 변환을 통해 읽을 수 있습니다.

alert(str);
alert(typeof(str));
var arr=eval(str);
alert(typeof(arr));
alert(arr[1]);
alert(arr[1].c);

2 조합 DOM은 반환된 콘텐츠를 표시하는 요소를 생성합니다.

oBtn.onclick=function(){
  ajax('data/arr3.txt?t='+new Date().getTime(),function(str){
    var arr=eval(str);
    for (var i = 0; i < arr.length; i++) {
      var oLi=document.createElement(&#39;li&#39;);
      oLi.innerHTML=&#39;用户名:<span>'+arr[i].user+'</span>密码:<span>'+arr[i].pass+'</span>';
      oUl.appendChild(oLi);
    }
  },function(str){
    alert(str);
  });
}

데이터 유형-->반환된 데이터 유형은 xml(거의 제거됨), json(현재 일반적으로 사용됨)일 수 있습니다.

최근에 get을 통해 작성한 네이티브 js를 살펴보겠습니다. json을 호출하는 메소드의 예:

if(!isNaN(matchId)) {
  var xmlHttp = null;
  try {// Chrome, Firefox, Opera, Safari
    xmlHttp = new XMLHttpRequest();
  }catch (e) {
    try {// Internet Explorer IE 6.0+
      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {// Internet Explorer IE 5.5+
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) {
        alert("your browser not support ajax!");
      }
    }
  }
  window.onload = function () {
    xmlHttp.open("get",/api/clientMatch/commonMatchDiagram.json?matchId=" + matchId,true);
    xmlHttp.send();
    xmlHttp.onreadystatechange = doResult; //设置回调函数
  };
  function doResult() {
    var html='';
    if ((xmlHttp.readyState == 4)&&(xmlHttp.status == 200)) {//4代表执行完成,200代表执行成功
      var data = JSON.parse(xmlHttp.responseText);
      if(data.code == 200){
      //代码执行
      }
      document.getElementById('appMatch').innerHTML = html;
    }
  }
}

케이스를 읽으신 후 메소드를 마스터하신 것 같습니다. 이 기사에서 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

JS 모방 고전 전설 게임

webpack-dev-server에 원격 모드를 설정하는 방법

위 내용은 네이티브 js에서 json을 호출하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!