AJAX笔记（二）JOSN在AJAX中的使用

你的名字 2022-04-10 05:28 136阅读 0赞

JSON格式

1、基本内容

JSON - JavaScript Object Notation(JS原生支持)

JSON数据格式源于javascript

2、特点

易于程序员阅读和编写

易于计算机解析和生成

JSON目前是网络上使用最广泛的数据格式之一

3、JSON的结构

Array - 数组

Object - 对象

数据格式

①var arr = \['zhangwuji','zhouzhiruo','zhaomin'\];

②var obj = \{

'name1' : 'zhangwuji',

'name2' : 'zhouzhiruo',

'name3' : 'zhaomin'

③var person1 = \{

'明教' : \['张无忌','金毛狮王'\],

'峨眉' : \['灭绝师太','周芷若'\]

④var person2 = \[

'明教' : '张无忌'

\},

'峨眉' : '周芷若'

\];

4、支持的数据类型

String字符串

Number数值

Boolean - true|false

Object

Array

null

5、Ajax中的JSON格式

①请求格式为JSON

1） 客户端向服务器端发送请求为JSON格式的数据

构建符合JSON格式的字符串，保证定义字符串时,使用单引号(里面使用双引号)

2） 服务器端接收JSON格式的数据

接收客户端的数据，使用json\_decode()函数进行解析，json\_decode($json,true)

②响应格式为JSON

1）服务器端向客户端发送响应为JSON格式的数据

使用json\_encode()函数将PHP变量(array)转换成符合JSON格式的字符串

2） 客户端接收JSON格式的数据

使用XMLHttpRequest对象的responseText属性接收，没有responseJSON属性

并使用eval()函数进行转换

<!DOCTYPE html>
    <html>
     <head>
      <title>Ajax中的JSON格式</title>
      <meta charset="utf-8" />
     </head>
    
     <body>
      <input type="button" value="Ajax" id="btn">
      <script>
    	var btn = document.getElementById("btn");
    	btn.onclick = function(){
    		var xhr = getXhr();
    		xhr.open("post","10.php");
    		xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    		/*
    		 * 在客户端如何构建JSON格式
    		 * * 构建符合JSON格式的字符串
    		 */
    		var user = '{"name":"zhangwuji","pwd":"123456"}';
    		xhr.send("user="+user);
    		xhr.onreadystatechange = function(){
    			if(xhr.readyState==4&&xhr.status==200){
    				var data = xhr.responseText;
    				/*
    				 * 使用eval()函数进行转换
    				 * * 使用"()"将其包裹,eval()函数强制将其转换为JSON格式(javascript代码)
    				 * * 不使用"()"将其包裹,eval()函数将其识别为一个空的代码块
    				 */
    				var json = eval("("+data+")");
    				console.log(json);
    			}
    		}
    	}
    	function getXhr(){
    		var xhr = null;
    		if(window.XMLHttpRequest){
    			xhr = new XMLHttpRequest();
    		}else{
    			xhr = new ActiveXObject("Microsoft.XMLHttp");
    		}
    		return xhr;
    	}
      </script>
     </body>
    </html>

后台PHP

<?php
        // 接收客户端发送的请求数据
        $user = $_POST['user'];
        // 就是一个JSON格式的string字符串
        //var_dump($user);
        
        $json_user = json_decode($user,true);
    
        //var_dump($json_user['name']);
    
        $json = '{"a":1,"b":2,"c":3,"d":4,"e":5}';
        //var_dump(json_decode($json));
        
        // 响应数据符合JSON格式的字符串
        // 1. 手工方式构建
        //echo '{"name":"zhouzhiruo","pwd":"123456"}';
    
        // 2. 使用json_encode()函数
        echo json_encode($json_user);
    ?>