原生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 面向对象编程基础 多态
Aug 21 Javascript
IE6下JS动态设置图片src地址问题
Jan 08 Javascript
JS:window.onload的使用介绍
Nov 13 Javascript
JavaScript对象之深度克隆介绍
Dec 08 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
Apr 07 Javascript
javascript实现youku的视频代码自适应宽度
May 25 Javascript
jquery转盘抽奖功能实现
Nov 13 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
Jan 06 Javascript
基于javascript编写简单日历
May 02 Javascript
探索Vue高阶组件的使用
Jan 08 Javascript
详解Vue用cmd创建项目
Feb 12 Javascript
koa-router路由参数和前端路由的结合详解
May 19 Javascript
基于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
iis下php mail函数的sendmail配置方法(官方推荐)
2012/04/25 PHP
PHP写的获取各搜索蜘蛛爬行记录代码
2012/08/21 PHP
php带抄送和密件抄送的邮件发送方法
2015/03/20 PHP
php 时间time与日期date之间的使用详解及区别
2016/11/07 PHP
HTA版JSMin(省略修饰语若干)基于javascript语言编写
2009/12/24 Javascript
jquery中实现标签切换效果的代码
2011/03/01 Javascript
jquery提取元素里的纯文本不包含span等里的内容
2013/09/30 Javascript
javascript操纵OGNL标签示例代码
2014/06/16 Javascript
Nodejs异步回调的优雅处理方法
2014/09/25 NodeJs
escape函数解决js中ajax传递中文出现乱码问题
2014/10/30 Javascript
Javascript实现计算个人所得税
2015/05/10 Javascript
在Javascript中处理字符串之big()方法的使用
2015/06/08 Javascript
详解JavaScript中的forEach()方法的使用
2015/06/08 Javascript
Javascript中的几种继承方式对比分析
2016/03/22 Javascript
js验证真实姓名与身份证号,手机号的简单实例
2016/07/18 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
2016/09/21 Javascript
javascript cookie的基本操作(添加和删除)
2017/07/24 Javascript
JavaScript阻止表单提交方法(附代码)
2017/08/15 Javascript
webpack将js打包后的map文件详解
2018/02/22 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
2020/04/13 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
2020/05/19 Javascript
[42:00]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第一场 12.13
2020/12/17 DOTA
Python随机生成一个6位的验证码代码分享
2015/03/24 Python
Python格式化日期时间操作示例
2018/06/28 Python
python异步存储数据详解
2019/03/19 Python
python机器学习实现决策树
2019/11/11 Python
简历上的自我评价
2014/02/03 职场文书
《黄河颂》教学反思
2014/02/07 职场文书
《两个铁球同时着地》教学反思
2014/02/13 职场文书
情况说明书格式范文
2014/05/06 职场文书
2014年体育部工作总结
2014/11/13 职场文书
科技馆观后感
2015/06/08 职场文书
祝酒词范文
2015/08/12 职场文书
2016八一建军节慰问信
2015/11/30 职场文书
公务员的复习计划书,请收下!
2019/07/15 职场文书
Python+Selenium实现读取网易邮箱验证码
2022/03/13 Python