原生js的ajax和解决跨域的jsonp(实例讲解)
更新时间：2017年10月16日 10:13:49 作者：王洪德
下面小编就为大家带来一篇原生js的ajax和解决跨域的jsonp(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
最近慢慢感觉，学再多框架，库，都不如老老实实先把基础弄扎实了。
不说废话，先上一个用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文件。
代码比较简单，加上注释，相信很容易就看得懂。
但是工作中我们经常会请求其他域下的资源（因为同源策略），这个时候就遇到了跨域（协议，端口，域名任何一个不同就算是跨域）。
解决跨域的一种常用办法就是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>
执行效果如下：
代码也相对比较简单，加上代码的注释，一定很容易看懂，这就是解决跨域的一种常用办法，其他有反向代理，CORS啊等等，等我学好再整理出来。
以上这篇原生js的ajax和解决跨域的jsonp(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了js中隐藏/显示密码的Zepto的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧2017-04-04
这篇文章主要为大家详细介绍了HTML5 Canvas实现圆形时钟简易教程，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
在表单提交前经常遇到表单验证问题而常用的方法有以下两种.2009-11-11
这篇文章主要介绍了 JavaScript 深层克隆对象的相关资料,并附实例代码，帮助大家学习参考这部分知识，需要的朋友可以参考下2016-11-11
这篇文章主要介绍了uniapp使用uni-file-picker实现上传功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2024-07-07
这篇文章主要给大家介绍了关于JS如何将指定的某个字符全部转换为其他字符的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
JS解决Date对象在IOS中的“大坑” 以及时间格式兼容问题
这篇文章主要介绍了JS解决Date对象在IOS中的“大坑” 以及时间格式兼容问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
用javascript实现XML的解析的实现代码，需要的朋友可以参考下。2009-11-11
今天，小子再提供一种使用Flash进行跨域操作的方法。众所周之，其实Flash的跨域操作也是有限制的，不过，Flash的跨域配置比简单，只需要在站点根目录下放置crossdomain.xml即可。2010-12-12
在编程的世界里,性能优化始终是一个重要的话题,今天,我们将一起来实现一个实用的记忆函数,感兴趣的小伙伴可以跟随小编一起学习一2024-11-11
最新评论