ネイティブ Ajax を使用して JSON データを処理する方法

今回は、ネイティブ ajax を使用して json データを処理する方法と、ネイティブ ajax を使用して json データを処理する場合の注意事項について説明します。以下は実際的なケースです。

AJAX

AJAX = 非同期の JavaScript と XML。

AJAX は新しい

プログラミング言語 ではなく、既存の標準を使用する新しい方法です。

AJAX は、サーバーとデータを交換し、ページ全体をリロードせずに Web ページの一部を更新する技術です。

jsonとは何ですか?

JSON の正式名称は Javascript Object Notation (

javascript objectnotation) で、見た目だけ見ると、JSON 内のデータは中括弧内に格納されます。 --{} ,目的をさらに分析すると、JSON はデータ交換形式です。 JSON は内部的には name:value の形式で配置されており、以下の json1 は json オブジェクトです。

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

nbsp;html>


  <meta>
  <script>
    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>
    #p1{
      width:200px;
      height:200px;
      background:#f00;
      color:#fff;
    }
    img{
      width:200px;
    }
  </style>
  <title>Document</title>


  <p>
    <img  src="/static/imghwm/default1.png" data-src="../php2/images/1.gif" class="lazy" alt="ネイティブ Ajax を使用して JSON データを処理する方法" >
  </p>
  <br>
  <button>点击获取json数据</button>

evel と呼びますが、互換性の問題はありませんが、セキュリティ ホールが存在します。

その効果は次の図に示されています:

4. JSON.parse メソッドを使用して、json 文字列を json オブジェクトに解析します。コードは次のとおりです。 JSON.parse にはセキュリティ上の脆弱性はありませんが、互換性があり、IE8 以下はサポートされていません。

効果は写真の通りです

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

全国天気予報のAPIデータを取得するAjax

MVC+ブートストラップインターフェースでAjaxフォーム検証を実行する方法

以上がネイティブ Ajax を使用して JSON データを処理する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。