Ajax——15——JSON练习

最新推荐文章于 2024-07-14 14:35:12 发布

野生小米椒

最新推荐文章于 2024-07-14 14:35:12 发布

阅读量288

点赞数

分类专栏： Ajax

本文链接：https://blog.csdn.net/x1037490413/article/details/105506755

版权

Ajax 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

一：JSON是什么

1.服务器返回数据给前端，一种是XML，一种是JSON,企业开发中，选择JSON，因为JSON数据没有那么多标签，体积小，传输快
2.

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。

二：JSON与JS的关系

JSON 与 JS 对象的关系很多人搞不清楚 JSON 和 JS 对象的关系，甚至连谁是谁都不清楚。其实，可以这么理解： JSON 是
JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。如

1：

var obj = {a: ‘Hello’, b: ‘World’}; //这是一个对象，注意键名也是可以使用引号包裹的 1 ： var json = ‘{“a”: “Hello”, “b”: “World”}’; //这是一个 JSON 字符串，本质是一个字符串 JSON 和JS 对象互转
要实现从JSON字符串转换为JS对象，使用 JSON.parse() 方法：
1：var obj =JSON.parse(’{“a”: “Hello”, “b”: “World”}’); //结果是 {a: ‘Hello’, b:
‘World’}
要实现从JS对象转换为JSON字符串，使用 JSON.stringify() 方法：
1：var json = JSON.stringify({a: ‘Hello’, b: ‘World’}); //结果是 ‘{“a”: “Hello”, “b”:
“World”}’

代码如下：

1： c.txt是JSON数据，和对象的写法一样
2：ie8以下要用一个框架 json2.js,在github中把这个插件下载下来

b.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="d.js"></script>
    <!-- 括号里的ev,ev1,是event事件对象，所有的鼠标移动，键盘点击的详细状况都保存在这个形参里面-->
    <script>
        window.onload=function(ev){
            var oBtn = document.querySelector("button");
            oBtn.onclick=function(ev1){
                //调用自己封装的js
               Ajax({
                   type:"get",
                   url:"a.php",
                   success:function(xhr){
                       // console.log(xhr.responseText);
                        var str=xhr.responseText;
                        var obj=JSON.parse(str);//把JSON字符串转换成js对象
                       console.log(obj);
                       console.log(obj.name);
                       //在ie8以下不能用parse方法，需要一个框架json2.js来兼容
                   },
                   error:function(xhr){
                       console.log(xhr.status);
                   }
               })
            }

        }

    </script>

</head>
<body>
<button>发送请求</button>
</body>
</html>

a.php

<?php
//因为返回的是JSON数据，不用加XML需要加在前面的header("content-type:text/html;charset=utf-8")
echo file_get_contents("c.txt");

c.txt

{
"name":"小狗",
"age":"1"
}

d.js

function obj2str(data) {
    /*
    {
        "userName":"lnj",
        "userPwd":"123456",
        "t":"3712i9471329876498132"
    }
    */
    data = data || {}; // 如果没有传参, 为了添加随机因子,必须自己创建一个对象
    data.t = new Date().getTime();
    var res = [];
    for(var key in data){
        // 在URL中是不可以出现中文的, 如果出现了中文需要转码
        // 可以调用encodeURIComponent方法
        // URL中只可以出现字母/数字/下划线/ASCII码
        res.push(encodeURIComponent(key)+"="+encodeURIComponent(data[key])); // [userName=lnj, userPwd=123456];
    }
    return res.join("&"); // userName=lnj&userPwd=123456
}
function Ajax(option) {
    // 0.将对象转换为字符串
    var str = obj2str(option.data); // key=value&key=value;
    // 1.创建一个异步对象
    var xmlhttp, timer;
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    // 2.设置请求方式和请求地址
    /*
    method：请求的类型；GET 或 POST
    url：文件在服务器上的位置
    async：true（异步）或 false（同步）
    */
    if(option.type.toLowerCase() === "get"){
        xmlhttp.open(option.type, option.url+"?"+str, true);
        // 3.发送请求
        xmlhttp.send();
    }else{
        xmlhttp.open(option.type, option.url,true);
        // 注意点: 以下代码必须放到open和send之间
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send(str);
    }

    // 4.监听状态的变化
    xmlhttp.onreadystatechange = function (ev2) {
        /*
        0: 请求未初始化
        1: 服务器连接已建立
        2: 请求已接收
        3: 请求处理中
        4: 请求已完成，且响应已就绪
        */
        if(xmlhttp.readyState === 4){
            clearInterval(timer);
            // 判断是否请求成功
            if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
                xmlhttp.status === 304){
                // 5.处理返回的结果
                // console.log("接收到服务器返回的数据");
                option.success(xmlhttp);
            }else{
                // console.log("没有接收到服务器返回的数据");
                option.error(xmlhttp);
            }
        }
    }
    // 判断外界是否传入了超时时间
    if(option.timeout){
        timer = setInterval(function () {
            console.log("中断请求");
            xmlhttp.abort();
            clearInterval(timer);
        }, option.timeout);
    }
}

野生小米椒

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax——15——JSON练习

一：JSON是什么1.服务器返回数据给前端，一种是XML，一种是JSON2.JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。二：JSON与JS的关系**> JSON 与 JS 对象的关系很多...
复制链接

扫一扫

专栏目录