집 >웹 프론트엔드 >JS 튜토리얼 >기본 Ajax를 사용하여 json 데이터를 처리하는 방법

기본 Ajax를 사용하여 json 데이터를 처리하는 방법

php中世界最好的语言원래의: 2018-04-03 11:26:123108검색

이번에는 Native Ajax를 사용하여 json 데이터를 처리하는 방법과, Native ajax를 사용하여 json 데이터를 처리할 때 어떤 주의사항이 있는지 보여드리겠습니다. 다음은 실제 사례입니다.

AJAX

AJAX = 비동기 JavaScript 및 XML.

AJAX는 새로운 프로그래밍 언어가 아니라 기존 표준을 사용하는 새로운 방식입니다.

AJAX는 전체 페이지를 다시 로드하지 않고도 서버와 데이터를 교환하고 웹 페이지의 일부를 업데이트하는 기술입니다.

json이란 무엇인가요?

JSON의 전체 이름은 javascript object literal을 기반으로 한 Javascript Object Notation(javascript objectnotation)입니다. 눈으로만 보면 JSON의 데이터가 중괄호 안에 저장되어 있습니다. --{} ,목적을 좀 더 자세히 분석해 보면 JSON은 데이터 교환 형식입니다. JSON은 내부적으로 json 객체인 아래 json1과 같이 name:value 형식으로 배열되어 있습니다.

var json1={"name":"李明","age":21,"sex":"boy"}

json 문자열이란 무엇인가요?

문자 그대로 json의 양쪽에 큰따옴표(또는 작은따옴표)를 추가하면 내부 큰따옴표와의 충돌을 피하기 위해 외부에 작은따옴표를 넣어 다음과 같이 json 문자열이 됩니다. json2

var json2='{"name":"李明","age":21,"sex":"boy"}'

2. 데이터 제공 페이지에서 json을 출력합니다. 여전히 데이터 제공 페이지를 tigong.php로 호출합니다.

코드는 다음과 같습니다.

<?php
header("content-type:text/html;charset=utf-8");
echo &#39;{"name":"黎明","age":"12","sex":"男"}&#39;;
?>

3. 끝 페이지를 열고 eval 메소드를 사용하여 json 문자열을 json 객체로 구문 분석하고 for 루프를 사용하여 이를 탐색합니다. 우리는 이 페이지를 testJsonEvel.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script type="text/javascript">
    window.onload=function(){
      var p1=document.getElementById("p1");
      var bt1=document.getElementById("bt1");
      bt1.onclick=function(){
        //创建ajax对象，写兼容
        if(window.XMLHttpRequest){
          var xmlHttp=new XMLHttpRequest();
        }else{
          var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        };
        //获取要发送的数据，我们这个例子没有
        //设置发送数据的地址和方法
        xmlHttp.open("POST","tigongjson.php");
        //设置我们的请求头信息
        xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        //绑定onreadystatechange事件
        xmlHttp.onreadystatechange=function(){
          if(xmlHttp.readyState==4 && xmlHttp.status==200){
            var data=xmlHttp.responseText;
            //json字符串转换成为json对象
            data=eval("("+data+")");
            var str="";
            str+="姓名:"+data.name+"<br>";
            str+="年龄:"+data.age+"<br>";
            str+="性别:"+data.sex
            p1.innerHTML=str;
          };
        };
        //发送数据
        xmlHttp.send();
      };
    };
  </script>
  <style type="text/css">
    #p1{
      width:200px;
      height:200px;
      background:#f00;
      color:#fff;
    }
    img{
      width:200px;
    }
  </style>
  <title>Document</title>
</head>
<body>
  <p id="p1">
    <img src="../php2/images/1.gif">
  </p>
  <br>
  <button id="bt1">点击获取json数据</button>
</body>
</html>

evel이라고 부릅니다. 호환성 문제는 없지만 보안 허점이 있습니다.

효과는 그림과 같습니다:

4. JSON.parse 메서드를 사용하여 json 문자열을 json 객체로 구문 분석합니다. 이 페이지를 testJsonParse.html이라고 하며 코드는 다음과 같습니다.

JSON.parse에는 보안 취약점이 없지만 호환성이 있을 예정이며 IE8 이하는 지원되지 않습니다.

효과는 사진과 같습니다

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!