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"})

 

posted @ 2018-06-25 10:37  高圈圈  阅读(160)  评论(0)  编辑  收藏  举报