作者:px9ctrl | 来源:互联网 | 2022-03-24 19:41
最近慢慢感觉,学再多框架,库,都不如老老实实先把基础弄扎实了。
不说废话,先上一个用ajax请求下本地的一个.txt文件
执行效果如下,点击show就会通过ajax请求本地的.txt文件。
代码比较简单,加上注释,相信很容易就看得懂。
但是工作中我们经常会请求其他域下的资源(因为同源策略),这个时候就遇到了跨域(协议,端口,域名任何一个不同就算是跨域)。
解决跨域的一种常用办法就是jsonp,虽然他有局限性(只支持get请求),不过优点是兼容老式浏览器(不过现在好像很少有人在意老式浏览器了)。
jsonp的基本原理:就是通过动态创建script标签,script标签的src是没有跨域限制的。
接下来上一个类似百度搜索下拉的页面
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='https://img.devbox.cn/3cccf/16086/243/8e839f523b770d1d.png" />
代码也相对比较简单,加上代码的注释,一定很容易看懂,这就是解决跨域的一种常用办法,其他有反向代理,CORS啊等等,等我学好再整理出来。
以上这篇原生js的ajax和解决跨域的jsonp(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
推荐阅读
-
本文详细介绍了JavaScript在不同域之间进行数据传输或通信的技术,包括使用JSONP、修改document.domain、利用window.name以及HTML5的postMessage方法等跨域解决方案。 ...
[详细]
蜡笔小新 2024-11-22 16:27:56
-
本文详细介绍了如何利用jQuery和百度地图API将地址转换为经纬度,包括申请API密钥、页面构建及核心代码实现。 ...
[详细]
蜡笔小新 2024-11-24 14:33:10
-
-
随着Oracle ADW的推出,数据迁移至ADW成为业界关注的焦点。特别是XML和JSON这类结构化数据的迁移需求日益增长。本文将通过一个实际案例,探讨如何高效地将XML数据迁移至ADW。 ...
[详细]
蜡笔小新 2024-11-23 20:27:56
-
本文探讨了如何通过优化 DOM 操作来提升 JavaScript 的性能,包括使用 `createElement` 函数、动画元素、理解重绘事件及处理鼠标滚动事件等关键主题。 ...
[详细]
蜡笔小新 2024-11-21 18:16:19
-
近期尝试从www.hub.sciverse.com网站通过编程手段获取数据时遇到问题,起初尝试使用WebBrowser控件进行数据抓取,但发现使用GET方法翻页时,返回的HTML代码始终相同。进一步探究后了解到,该网站的数据是通过Ajax异步加载的,可通过HTTP查看详细的JSON响应。 ...
[详细]
蜡笔小新 2024-11-21 10:36:30
-
蜡笔小新 2024-11-20 14:27:32
-
本文探讨了Git作为版本控制工具的基本概念及其重要性,不仅限于代码管理,还包括文件的历史记录与版本切换功能。通过对比Git与SVN,进一步阐述了分布式版本控制系统的独特优势。 ...
[详细]
蜡笔小新 2024-11-24 19:32:57
-
本文介绍了Docker——一款用Go语言编写的开源应用程序容器引擎。通过Docker,用户能够将应用及其依赖打包进容器内,实现高效、轻量级的虚拟化。容器之间采用沙箱机制,确保彼此隔离且资源消耗低。 ...
[详细]
蜡笔小新 2024-11-24 09:54:53
-
本文详细介绍了如何在PHP中使用Memcached进行数据缓存,包括服务器连接、数据操作、高级功能等。 ...
[详细]
蜡笔小新 2024-11-24 09:51:34
-
STM32代码编写STM32端不需要写关于连接MQTT服务器的代码,连接的工作交给ESP8266来做,STM32只需要通过串口接收和发送数据,间接的与服务器交互。串口三配置串口一已 ...
[详细]
蜡笔小新 2024-11-23 21:37:55
-
本文探讨了在AspNetForums平台中实施基于角色的权限控制系统的方法,旨在为不同级别的用户提供合适的访问权限,确保系统的安全性和可用性。 ...
[详细]
蜡笔小新 2024-11-23 18:42:29
-
一、使用Microsoft.Office.Interop.Excel.DLL需要安装Office代码如下:2publicstaticboolExportExcel(S ...
[详细]
蜡笔小新 2024-11-23 16:37:33
-
笔记说明重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系& ...
[详细]
蜡笔小新 2024-11-23 10:34:04
-
Python学习网有大量免费的Python入门教程,欢迎大家来学习。本文主要通过爬取去哪儿网的旅游攻略来给大家介绍pyspid ...
[详细]
蜡笔小新 2024-11-22 18:00:41
-
本文详细探讨了AJAX的基本概念、工作原理及其在现代Web开发中的应用,旨在为初学者提供全面的学习资料。 ...
[详细]
蜡笔小新 2024-11-20 17:58:54
-