在我们请求数据时，完成页面跨域，利用原生JS封装的ajax和jsonp：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <script>

    //ajax 和jsonp 跨域的封装

    var $={

        //封装ajax，堪比jquery中的ajax

        ajax:function(option){

            //判断输出的async真假

            var async=typeof(option.async)==="undefined"?true:option.async;

            var xhr=null;

            //判断在各浏览器的请求

            if(window.XMLHttpRequest){

                // 主流浏览器

                xhr=new XMLHttpRequest();

            }else if(window.ActiveXObject){

                // IE浏览器

                xhr=new ActiveXObject("Microsoft.XMLHttp");

            }

            //打开

            xhr.open(option.type || "get",option.url,async);

            xhr.onreadystatechange=function(){

                // 请求成功执行的

                if(this.readyState==4 && this.status==200){

                    var data=this.responseText;

                    if(option.dataType=="json"){

                        // data=JSON.parse(data);

                        data=eval("("+data+")");

                    }

                    option.success && option.success(data);

                }

            };

            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

            //发送

            xhr.send();

        },

        loadScript:function(url){

            //创建一个script标签

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

            script.src=url;

            //插入到head标签中

            document.getElementsByTagName('head')[0].appendChild(script);

        },

        jsonp:function(option){

            //利用随机数给函数其一个函数名

            var cbName="JSONCallback"+Math.random().toString().substr(2,10);

            //将url中的callback=?替换成callback=生成的函数名

            option.url=option.url.replace(/callback=\?/,'callback='+cbName);

            //创建一个用cbName作为函数名的函数

            window[cbName]=function(data){

                option.success && option.success(data);

                window[cbName]=null;    //window清空 ,避免污染全局变量

            }

            //调用loadScript方法，生成script的标签，设置src；

            this.loadScript(option.url);

        }

    }

    $.ajax({

        url:"json.php",

        type:"post",

        async:false,

        dataType:"json",

        success:function(data){

            console.log(data)

        },

        error:function(){

        }

    })

    $.jsonp({

        url:"http://www.bjuga.com/demo.php?callback=?",//后台给得接口

        success:function(data){

            console.log(data)

        }

    })

    </script>

</body>

</html>

原生javascript封装ajax和jsonp的更多相关文章

  1. 原生JavaScript实现AJAX、JSONP

    相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的 ...

  2. 原生JavaScript 封装ajax

    原生JavaScript 封装ajax   function myajax(options){ //新建一个局部对象 用来存放用户输入的各种参数 var opt={ type:options.type ...

  3. 原生 JavaScript 实现 AJAX、JSONP

    相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的 ...

  4. 原生JavaScript封装Ajax

    第一次开个人技术博客了,发的第一篇技术文章,欢迎指点…… 欢迎访问本人的独立博客:蓝克比尔 Ajax的实现主要分为四部分: 1.创建Ajax对象 // 创建ajax对象 var xhr = null; ...

  5. 原生JavaScript封装的jsonp跨域请求

    原生JavaScript封装的jsonp跨域请求 <!DOCTYPE html> <html lang="en"> <head> <met ...

  6. 用原生JS实现AJAX和JSONP

    前端开发在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的.其实,原生 ...

  7. 原生JavaScript写AJAX

    前端JavaScript: function ajaxGet(url, obj) { var request; if(window.XMLHttpRequest) { request = new XM ...

  8. 原生javaScript完成Ajax请求

    使用原生javaScript完成Ajax请求,首先应该创建一个对象XMLHttprequest,考虑到兼容低版本IE浏览器,使用ActiveXObject对象,代码入下: var request; i ...

  9. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

随机推荐

  1. hdu 4038 2011成都赛区网络赛H 贪心 ***

    贪心策略 1.使负数为偶数个,然后负数就不用管了 2.0变为1 3.1变为2 4.2变为3 5.若此时操作数剩1,则3+1,否则填个1+1,然后回到5

  2. [Outlook]设置邮件自动接收时间

    [Outlook]设置邮件自动接收时间   找了好久,一直都没设置正常,导致老是收到邮件有延迟,今天头脑清晰,搜了一下,然后自己竟然给找到了,记下来当笔记,好记性不如烂笔头,呵呵   搜索百度&quo ...

  3. 1:A+B Problem

    总时间限制:  1000ms  内存限制:  65536kB 描述 Calculate a + b 输入 Two integer a,,b (0 ≤ a,b ≤ 10) 输出 Output a + b ...

  4. 字幕文件 WebVTT 与 srt 之间的互相转化

    1. WebVTT 2 srt 1. 用记事本打开 .vtt 文件: 2. 在记事本中点击 编辑  -> 替换 -> 查找内容中输入".",替换为中输入",& ...

  5. 用C获得当前系统时间（转）

    #include <stdio.h> #include <time.h> void main () { time_t rawtime; struct tm * timeinfo ...

  6. 基于MATLAB的adaboost级联形式的人脸检测实现

    很早之前就做过一些关于人脸检测和目标检测的课题,一直都没有好好总结出来,趁着这个机会,写个总结,希望所写的内容能给研究同类问题的博友一些见解和启发!!博客里面涉及的公式太繁琐了,直接截图了. 转载请注 ...

  7. barabasilab-networkScience学习笔记1-网络科学简介

    第一次接触复杂性科学是在一本叫think complexity的书上,Allen博士很好的讲述了数据结构与复杂性科学,barabasi是一个知名的复杂性网络科学家,barabasilab则是他所主导的 ...

  8. sql篇 select from where group by having order by

    以前,自己总是记不住如何用group by,如何用order by,什么时候用group by,什么时候用order by,什么时候两者一起用,怎么用,谁先谁后,现在,我们就一起来说一下Select ...

  9. codeforces733D. Kostya the Sculptor 偏序cmp排序，数据结构hash,代码简化

    对于n==100.1,1,2或者1,2,2大量重复的形状相同的数据,cmp函数最后一项如果表达式带等于,整个程序就会崩溃 还没有仔细分析std::sort的调用过程,所以这里不是很懂..,mark以后 ...

  10. C# 插件式程序开发

    在网上找了下插件式编程的资料,这里自己先借鉴下别人的,同时发现有自己的看法,不过由于本人水平有限,不一定有参考价值,写出来一方面是为了总结自己,以求提高,另一方面也希望各为朋友看到我的不足,给我提出宝 ...