高级网页设计—“json和ajax”

最新推荐文章于 2023-11-09 09:36:48 发布
最新推荐文章于 2023-11-09 09:36:48 发布
阅读量627 收藏 3
点赞数 2
分类专栏： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41056807/article/details/84947997
版权

json

  • 一种轻量级的数据交换格式。
  • JSON 是 JavaScript 原生格式。
  • JSON 独立于语言 *
  • JSON 具有自我描述性，容易理解
 var people = {
        "programmers": [{
            "firstName": "Brett",
            "lastName": "McLaughlin",
            "email": "aaaa"
        }, {
            "firstName": "Jason",
            "lastName": "Hunter",
            "email": "bbbb"
        }, {
            "firstName": "Elliotte",
            "lastName": "Harold",
            "email": "cccc"
        }]
    };

例：
完成一个成员的json数据表示：每名具体的成员有姓名、年龄、国籍三个属性。成员可以有很多实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>json</title>
</head>
<body>
<script>
    var mem=[
        {name:"Yu",age:18,country:"china"},
        {name:"Y",age:8,country:"america"},
        {name:"Yq",age:47,country:"england"}
        ];
    console.log(mem);//Array(3)
    console.log(mem[0].name);//Yu
    console.log(mem[0]);//Object
    console.log(JSON.stringify(mem[0]));//{"name":"Yu","age":18,"country":"china"}对象转换成字符串形式
    //字符串准成对象：parse


    //循环输出
    for (var i=0;i<mem.length;i++){
        console.log(mem[i].name);
    }
    //Yu
    // Y
    // Yq
</script>
</body>
</html>

在这里插入图片描述

json-data（传送数据）

以左图右文为例
之前做的左图右文HTML是：

    <ul class="mlist">
        <li>
            <img src="../image/2.1.jpg" alt="">
            <h3><a href="#">there is a title</a></h3>
            <p>随意的内容</p>
            <span class="time">2018-12-8</span>
        </li>
        <li>
            <img src="../image/2.2.jpg" alt="">
            <h3><a href="#">there is a title</a></h3>
            <p>随意的内容</p>
            <span class="time">2018-12-8</span>
        </li>
        <li>
            <img src="../image/2.3.jpg" alt="">
            <h3><a href="#">there is a title</a></h3>
            <p>随意的内容</p>
            <span class="time">2018-12-8</span>
        </li>
        <li>
            <img src="../image/2.4.jpg" alt="">
            <h3><a href="#">there is a title</a></h3>
            <p>随意的内容</p>
            <span class="time">2018-12-8</span>
        </li>
    </ul>

在这里插入图片描述

现在想用json传数据也就是li内的内容是没有的要通过json传值显示在页面上

  • 标签script要构建json
 {
 	   "img":"../image/2.1.jpg",左边图片
        "h3":"there is a title",上标题
        "link":"http://www.baidu.com",上标题内链接a
        "p":"随意的内容",p标签
        "time":"2018-12-8"}float右浮时间}
  • 多少个li不确定的，所以用for循环。在for循环里写一组li的样式（技巧就是先把HTML原来的li内的样式扒下拉，然后对应的标签进行修改）
  • createElement() 方法通过指定名称创建一个元素var newli=document.createElement("li");
  • innerHTML在JS是双向功能:获取对象的内容 或 向对象插入内容;newli.innerHTML=hang;
  • appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。mlist.appendChild(newli);

使用json-传送数据完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>json-data</title>
    <!--手机端左图右文-->
    <style>
        ul{
            list-style: none;
        }
        ul,p,h3{
            padding: 0;
            margin: 0;
        }
        img{
            border: none;
            display: block;
        }
        .mlist img{
            float: left;
            width: 100px;
            height: 60px;
            margin-right: 10px;
        }
        .mlist li{
            border-bottom: 1px solid #269abc;
            /*padding-bottom: 8px;*/
            margin-bottom: 8px;
            position: relative;
            height: 65px;
        }
        .mlist h3{
            font-size: 16px;
            line-height: 32px;
        }
        .mlist p{
            font-size: 16px;
            /*line-height: 32px;*/
            color: #999999;
            padding-left: 10px;
            text-indent: 1em;
        }
        a{
            text-decoration: none;
            color: #030;
        }
        .time{
            position: absolute;
            right: 10px;
            bottom: 10px;
            font-size: 12px;
            color: #ccc;
        }
    </style>
</head>
<body>
    <ul class="mlist">
        <!--<li>-->
            <!--<img src="../image/2.1.jpg" alt="">-->
            <!--<h3><a href="#">there is a title</a></h3>-->
            <!--<p>随意的内容</p>-->
            <!--<span class="time">2018-12-8</span>-->
        <!--</li>-->
        <!--<li>-->
            <!--<img src="../image/2.2.jpg" alt="">-->
            <!--<h3><a href="#">there is a title</a></h3>-->
            <!--<p>随意的内容</p>-->
            <!--<span class="time">2018-12-8</span>-->
        <!--</li>-->
        <!--<li>-->
            <!--<img src="../image/2.3.jpg" alt="">-->
            <!--<h3><a href="#">there is a title</a></h3>-->
            <!--<p>随意的内容</p>-->
            <!--<span class="time">2018-12-8</span>-->
        <!--</li>-->
        <!--<li>-->
            <!--<img src="../image/2.4.jpg" alt="">-->
            <!--<h3><a href="#">there is a title</a></h3>-->
            <!--<p>随意的内容</p>-->
            <!--<span class="time">2018-12-8</span>-->
        <!--</li>-->
    </ul>
<script>
    // 构建json
    var data=[
        {"img":"../image/2.1.jpg",
        "h3":"there is a title",
        "link":"http://www.baidu.com",
        "p":"随意的内容",
        "time":"2018-12-8"},
        {"img":"../image/2.2.jpg",
            "h3":"there is a title",
            "link":"http://www.baidu.com",
            "p":"随意的内容",
            "time":"2018-12-8"},
        {"img":"../image/2.3.jpg",
            "h3":"there is a title",
            "link":"http://www.baidu.com",
            "p":"随意的内容",
            "time":"2018-12-8"},
        {"img":"../image/2.4.jpg",
            "h3":"there is a title",
            "link":"http://www.baidu.com",
            "p":"随意的内容",
            "time":"2018-12-8"}
    ];
    // 不固定个数
    var mlist=document.querySelector(".mlist");
    for (var i=0;i<data.length;i++){
        // var hang=` <img src="../image/2.1.jpg" alt="">
        //     <h3><a href="#">there is a title</a></h3>
        //     <p>随意的内容</p>
        //     <span class="time">2018-12-8</span>`;//行数不定
        var hang=` <img src="${data[i].img}" alt="">
            <h3><a href="${data[i].link}">${data[i].h3}</a></h3>
            <p>${data[i].p}</p>
            <span class="time">${data[i].time}</span>`;
        var newli=document.createElement("li");
        newli.innerHTML=hang;
        mlist.appendChild(newli);
    }
</script>
</body>
</html>

在这里插入图片描述

上图下文也可以做出来这个效果（完整代码）


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>json-data-上图下文</title>
    <style>
        ul,p{padding: 0;margin: 0;}
        ul{list-style: none;}
        a{text-decoration: none;}
        a img{border: none;}
        .slist{width: 847px;
            overflow: hidden;
        }
        .slist li{
            float: left;
            width: 200px;
            /*height: 300px;*/
            list-style-type: none;
            margin-top: 10px;
        }
        .slist img{
            width: 180px;
            height: 180px;
            display: block;
            margin: 0 auto;
            border-radius: 10px;
        }
        .slist p{
            margin-left: 10px;
            width: 180px;
            height: 30px;
            line-height: 30px;
            overflow: hidden;
            font-size: 14px;
            text-align:center;
            background-color: rgba(0,0,0,0.5);

            margin-top: -30px;
            position: relative;
            z-index: 3;
            border-radius: 10px;

        }
        .slist p a{
            color: #fff;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div class="slist">
    <ul>
        <!--<li>-->
            <!--<a href="#">-->
                <!--<img src="../image/hd-weather.png" />-->
            <!--</a>-->
            <!--<p><a href="#">这里是文字</a></p>-->
        <!--</li>-->
        <!--<li>-->
            <!--<a href="#">-->
                <!--<img src="../image/hd-weather.png" />-->
            <!--</a>-->
            <!--<p><a href="#">这里是文字</a></p>-->
        <!--</li>-->
        <!--<li>-->
            <!--<a href="#">-->
                <!--<img src="../image/hd-weather.png" />-->
            <!--</a>-->
            <!--<p><a href="#">这里是文字</a></p>-->
        <!--</li>-->

        <!--<li>-->
            <!--<a href="#">-->
                <!--<img src="../image/hd-weather.png" />-->
            <!--</a>-->
            <!--<p><a href="#">这里是文字</a></p>-->
        <!--</li>-->
        <!--<li>-->
            <!--<a href="#">-->
                <!--<img src="../image/hd-weather.png" />-->
            <!--</a>-->
            <!--<p><a href="#">这里是文字</a></p>-->
        <!--</li>-->
        <!--<li>-->
            <!--<a href="#">-->
                <!--<img src="../image/hd-weather.png" />-->
            <!--</a>-->
            <!--<p><a href="#">这里是文字</a></p>-->
        <!--</li>-->
        <!--<li>-->
            <!--<a href="#">-->
                <!--<img src="../image/hd-weather.png" />-->
            <!--</a>-->
            <!--<p><a href="#">这里是文字</a></p>-->
        <!--</li>-->
        <!--<li>-->
            <!--<a href="#">-->
                <!--<img src="../image/hd-weather.png" />-->
            <!--</a>-->
            <!--<p><a href="#">这里是文字</a></p>-->
        <!--</li>-->
    </ul>
</div>
<script>
    // 构建json
    var data=[
        { "link":"http://www.baidu.com",
            "img":"../image/flower1.jpg",
            "p":"这里是文字",
            "linknext":"https://gitee.com/alice88"},
        {"link":"http://www.baidu.com",
            "img":"../image/flower2.jpg",
            "p":"这里是文字",
            "linknext":"https://gitee.com/alice88/"},
        {"link":"http://www.baidu.com",
            "img":"../image/flower4.jpeg",
            "p":"这里是文字",
            "linknext":"https://gitee.com/alice88/"},
        {"link":"http://www.baidu.com",
            "img":"../image/flower5.jpg",
            "p":"这里是文字",
            "linknext":"https://gitee.com/alice88/"},
        {"link":"http://www.baidu.com",
            "img":"../image/flower1.jpg",
            "p":"这里是文字",
            "linknext":"https://gitee.com/alice88/"},
        {"link":"http://www.baidu.com",
            "img":"../image/flower2.jpg",
            "p":"这里是文字",
            "linknext":"https://gitee.com/alice88/"},
        {"link":"http://www.baidu.com",
            "img":"../image/flower4.jpeg",
            "p":"这里是文字",
            "linknext":"https://gitee.com/alice88/"},
        {"link":"http://www.baidu.com",
            "img":"../image/flower5.jpg",
            "p":"这里是文字",
            "linknext":"https://gitee.com/alice88/"}
    ];

    var slist=document.querySelector(".slist");
    for (var i=0;i<data.length;i++){

        var hang=`<a href="${data[i].link}"><img src="${data[i].img}" /></a>
            <p><a href="${data[i].linknext}">${data[i].p}</a></p>`;
        var newli=document.createElement("li");
        newli.innerHTML=hang;
        slist.appendChild(newli);
    }
</script>
</body>
</html>

在这里插入图片描述

ajax异步_访问服务器

  • AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

  • AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

  • AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
    先准备一个ajax.txt文件，随便写点东西
    在这里插入图片描述

  • 1.1创建 XMLHttpRequest 对象

  • 1.2XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

  • 1.3variable=new XMLHttpRequest();

  • 2.1向服务器发送请求请求get/post

  • 2.2如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

    xmlhttp.open(“GET”,“ajax_info.txt”,true);
    xmlhttp.send();

  • 2.3xmlhttp.open("GET","ajax.txt",true);

  • 2.4xmlhttp.open("GET","ajax.txt?t="+Math.random(),true);txt?t="+Math.random()清除缓存,随机数是get请求可以，post不可以

  • 2.5xmlhttp.open("POST","ajax.txt",true);

  • 3.1xmlhttp.send();//向服务器发送请求

  • 3.2发送请求get没有参数post可有参数
    完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax异步_访问服务器</title>
    <script>
            var xmlhttp;
            if (window.XMLHttpRequest)
            {
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp=new XMLHttpRequest();//创建 XMLHttpRequest 对象
            }
            else
            {
                // IE6, IE5 浏览器执行代码
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)//成功的效果
                {
                    console.log(xmlhttp.responseText);//读ajax成功之后把ajax.txt放在控制台
                    document.getElementById("box").innerHTML=xmlhttp.responseText;//读ajax成功之后把ajax.txt放的位置。
                }
            };
            // xmlhttp.open("GET","ajax.txt",true);
            // txt?t="+Math.random()清除缓存,随机数是get请求可以，post不可以
            xmlhttp.open("GET","ajax.txt?t="+Math.random(),true);

            // xmlhttp.open("POST","ajax.txt",true);
            xmlhttp.send();//向服务器发送请求
    </script>
</head>
<body>
<div id="box"><h2>使用 AJAX 修改该文本内容</h2></div>
<!--<button type="button" onclick="loadXMLDoc()">修改内容</button>-->

</body>
</html>

在这里插入图片描述

ajax给服务器发送请求—post——表单、json

  • var data={ "name":"yuan", "age":18, "country":"china"};//把数据通过ajax传给服务器端

  • xmlhttp.open("POST","ajax.txt",true);必须post请求

  • xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//说明数据来源表单还是json

  • xmlhttp.send(data);//向服务器发送请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax给服务器发送请求—post——表单、json、</title>
    <script>
        var xmlhttp;
        if (window.XMLHttpRequest)
        {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp=new XMLHttpRequest();
        }
        else
        {
            // IE6, IE5 浏览器执行代码
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)//成功的效果
            {
                console.log(xmlhttp.responseText);//读ajax成功之后把ajax.txt放的位置。
                document.getElementById("box").innerHTML=xmlhttp.responseText;//读ajax成功之后把ajax.txt放的位置。
            }
        };
        var data={
            "name":"yuan",
            "age":18,
            "country":"china"};//把数据通过ajax传给服务器端
        xmlhttp.open("POST","ajax.txt",true);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//说明数据来源表单还是json
        xmlhttp.send(data);//向服务器发送请求
    </script>
</head>
<body>
<div id="box"><h2>使用 AJAX 修改该文本内容</h2></div>
</body>
</html>

完成任何一个现实网页部分 数据在json或TXT文件中保存

还是以左图右文为例

新建ajax.json文件存储json数据
在这里插入图片描述

通过bejson进行在线解析
在这里插入图片描述

  • var data=JSON.parse(xmlhttp.responseText);//字符串变json对象这个很重要！！！！
  • xmlhttp.open("GET","ajax.json?t="+Math.random(),true);
  • xmlhttp.send();//向服务器发送请求
    完整json代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>完成任何一个现实网页部分 数据在json或TXT文件中保存</title>
    <style>
        ul{
            list-style: none;
        }
        ul,p,h3{
            padding: 0;
            margin: 0;
        }
        img{
            border: none;
            display: block;
        }
        .mlist img{
            float: left;
            width: 100px;
            height: 60px;
            margin-right: 10px;
        }
        .mlist li{
            border-bottom: 1px solid #269abc;
            /*padding-bottom: 8px;*/
            margin-bottom: 8px;
            position: relative;
            height: 65px;
        }
        .mlist h3{
            font-size: 16px;
            line-height: 32px;
        }
        .mlist p{
            font-size: 16px;
            /*line-height: 32px;*/
            color: #999999;
            padding-left: 10px;
            text-indent: 1em;
        }
        a{
            text-decoration: none;
            color: #030;
        }
        .time{
            position: absolute;
            right: 10px;
            bottom: 10px;
            font-size: 12px;
            color: #ccc;
        }
    </style>
    <script>
            var xmlhttp;
            if (window.XMLHttpRequest)
            {
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp=new XMLHttpRequest();
            }
            else
            {
                // IE6, IE5 浏览器执行代码
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)//成功的效果
                {
                    // console.log(xmlhttp.responseText);//读ajax成功之后把ajax.txt放的位置。
                    // document.getElementById("box").innerHTML=xmlhttp.responseText;//读ajax成功之后把ajax.txt放的位置。

                    var data=JSON.parse(xmlhttp.responseText);//字符串变json对象

                    var mlist=document.querySelector(".mlist");
                    for (var i=0;i<data.length;i++){
                        var hang=` <img src="${data[i].img}" alt="">
                        <h3><a href="${data[i].link}">${data[i].h3}</a></h3>
                        <p>${data[i].p}</p>
                        <span class="time">${data[i].time}</span>`;
                        var newli=document.createElement("li");
                        newli.innerHTML=hang;
                        mlist.appendChild(newli);
                    }
                }
            };
            // xmlhttp.open("GET","ajax.txt",true);
            // txt?t="+Math.random()清除缓存,随机数是get请求可以，post不可以
            xmlhttp.open("GET","ajax.json?t="+Math.random(),true);

            // xmlhttp.open("POST","ajax.txt",true);
            xmlhttp.send();//向服务器发送请求
    </script>
</head>
<body>
<ul class="mlist">
    <!--<li>-->
    <!--<img src="../image/2.1.jpg" alt="">-->
    <!--<h3><a href="#">there is a title</a></h3>-->
    <!--<p>随意的内容</p>-->
    <!--<span class="time">2018-12-8</span>-->
    <!--</li>-->
    <!--<li>-->
    <!--<img src="../image/2.2.jpg" alt="">-->
    <!--<h3><a href="#">there is a title</a></h3>-->
    <!--<p>随意的内容</p>-->
    <!--<span class="time">2018-12-8</span>-->
    <!--</li>-->
    <!--<li>-->
    <!--<img src="../image/2.3.jpg" alt="">-->
    <!--<h3><a href="#">there is a title</a></h3>-->
    <!--<p>随意的内容</p>-->
    <!--<span class="time">2018-12-8</span>-->
    <!--</li>-->
    <!--<li>-->
    <!--<img src="../image/2.4.jpg" alt="">-->
    <!--<h3><a href="#">there is a title</a></h3>-->
    <!--<p>随意的内容</p>-->
    <!--<span class="time">2018-12-8</span>-->
    <!--</li>-->
</ul>


</body>
</html>

在这里插入图片描述
ajax.json文件内容

[
  {"img":"../image/2.1.jpg",
    "h3":"there is a title",
    "link":"http://www.baidu.com",
    "p":"你好明天！",
    "time":"2018-12-8"},
  {"img":"../image/2.2.jpg",
    "h3":"there is a title",
    "link":"http://www.baidu.com",
    "p":"随意的内容",
    "time":"2018-12-8"},
  {"img":"../image/2.3.jpg",
    "h3":"there is a title",
    "link":"http://www.baidu.com",
    "p":"随意的内容",
    "time":"2018-12-8"},
  {"img":"../image/2.4.jpg",
    "h3":"there is a title",
    "link":"http://www.baidu.com",
    "p":"随意的内容",
    "time":"2018-12-8"}
]

效果：
在这里插入图片描述

补充

json+ajax

1.json验证网站
BeJson
SoJson
http://www.json.org/json.js
https://c.runoob.com/front-end/53
2.JSON.stringify()

将 JavaScript 对象转换字符串
从一个对象中解析出字符串

3.JSON.parse

JSON字符串解析为JavaScript对象
JSON.parse(text);
4.ajax 的jQuery实现

  • jQuery.getJSON()
  • .load()
  • jQuery.post()
  • jQuery.get()
  • jQuery.getScript()

5.parseJSON()：字符串转json

  • request.responseText.parseJSON();
  • jQuery方法

6.$.getJSON实例

$("button").click(function(){
  $.getJSON("demo_ajax_json.js",function(result){
    $.each(result, function(i, field){
      $("div").append(field + " ");
    });
  });
});

7.$.ajax

$.ajax({
     type: 'POST',
     url: url ,
    data: data ,
    success: success ,
    dataType: dataType
});

8.JSONP (JSON with Padding)

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决跨域的数据请求。

9.协议
在这里插入图片描述
10.网络跨域资源
https://api.douban.com/v2/book/search?q=javascript&count=1
http://api.komavideo.com/news/list

11.JSONP实现

function jsonpCallback(result) {    }
<script  src="s.php?callback=jsonpCallback"></script>
JavaScript的链接，必须在function的下面
服务器端返回值为json格式

12.JSONP实现（2）

function handleResponse(response){
            console.log(response);
    }
var script = document.createElement("script");
script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";
document.body.insertBefore(script, document.body.firstChild);

13.jSONP的jQuery实现

    <script type="text/javascript" src="jquery.js"></script>  
    <script type="text/javascript">  
        $.getJSON("http://crossdomain.com/services.php?callback=?",  
        function(result) {  
            for(var i in result) {  
                alert(i+":"+result[i]);  
            }  
        });  
    </script>

在这里插入图片描述

14.JSONP缺点
没有关于 JSONP 调用的错误处理。如果动态脚本插入有效，就执行调用。失败是没有任何提示的。
JSONP被不信任的服务使用时会很危险。

15.AJAX和JSONP
ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加

16.PHP中操作JSON

json_encode()
json_decode()
宝拉不想努力了
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ajax高级程序设计pdf
05-16
《Ajax高级程序设计》的前六章涵盖了Ajax的基础和核心应用，包括异步请求、数据格式选择、XMLHttpRequest的使用、DOM操作、库和框架的运用，以及页面状态管理。通过学习这些内容，开发者可以深入理解Ajax技术，并能...
JSON与Ajax
小yu别错过的博客
09-23 907
JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。它基于 ECMAScript (W3C制定的JS规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。同步和异步是建立在客户端和服务器端相互通信的基础上同步：客户端必须等待服务器端的响应，在等待的期间客户端不能做其它的操作。
Ajax和Json
m0_62063669的博客
08-02 931
Asynchronous(异步)JavascriptAndXML简称AJAX，它不是一种新技术，只是老技术[js]采用新用法[引用了XMLHttpRequest对象]。Json语法规则(Json语法是JavaScript对象表示语法的子集) 数据在名称/值对中 数据由逗号分隔 花括号保存对象 方括号保存数组 Json名称/值对 Json数据格式为：名称/值对，"firstName":"John" 相
AJAX和JSON
weixin_65824274的博客
04-28 1109
AJAX（ASynchronous JavaScript And XML）异步的JavaScript 和 XML；由Jesse James Garrett 在他的文章AJAX：A New Approoch to Web Applications中首次提出。ajax（Web数据交互方式）_百度百科使用XHTML+CSS 来看表示信息。使用 JavaScript 操作 D OM 进行动态显示及交互。使用 XML 和 XSLT 进行数据交互及相关操作。
AJAX和JSON详解
热门推荐
write less , do more
05-08 1万+
AJAX和JSON详解
网络限制软件的高级配置：深入解析JSON文件的代码
最新发布
MOMO203010532的博客
11-09 266
在网络限制环境下，很多软件都提供了高级配置选项，以允许用户自定义和优化其功能。这篇文章将深入探讨如何通过解析JSON文件来进行高级配置，以实现更灵活和个性化的网络限制软件设置。我们将提供一些示例代码，演示如何解析JSON文件以及如何监控数据并自动提交到网站。
Ajax高级程序设计.rar
06-02
本压缩包“Ajax高级程序设计.rar”包含了深入学习Ajax技术的相关资源，特别是其主要组件和技术原理的详细讲解。 Ajax的核心组件包括： 1. XMLHttpRequest对象：这是Ajax的基础，它允许JavaScript在页面不刷新的情况...
AJAX高级程序设计源代码
03-02
在"Ajax高级程序设计.exe"中，可能是模拟AJAX交互的示例应用，通过查看和分析源代码，开发者可以深入理解AJAX在实际项目中的应用和实现细节。同时，源代码文件可以作为学习和研究AJAX技术、提升开发技能的宝贵资料。...
ajax高级程序设计
04-10
**Ajax（Asynchronous JavaScript and XML）高级程序设计**是一种用于创建动态、交互性强的Web应用程序的技术，它允许在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。这一技术的核心在于JavaScript，...
AJAX高级程序设计
11-23
**正文** AJAX（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分...在“AJAX高级程序设计”的资源中，你将找到更多关于这些话题的详细解释和示例代码，帮助你在实践中巩固理解。
什么是Ajax和json？？？
07-25
本文详细总结了ajax和json的使用方法和详细示例。
JSON简单例子
05-15
一个简单的JSON例子，仅有一个html文档。里面包括了JS建立JSON和调用JS并赋值到html控件上，包一看就会。不会评论随便吐水
jquery与json和ajax的结合
11-02
jquery与json和ajax的结合,内容很详细
JSON语法
weixin_44543252的博客
05-07 622
JSON语法 开发工具与关键技术：Visual Studio 2015 作者：徐晶旗 撰写时间：2019年5月6日 JS对象简谱 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提...
Json和Ajax的简单理解
NoviceZ的博客
07-12 1348
1 JSON 1.1 认识JSON JSON全称JavaScript Object Notation，即JavaScript对象标记法。JSON是一种轻量级、基于文本、可读的格式。虽然全称中带有JavaScript，但只是说明其语法规则是参考JavaScript的，而不是说只能用于JavaScript。JSON格式具有长时间的稳定性，不存在任何兼容性问题，并且与XML比较，JSON文件更小、读写更快。 1.2 JSON作用 JSON 是存储和交换文本信息的语法。当数据在浏览器与服务器之间进行交换时，这些数据
ajax与json
梦想是很难很难的，所以先勇敢一点
04-19 1090
当json数据的value为null时，转换成对象，获取该对象的value，使用==与null（null是代表空，不是字符串）比较，结果为false;在Java对象转换JSON对象时，get开头的所有方法会被转换。它把对象转换成json串的方式，把所有的属性包括为null的全部输出；尤其是日期，你输入一个yyyy-MM-dd类型日期，它会输出，日历类型，一年中的哪个月，一个月的哪天等等，总之不是我想要的。
Ajax系列之简单介绍笔记
Nicky's blog
09-24 3701
什么是AJAX，为什么要使用AJAXAjax（Asynchronous JavaScript and XML的缩写）：一种创建交互式网页应用的网页开发技术。包含下列技术： 基于XHTML+CSS的表示； 使用 DOM进行动态显示及交互； 使用 XML 和 XSLT 进行数据交换及相关操作； 使用 XMLHttpRequest 进行异步数据查询、检索； 使用 JavaScript 将所有的东西绑定在一
ajax,json学习笔记（一）ajax,http简介
qq_20367813的博客
11-11 216
ajax,json学习笔记（一）ajax,http简介
$.getJSON和ajax区别
07-27
$.getJSON和ajax都是用于发送HTTP请求和获取服务器数据的方法，它们在实现上有一些区别。 1. 语法：$.getJSON是jQuery库中的一个方法，用于发送GET请求并自动解析返回的JSON数据。它的语法是`$.getJSON(url, data, success)`，其中url是请求的URL地址，data是发送给服务器的数据，success是请求成功后执行的回调函数。 而ajax是JavaScript提供的一种通用的发送HTTP请求的方法，它的语法是`$.ajax(settings)`，其中settings是一个包含各种请求参数的对象，包括url、type（请求类型，如GET、POST等）、data（发送给服务器的数据）、success（请求成功后执行的回调函数）等。 2. 数据类型：$.getJSON方法默认解析服务器返回的JSON数据，并将解析后的对象作为参数传递给success回调函数。而ajax可以处理多种数据类型，包括JSON、XML、HTML等。 3. 自动解析：$.getJSON方法会自动解析返回的JSON数据，并将解析后的对象作为参数传递给success回调函数。而ajax需要手动处理服务器返回的数据，可以通过设置dataType参数指定返回数据的类型，然后在success回调函数中进行处理。 4. 请求类型：$.getJSON方法只能发送GET请求，无法发送POST请求。而ajax可以发送各种类型的请求，包括GET、POST、PUT、DELETE等。 综上所述，$.getJSON方法是ajax的一个简化版本，专门用于发送GET请求并自动解析返回的JSON数据。而ajax是更通用的方法，可以处理各种类型的请求和返回数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值