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"})
  • 相关阅读:
    二十一、正则表达式
    二十、冒泡算法,递归,装饰器
    十九、python内置函数汇总
    Jenkins-[--4--]-浏览器不能打开jenkins报告,报错Opening Robot Framework report failed
    Jenkins-[--3--]-robotframework脚本,配置自动发送邮件
    Jenkins-[--2--]-执行本地的robotframework项目
    Jenkins-[--1--]-环境配置
    Redis常用数据类型介绍、使用场景及其操作命令
    angular过滤器
    jscode属性排序
  • 原文地址:https://www.cnblogs.com/gaoquanquan/p/9223209.html
Copyright © 2011-2022 走看看