• JS——json、ajax、jsonp


    json:

    data.json:

    {
    "code":1,
    "data":
    {
    "name": "kid",
    "age":18
    }

    }

     导入json数据:

        <script type="text/javascript">
            $.ajax({
                url:'js/data.json',
                //数据不要求很安全,小型数据用get
                type:'get',
                dataType:'json'
            })
                .done(function (data) {
                    if(data.code==1){
                        $('.user_welcome em').html(data.data.name);
    
                        $('.user_welcome').show();
                        $('.user_login_link').hide();
                    }
                })
                .fail(function () {
                    alert('哎呀,好像网不好~');
                });
        </script>

      json是JavaScript Object Nation 的首字母缩写,单词的意思是javascript对象表示法,这里说的json指的是类似于javascript对象的一种数据格式,目前这种数据格式比较流行,逐渐替换掉了传统的xml数据格式。

      与json对象不同的是,json数据格式的属性名称需要用双引号引起来,用单引号或不用引号会导致读取数据错误。

    ajax:

      ajax技术的目的是让javascript发送http请求,与后台通信,获取数据和信息。

      ajax技术的原理是实例化xmlhttp对象,使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行,从而实现异步。

      局部刷新:ajax可以实现局部刷新,也叫做无刷新,无刷新指的是整个页面不刷新,只局部刷新。ajax可以自己发送http请求,不用通过地址栏,所以整个页面不会刷新,ajax获取到后台数据,更新页面显示数据的部分,就做到了页面局部刷新。

    同源策略:

      Node.js是一个Javascript运行环境(runtime environment)

    jsonp:

      ajax只能请求同一个域下的数据或资源,有时候需要跨域请求数据,就需要jsonp技术。

    jsonp的原理如下:

    <script type="text/javascript" src="....../js/data.js"><script>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>ajax text</title>
        <script type="text/javascript" src="jquery-1.12.4.min.js"></script>
        <script type="text/javascript">
            $.ajax({
                url:'data.js',
                type:'get',
                dataType:'jsonp',
                jsonpCallback:'aa'
            })
                .done(function (data) {
                    alert(data);
                })
                .fail(function () {
                    console.log("error");
                })
        </script>
        <script type="text/javascript" src="data.js"></script>
    </head>
    <body>
    
    </body>
    </html>

    data.js:

    aa({"name":"tom"})
  • 相关阅读:
    初级算法
    初级算法
    LeetCode刷题
    win32
    Hexo
    网络上收集的C++常见面试题
    Direct2D CreateBitmap的使用
    hdu4560 不错的建图,二分最大流
    hdu4560 不错的建图,二分最大流
    poj1182 and 携程预赛2第一题 带权并查集
  • 原文地址:https://www.cnblogs.com/gaoquanquan/p/9223209.html
Copyright © 2020-2023  润新知