您的位置:

jsonp和javascript的简单介绍

jsonp和javascript的简单介绍

更新:

本文目录一览:

jsonp跨域的原理是什么?

jsonp其核心思想是利用JS标签里面的跨域特性进行跨域数据访问,在JS标签里面存在的是一个跨域的URL,实际执行的时候通过这个URL获得一段字符串,这段返回的字符串必须是一个合法的JS调用,通过EVAL这个字符串来完成对获得的数据的处理。

JSONP(JSON with Padding(填充))是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。

JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。

相关信息:

由于浏览器同源策略的限制,非同源下的请求,都会产生跨域问题,jsonp即是为了解决这个问题出现的一种简便解决方案。

同源策略即:同一协议,同一域名,同一端口号。当其中一个不满足时,我们的请求即会发生跨域问题。

jsonp原理,以及为什么不是真正的ajax

其实原理很简单,就是利用浏览器可以动态地插入一段js并执行的特点完成的。

script

function injectJs(jsUrl) {

    var script = document.createElement('script');

    script.src = jsUrl;

    document.head.appendChild(script);

}

/script

这样,我们调用injectJs('js/abc.js')浏览器就会去加载js/abc.js 并执行它。

比如我们在前端的某个script里面定义好一个函数:

script

function print(msg) {

    console.log(msg);

}

injectJs('js/abc.js');

/script

然后我们在js/abc.js里面写上:

print("hello, world!");

那么调用injectJs('js/abc.js')就会输出hello, world!。

到此为止这些知识点都并不奇怪哈。然后比较猥琐的知识点来了:我们可以injectJs('/abc.php'),并让php来生成js代码!比如在abc.php里这样写:

?php

header('Content-Type: text/javascript');

echo "print('hello, world!')";

?

得到跟上面相同的效果!

我们甚至可以这样带上get参数:injectJs('/abc.php?userId=123');然后php里取到参数:

?php

header('Content-Type: text/javascript');

$userId = $_GET['userId'];

$userName = getUserNameById($userId);//这里就是个示意,并没有这个函数

echo "print('hello, " . $username . "!')";

?

然后就可以传不同的参数,得到不同的值啦!

jsonp其实是在这个方式上面又做了一个约定,为了更加通用,要求js传一个callback函数的名字(我们这个例子就是'print'),然后php端就不必写死成调用print啦!

比如

script

function print(msg) {

    console.log(msg);

}

injectJs('abc.php?callback=printuserId=123');

function test(a) {

    console.log("test - " + a);

}

injectJs('abc.php?callback=testuserId=123');

/script

在php端:

?php

header('Content-Type: text/javascript');

$userId = $_GET['userId'];

$callback = $_GET['callback'];

$userName = getUserNameById($userId);//这里就是个示意,并没有这个函数

echo $callback. "('hello, " . $username . "!')";

?

然后的然后,我上面为了简单都用了字符串。其实jsonp约定我们的callback接受的参数都是json对象就像这样:

script

function printUser(user) {

    console.log(user);

}

injectJs('abc.php?callback=printUseruserId=123');

/script

PHP端:

?php

header('Content-Type: text/javascript');

$userId = $_GET['userId'];

$callback = $_GET['callback'];

$user = getUserById($userId);//这里就是个示意,并没有这个函数

echo $callback. "(" . json_encode($user) . ")";

?

以上。

至于第二个问题嘛。。。我也不知道如何回答,非要说的话,ajax是通过XMLHttpRequest来进行的,而jsonp?其实就是加载javascript脚本。。。如果你会前端调试,可以用F12打开浏览器的调试窗口,查看网络请求,然后按照xhr或者scripts类型过滤一下,你会发现xhr(XMLHttpRequest的缩写,也就是所谓的ajax请求)里找不到页面发送的jsonp请求。反而是在scripts里能找到。为啥?因为jsonp真的就是加载了javascript脚本而已啦。

如何用原生js发送jsonp请求

//    引入进去

script

function ajax(options) {

  options = options || {};

  options.type = (options.type || "GET").toUpperCase();

  options.dataType = options.dataType || 'json';

  options.async = options.async || true;

  options.timeout=options.timeout||8000;//超时处理,默认8s

  var params = getParams(options.data);

  var timeoutFlag=null;

  var xhr;

  var that=this;

  if (window.XMLHttpRequest) {

      xhr = new XMLHttpRequest();

  } else {

      xhr = new ActiveXObject('Microsoft.XMLHTTP')

  }

  xhr.onreadystatechange = function() {

      if(options.dataType === 'json'){

          if (xhr.readyState == 4) {

              window.clearTimeout(that.timeoutFlag);

              var status = xhr.status;

              if (status = 200  status  300) {

                  // 如果需要像 html 表单那样 POST 数据,请使用 setRequestHeader() 来添加 http 头。

                  options.success  options.success(xhr.responseText, xhr.responseXML);

              } else {

                  options.fail  options.fail(status);

              }

          }

      } else {

          if (xmlHttp.readyState == 4  xmlHttp.status == 200) {

              window.clearTimeout(that.timeoutFlag);

              var oScript = document.createElement('script');

              document.body.appendChild(oScript);

              var callbackname = 'ajaxCallBack'

              oScript.src = options.url + "?" +  params+'callback='+callbackname;

              window['ajaxCallBack'] = function(data) {

                  options.success(data);

                  document.body.removeChild(oScript);

              };

          }

      }

  };

  if (options.type == 'GET') {

      xhr.open("GET", options.url + '?' + params, options.async);

      xhr.send(null)

  } else if (options.type == 'POST') {

      xhr.open('POST', options.url, options.async);

      if(options.contentType=="undefined"||options.contentType==null){

          xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

          xhr.send(params);

      }else{

          xhr.setRequestHeader('Content-Type', options.contentType);

          xhr.send(JSON.stringify(options.data));

      }

  }

  this.timeoutFlag=window.setTimeout(function(){//计时器,超时后处理

      window.clearTimeout(that.timeoutFlag);

      //options.fail("timeout");

      xhr.abort();

  }.bind(this),options.timeout);

}

function getParams(data) {

  var arr = [];

  for (var param in data) {

      arr.push(encodeURIComponent(param) + '=' + encodeURIComponent(data[param]));

  }

  return arr.join('');

}

/script

//    使用

script

ajax({

    url: "", //请求地址

    type: 'GET', //请求方式

    async:true,//同步异步设置

    timeout:8000,//超时设置

    data: {

      userName:$("#username").val(),

    phoneNumber:$("#userphone").val(),

    orderType:'8',

    requirementDetail:'',

    method:'homedecapi.decOrder.insertDecOrder',

    orderSource:'无忧居官网PC'

    }, //请求参数

    success: function(response, xml) {

        if(JSON.parse(response).decOrder_insertDecOrder_response){

          // alert("预约成功")

          $("#mypopup").css('display','block')

        }else{

          alert("预约失败")

        }

    },

    fail: function(status) {

        console.log('状态码为' + status); // 此处为请求失败后的回调

    }

});

/script

JSONP是什么意思

JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的script 元素是一个例外。利用 script 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON,而是任意的JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。

jsonp和javascript的简单介绍

本文目录一览: 1、jsonp跨域的原理是什么? 2、jsonp原理,以及为什么不是真正的ajax 3、如何用原生js发送jsonp请求 4、JSONP是什么意思 jsonp跨域的原理是什么? jso

2023-12-08
javascript入门笔记1的简单介绍

2022-11-18
javascript简要笔记,JavaScript读书笔记

2022-11-17
java解析jsonp,java解析json数组对象

2022-11-25
javascript一句话笔记,javascript基本语句

2022-11-16
cors和jsonp

2022-11-23
htmljs编程笔记(html代码笔记)

本文目录一览: 1、html代码和JS代码有什么区别 2、如何在html中调用js函数 3、JavaScript学习笔记之数组基本操作示例 4、HTML5初学者笔记 5、《web前端笔记7》js字符—

2023-12-08
python使用笔记23的简单介绍

2022-11-10
js高级程序设计笔记14(js高级程序设计笔记14页)

本文目录一览: 1、JavaScript高级程序设计 该怎么看 2、JavaScript学习笔记之数组基本操作示例 3、JS中有关sort以及return的问题 JavaScript高级程序设计 该怎

2023-12-08
javascript高级教程的简单介绍

2022-11-14
深入剖析jsonp跨域

2023-05-21
fetch-jsonp简介及应用

2023-05-19
前端学习笔记

2023-05-12
js代码同步异步的简单介绍

本文目录一览: 1、怎样用JS实现异步转同步 2、JS Promise 同步和异步代码执行的区别 3、javascript同步和异步的区别与实现方式 4、js执行顺序+同步异步 5、js 是同步执行

2023-12-08
怎样通过js获取数据库数据的简单介绍

本文目录一览: 1、js调用数据库里面的数据 2、js 如何读取数据库信息 3、javascript如何读取到数据库的信息 4、javascript中如何获取从数据库取出的数据? 5、JS 文件如何获

2023-12-08
javascript基础第七讲的简单介绍

2022-11-09
javajsonp接口(java开发api接口返回json)

本文目录一览: 1、如何在java代码中执行jsonp请求 2、jsonp公开接口返回中文乱码问题 3、java中服务端怎么实现jsonp 4、java写一个接口实现将移动端的数据存放到数据库指定的表

2023-12-08
java864的简单介绍

2022-11-28
javascript和jsonfor的简单介绍

本文目录一览: 1、js如何使用for循环往json添加数据? 2、有json数据在web界面如何用JS的for循环取出并生成表格 3、javascript如何循环读取JSON数据 4、有json数据

2023-12-08
学习JavaScript Ajax的基础知识

2023-05-11