zoukankan      html  css  js  c++  java
  • 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"})
  • 相关阅读:
    基于udp简单聊天的系统
    网络编程_tcp与dup协议简单应用
    logging_modules
    linux内核配置与编译
    linux内核简介
    对于国嵌上学期《一跃进入C大门》Mini2440的代码修正
    通过按键玩中断
    MMU功能解析、深入剖析、配置与使用
    C与汇编混合编程
    一跃进入C大门
  • 原文地址:https://www.cnblogs.com/gaoquanquan/p/9223209.html
Copyright © 2011-2022 走看看