原生js的ajax和解决跨域的jsonp(实例讲解)


Posted in Javascript onOctober 16, 2017

最近慢慢感觉,学再多框架,库,都不如老老实实先把基础弄扎实了。

不说废话,先上一个用ajax请求下本地的一个.txt文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script>
    window.onload =function(){
      var oBtn = document.getElementById('btn');

      oBtn.onclick = function(){
        //创建XHR对象
        var xhr = new XMLHttpRequest();

        //请求的方式,地址,是否异步
        xhr.open('get','test.txt',true);

        //请求的确定操作,初始化,相当于搜索时,敲击的回车
        xhr.send(null);

        //请求的readyState每变化一次就执行一次onreadystatechange函数
        //其中readyState表示的是:请求/响应过程的当前活动阶段
        //readyState有如下取值
        /*
        *  0:未初始化,尚未调用send()方法
        *  1: 启动
        *  2:发送
        *  3:接收
        *  4:完成
        */
        xhr.onreadystatechange =function(){
          if(xhr.readyState ==4){
            alert(xhr.responseText);
          }
        }
      };


    };
  </script>
</head>
<body>
<input type="button" id="btn" value="show">
</body>
</html>

执行效果如下,点击show就会通过ajax请求本地的.txt文件。

原生js的ajax和解决跨域的jsonp(实例讲解)

代码比较简单,加上注释,相信很容易就看得懂。

但是工作中我们经常会请求其他域下的资源(因为同源策略),这个时候就遇到了跨域(协议,端口,域名任何一个不同就算是跨域)。

解决跨域的一种常用办法就是jsonp,虽然他有局限性(只支持get请求),不过优点是兼容老式浏览器(不过现在好像很少有人在意老式浏览器了)。

jsonp的基本原理:就是通过动态创建script标签,script标签的src是没有跨域限制的。

接下来上一个类似百度搜索下拉的页面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    input{
      width:300px;
      height:30px;
      border:1px solid lightgray;
      margin-top: 150px;
      margin-left: 200px;
      padding-left: 5px;
    }
    ul{
      width:307px;
      list-style: none;
      margin-left: 200px;
      display: none;
    }
    li{
      height:30px;
      border: 1px solid lightgray;
      line-height: 30px;
      padding-left: 5px;
    }
  </style>
  <script>
    function callbackD(response){
      var oUl = document.getElementById('ulList');
      var html='';
      if(response.s.length !=0){
        oUl.style.display='block';
        for(var i = 0;i<response.s.length;i++){
          html+='<li>'+response.s[i]+'</li>'
        }
      }
      oUl.innerHTML = html;
    }
  </script>
  <script>
    window.onload = function(){
      //获取dom元素
      var oData = document.getElementById('inputSearch');
      var oUl = document.getElementById('ulList');

      //键盘按下后抬起触发事件(onkeyup)
      oData.onkeyup = function(){
        if(oData.value != ''){
          //创建标签(createElement)
          var script = document.createElement("script");
          //添加地址
          script.src='http://unionsug.baidu.com/su?wd='+this.value+'&p=3&cb=callbackD';
          //添加给body的(成为body包涵的孩子)
          document.body.appendChild(script);
        }else{
          oUl.style.display='none';
        }

      }

    };
  </script>
</head>
<body>
<input type="text" id="inputSearch">
<ul id="ulList">
  <li>123</li>
</ul>
</body>
</html>

执行效果如下:

原生js的ajax和解决跨域的jsonp(实例讲解)

代码也相对比较简单,加上代码的注释,一定很容易看懂,这就是解决跨域的一种常用办法,其他有反向代理,CORS啊等等,等我学好再整理出来。

以上这篇原生js的ajax和解决跨域的jsonp(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript获取页面上某个元素的代码
Mar 13 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
Jan 29 Javascript
javascript列表框操作函数集合汇总
Nov 28 Javascript
给事件响应函数传参数的四种方式小结
Dec 05 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
Oct 28 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
vue之数据交互实例代码
Jun 20 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
Aug 10 Javascript
npm的lock机制解析
Jun 20 Javascript
JS中async/await实现异步调用的方法
Aug 28 Javascript
Javascript执行流程细节原理解析
May 14 Javascript
vue实现倒计时功能
Mar 24 Vue.js
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
Oct 16 #Javascript
Vue 2.0学习笔记之Vue中的computed属性
Oct 16 #Javascript
angular4中关于表单的校验示例
Oct 16 #Javascript
原生JS实现小小的音乐播放器
Oct 16 #Javascript
jQuery实现简单的回到顶部totop功能示例
Oct 16 #jQuery
老生常谈JavaScript面向对象基础与this指向问题
Oct 16 #Javascript
echarts饼图扇区添加点击事件的实例
Oct 16 #Javascript
You might like
推荐一篇入门级的Class文章
2007/03/19 PHP
SESSION信息保存在哪个文件目录下以及能够用来保存什么类型的数据
2012/06/17 PHP
joomla jce editor 解决上传中文名文件失败问题
2013/06/09 PHP
php连接微软MSSQL(sql server)完全攻略
2016/11/27 PHP
linux mint下安装phpstorm2020包括JDK部分的教程详解
2020/09/17 PHP
js将控件隐藏及display属性的使用介绍
2013/12/30 Javascript
javascript break指定标签打破多层循环示例
2014/01/20 Javascript
jQuery语法小结(超实用)
2015/12/31 Javascript
javascript类型系统_正则表达式RegExp类型详解
2016/06/24 Javascript
json数据处理及数据绑定
2017/01/25 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
2017/09/04 Javascript
基于vue2.0实现简单轮播图
2017/11/27 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
2018/09/01 Javascript
JavaScript Tab菜单实现过程解析
2020/05/13 Javascript
举例详解Python中的split()函数的使用方法
2015/04/07 Python
python 爬取微信文章
2016/01/30 Python
python 图像平移和旋转的实例
2019/01/10 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
pytorch的梯度计算以及backward方法详解
2020/01/10 Python
序列化Python对象的方法
2020/08/01 Python
10行Python代码实现Web自动化管控的示例代码
2020/08/14 Python
Python3.9最新版下载与安装图文教程详解(Windows系统为例)
2020/11/28 Python
html5指南-3.如何实现html元素拖拽功能
2013/01/07 HTML / CSS
让IE9以下版本的浏览器兼容HTML5的方法
2014/03/12 HTML / CSS
Html5新特性用canvas标签画多条直线附效果截图
2014/06/30 HTML / CSS
JD Sports瑞典:英国领先的运动时尚商店
2018/01/28 全球购物
巴基斯坦购物网站:Goto
2019/03/11 全球购物
Android interview questions
2016/12/25 面试题
企业统计员岗位职责
2013/12/13 职场文书
税务干部个人整改措施思想汇报
2014/10/10 职场文书
群众路线剖析材料(四风)
2014/11/05 职场文书
2014年公司工作总结
2014/11/22 职场文书
浪漫的婚礼主持词
2015/06/30 职场文书
七年级话题作文之执着
2019/11/19 职场文书
元素水平垂直居中的方式
2021/03/31 HTML / CSS
《火纹风花雪月无双》预告“神秘雇佣兵” 紫发剑客
2022/04/13 其他游戏