JSON???JSONP ??????jQuery????????????share???

Posted 2020-11-10

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JSON???JSONP ??????jQuery????????????share???相关的知识，希望对你有一定的参考价值。

??????????????? ???????????? ?????? ?????? ???????????? child ?????? ?????? call

??????AJAX??????????????????????????????????????????????????????AJAX??????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????XML????????????????????????????????????????????????????????????

???????????????????????????????????????????????????????????????JSON??????????????????JSONP??????????????????????????????????????????????????????

JSON???JSONP??????????????????????????????????????????????????????????????????????????????JSON?????????????????????????????????JSONP??????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????JSON???????????????????????????????????????????????????????????????JSONP???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????

?????????JSON

???????????????????????????JSON??????????????????????????????????????????????????????????????????????????????

JSON????????????

1???????????????????????????????????????????????????

2???javascript????????????????????????????????????????????????

3????????????????????????????????????????????????????????????????????????????????????

4????????????????????????????????????XML?????????????????????????????????????????????????????????????????????????????????

5?????????????????????????????????????????????????????????????????????

JSON???????????????????????????

JSON??????????????????????????????????????????????????????XML???????????????????????????????????????????????????????????????????????????

1???JSON?????????????????????????????????????????????{}????????????[]?????????????????????:???????????????????????????,??????????????????????????????""???????????????

2????????????{}?????????????????????????????????????????????????????????????????????????????????????????????OOP??????????????????????????????[]?????????????????????????????????????????????????????????????????????OOP???????????????

3??????????????????????????????????????????????????????????????????,???????????????

4???????????????????????????:?????????????????????????????????????????????????????????""????????????????????????????????????

5???JSON???????????????????????????????????????????????????????????????????????????null ?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????

JSON?????????

// ???????????????

var person = {
    "Name": "Bob",
    "Age": 32,
    "Company": "IBM",
    "Engineer": true
}

// ????????????????????????

var personAge = person.Age;

// ???????????????

var members = [
    {
        "Name": "Bob",
        "Age": 32,
        "Company": "IBM",
        "Engineer": true
    },
    {
        "Name": "John",
        "Age": 20,
        "Company": "Oracle",
        "Engineer": false
    },
    {
        "Name": "Henry",
        "Age": 45,
        "Company": "Microsoft",
        "Engineer": false
    }
]

// ????????????John???????????????

var johnsCompany = members[1].Company;

// ??????????????????

var conference = {
    "Conference": "Future Marketing",
    "Date": "2012-6-1",
    "Address": "Beijing",
    "Members": 
    [
        {
            "Name": "Bob",
            "Age": 32,
            "Company": "IBM",
            "Engineer": true
        },
        {
            "Name": "John",
            "Age": 20,
            "Company": "Oracle",
            "Engineer": false
        },
        {
            "Name": "Henry",
            "Age": 45,
            "Company": "Microsoft",
            "Engineer": false
        }
    ]
}

// ???????????????Henry???????????????

var henryIsAnEngineer = conference.Members[2].Engineer;

?????????JSONP?

?????????JSONP?????????????????????

1?????????????????????????????????Ajax?????????????????????????????????????????????????????????????????????????????????????????????????????????web?????????WCF??????????????????????????????????????????

2???????????????????????????Web???????????????js????????????????????????????????????????????????????????????????????????????????????"src"??????????????????????????????????????????????????????<script>???<img>???<iframe>??????

3??????????????????????????????????????????????????????web??????ActiveX??????????????????????????????????????????html5???Websocket???????????????????????????????????????????????????????????????????????????????????????????????????????????????js????????????????????????????????????????????????????????????

4??????????????????????????????????????????JSON????????????????????????????????????????????????????????????????????????JSON??????js??????????????????????????????????????????????????????????????????????????????????????????

5?????????????????????????????????????????????web????????????????????????????????????????????????????????????????????????????????????????????????js????????????????????????JSON???????????????????????????????????????????????????????????????JSON??????????????????????????????????????????????????????????????????

6??????????????????JSON?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????AJAX???????????????????????????

7??????????????????????????????????????????????????????????????????????????????????????????????????????JSONP?????????????????????????????????????????????????????????callback???????????????????????????????????????????????????????????????callback?????????????????????????????????JSON?????????????????????????????????????????????????????????????????????????????????????????????

JSONP???????????????????????????

?????????????????????jsonp????????????????????????

1??????????????????????????????js????????????????????????????????????web???????????????????????????web???????????????????????????????????????

???????????????remoteserver.com??????????????????remote.js?????????????????????

alert(????????????????????????);

???????????????localserver.com?????????jsonp.html?????????????????????

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="http://remoteserver.com/remote.js"></script>
</head>
<body>

</body>
</html>

?????????????????????????????????????????????????????????????????????????????????

2??????????????????jsonp.html??????????????????????????????????????????remote.js??????????????????????????????

jsonp.html?????????????????????

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
    var localHandler = function(data){
        alert(??????????????????????????????????????????remote.js?????????????????????js???????????????????????? + data.result);
    };
    </script>
    <script type="text/javascript" src="http://remoteserver.com/remote.js"></script>
</head>
<body>

</body>
</html>

remote.js?????????????????????

localHandler({"result":"????????????js???????????????"});

????????????????????????????????????????????????????????????????????????????????????????????????js??????????????????????????????????????????js????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????js??????????????????????????????????????????????????????????????????jsonp?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????

3???????????????????????????????????????????????????????????????js????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????XXX?????????js??????????????????????????????????????????????????????????????????????????????????????????js?????????????????????

???jsonp.html??????????????????

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
    // ????????????????????????????????????????????????
    var flightHandler = function(data){
        alert(??????????????????????????????????????? ??? + data.price + ??? ????????? + ????????? ??? + data.tickets + ??? ?????????);
    };
    // ??????jsonp?????????url??????????????????????????????????????????????????????????????????????????????javascript?????????
    var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";
    // ??????script????????????????????????
    var script = document.createElement(???script???);
    script.setAttribute(???src???, url);
    // ???script????????????head?????????????????????
    document.getElementsByTagName(???head???)[0].appendChild(script); 
    </script>
</head>
<body>

</body>
</html>

??????????????????????????????????????????????????????js???????????????????????????????????????????????????????????????jsonp???????????????????????????????????????????????????????????????????????????jsonp?????????????????????

?????????????????????url??????????????????code???????????????????????????????????????CA1998????????????????????????callback?????????????????????????????????????????????????????????flightHandler???????????????????????????????????????????????????????????????

OK????????????????????????????????????flightResult.aspx????????????????????????????????????????????????jsonp.html???????????????????????????????????????????????????????????????????????????????????????????????????????????????

flightHandler({
    "code": "CA1998",
    "price": 1780,
    "tickets": 5
});

????????????????????????flightHandler??????????????????json???????????????????????????????????????????????????????????????????????????????????????jsonp?????????????????????????????????

4??????????????????????????????????????????????????????jsonp???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????

jQuery???JSONP?????????

????????????????????????????????????????????????????????????????????????jsonp???????????????

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" >
 <head>
     <title>Untitled Page</title>
      <script type="text/javascript" src=jquery.min.js"></script>
      <script type="text/javascript">
     jQuery(document).ready(function(){ 
        $.ajax({
             type: "get",
             async: false,
             url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
             dataType: "jsonp",
             jsonp: "callback",//??????????????????????????????????????????????????????jsonp???????????????????????????(???????????????:callback)
             jsonpCallback:"flightHandler",//????????????jsonp??????????????????????????????jQuery?????????????????????????????????????????????"?"???jQuery???????????????????????????
             success: function(json){
                 alert(??????????????????????????????????????? ??? + json.price + ??? ??????????????? ??? + json.tickets + ??? ?????????);
             },
             error: function(){
                 alert(???fail???);
             }
         });
     });
     </script>
     </head>
  <body>
  </body>
 </html>

???????????????????????????????????????????????????flightHandler????????????????????????????????????????????????????????????jQuery???????????????jquery?????????jsonp?????????ajax????????????????????????????????????jquery??????jsonp?????????ajax??????????????????????????????????????????????????????????????????????????????????????????????????????success?????????????????????????????????????????????

????????????ajax???jsonp????????????????????????????????????

1???ajax???jsonp?????????????????????????????????????????????????????????????????????????????????????????????url?????????????????????????????????????????????????????????jquery???ext???????????????jsonp??????ajax?????????????????????????????????

2??????ajax???jsonp????????????????????????????????????ajax??????????????????XmlHttpRequest???????????????????????????jsonp???????????????????????????<script>?????????????????????????????????js?????????

3?????????????????????ajax???jsonp?????????????????????????????????ajax????????????????????????????????????????????????jsonp?????????????????????????????????????????????

4??????????????????jsonp???????????????????????????????????????????????????ajax?????????????????????????????????json???????????????????????????????????????????????????????????????????????????????????????jsonp?????????????????????

???????????????jsonp??????ajax????????????????????????jquery????????????jsonp????????????ajax??????????????????????????????