作者: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(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
推荐阅读
-
技术分享:使用 Flask、AngularJS 和 Jinja2 构建高效前后端交互系统 ...
[详细]
蜡笔小新 2024-11-11 15:24:24
-
前端时间因为项目需要,要对一个产品下所有的附属图片进行分页显示,没考虑ajax一张张请求,所以干脆一次性全部把图片out,然 ...
[详细]
蜡笔小新 2024-11-12 14:58:57
-
-
本文详细探讨了Django CBV(Class-Based Views)模型的源码运行流程,通过具体的示例代码和详细的解释,帮助读者更好地理解和应用这一强大的功能。 ...
[详细]
蜡笔小新 2024-11-14 12:36:32
-
短暂的人生中,IT和技术只是其中的一部分。无论换工作还是换行业,最终的目标是成功、荣誉和收获。本文探讨了技术人员如何跳出纯技术的局限,实现更大的职业发展。 ...
[详细]
蜡笔小新 2024-11-14 10:24:10
-
本文详细解析了ASP.NET 2.0中的Callback机制,不仅介绍了基本的使用方法,还深入探讨了其背后的实现原理。通过对比Atlas框架,帮助读者更好地理解和应用这一机制。 ...
[详细]
蜡笔小新 2024-11-14 10:03:15
-
本文介绍了如何在Flex应用程序中实现浏览自定义ArcGIS Server 9.3发布的地图。这是一个基本的入门示例,适用于初学者。 ...
[详细]
蜡笔小新 2024-11-13 14:40:13
-
本文最初发表在Thorben Janssen的Java EE博客上,每周都会分享最新的Java新闻和动态。 ...
[详细]
蜡笔小新 2024-11-12 18:57:13
-
尽管你可能尚未注意到Widget,但正如几年前对RSS的陌生一样,这一概念正逐渐走入大众视野。据美国某权威杂志预测,2007年将是Widget年。本文将详细介绍Widget的定义、功能及其未来发展趋势。 ...
[详细]
蜡笔小新 2024-11-12 18:36:54
-
本文详细介绍了从用户在浏览器中输入一个域名(如www.yy.com)到页面完全展示的整个过程,包括DNS解析、TCP连接、请求响应等多个步骤。 ...
[详细]
蜡笔小新 2024-11-12 18:13:16
-
原文网址:https:www.cnblogs.comysoceanp7476379.html目录1、AOP什么?2、需求3、解决办法1:使用静态代理4 ...
[详细]
蜡笔小新 2024-11-12 14:40:40
-
0x01快速自启动目录快速启动目录自启动方式源于Windows中的一个目录,这个目录一般叫启动或者Startup。位于该目录下的PE文件会在开机后进行自启动 ...
[详细]
蜡笔小新 2024-11-12 11:16:30
-
大类|电阻器_使用Requests、Etree、BeautifulSoup、Pandas和Path库进行数据抓取与处理 | 将指定区域内容保存为HTML和Excel格式 ...
[详细]
蜡笔小新 2024-11-11 19:05:59
-
MySQL下载与安装指南:详细记录常见问题及解决方法 ...
[详细]
蜡笔小新 2024-11-11 18:58:39
-
【实例简介】本文详细介绍了如何在PHP中实现微信支付的退款功能,并提供了订单创建类的完整代码及调用示例。在配置过程中,需确保正确设置相关参数,特别是证书路径应根据项目实际情况进行调整。为了保证系统的安全性,存放证书的目录需要设置为可读权限。值得注意的是,普通支付操作无需证书,但在执行退款操作时必须提供证书。此外,本文还对常见的错误处理和调试技巧进行了说明,帮助开发者快速定位和解决问题。 ...
[详细]
蜡笔小新 2024-11-11 13:17:39
-
在Webdriver中,元素定位是自动化测试的关键环节。本文详细介绍了8种常用的元素定位技术与策略,包括ID、名称、标签名、类名、链接文本、部分链接文本、XPath和CSS选择器。每种方法都有其独特的优势和适用场景,通过合理选择和组合使用,可以显著提高测试脚本的稳定性和效率。此外,文章还探讨了在复杂页面结构中如何灵活运用这些定位技术,以应对各种挑战。 ...
[详细]
蜡笔小新 2024-11-11 11:34:38
-