原生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(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
原生JavaScript实现AJAX、JSONP
相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的. 其实,原生JavaScript实现AJAX并不难,这篇文章将会讲解如何实现简单的AJAX,还有跨域请求JSONP! 一.AJAX AJAX的核心是XMLHttpRequest. 一个完整的AJAX请求一般包括以下步骤: 实例化XMLHttpRequest对象 连接服务器 发送请求 接收响应数据
-
使用jsonp完美解决跨域问题
调用web接口,get请求,发现提示:No 'Access-Control-Allow-Origin' header is present on the requested resource. 这个和安全机制有关,默认不允许跨域调用 处理手段:使用jsonp格式, ajax请求参数dataType:'JSONP'. 复制代码 代码如下: $.ajax({ url: "http://.......", type: 'GET', dataTy
-
JavaScript用JSONP跨域请求数据实例详解
前言 最近因为工作需要,需要把爱词霸的每日一句引入到页面上,爱词霸向外开放了 API, 接口返回 json 数据,为了让页面更轻巧,我没有用 jQuery,而是直接纯 js 写了一段代码: <script type="text/javascript"> function httpGetAsync(theUrl, callback) { xmlHttp = null; if (window.XMLHttpRequest) {// code for IE7, Firefox,
-
深入浅析Jsonp解决ajax跨域问题
一.介绍 最近跨域问题比较多,而且自己刚好也看到这一块,就总结了一下,关于JSONP的东西百度的话东西确实很多,很多人都是复制别人的,如此下去,其实找的资料就那么几份,关键是我还看不懂,可能是能力问题吧,自己经过很多尝试,所以总结了一下,终究还是弄懂了皮毛.注意一点是,这里是用Jsonp解决ajax的跨域问题,具体的实现其实不是ajax. 1.同源策略 浏览器有一个很重要的概念--同源策略(Same-Origin Policy).所谓同源是指,域名,协议,端口相同.不同源的客户端脚本(JavaS
-
原生js的ajax和解决跨域的jsonp(实例讲解)
最近慢慢感觉,学再多框架,库,都不如老老实实先把基础弄扎实了. 不说废话,先上一个用ajax请求下本地的一个.txt文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload =function(){ var oBtn = d
-
使用jsonp实现跨域获取数据实例讲解
js部分 (function(window, document) { 'use strict'; var jsonp = function(url, data, callback) { //1.挂载回调函数 var fnsuffix = Math.random().toString().replace('.', ''); var cbFuncName = 'my_json_cb' + fnsuffix; window[cbFuncName] = callback; //2.将data转换成url
-
原生JS实现ajax与ajax的跨域请求实例
一.原生JS实现ajax 第一步获得XMLHttpRequest对象 第二步:设置状态监听函数 第三步:open一个连接,true是异步请求 第四部:send一个请求,可以发送一个对象和字符串,不需要传递数据发送null 第五步:在监听函数中,判断readyState=4&&status=200表示请求成功 第六步:使用responseText.responseXML接受响应数据,并使用原生JS操作DOM进行显示 var ajax = new XMLHttpRequest(); ajax.
-
ajax前台后台跨域请求处理方式
最近一直在搞公众号前台开发,遇到了ajax跨域请求的问题,像地区的省-市-县三级联动.汽车品牌-车系-车款的三级联动查询等都需要调用外部接口(其他工程项目的接口)完成.下面就分享一下个人解决跨域请求的方案,当然是在后台程序猿大哥的帮助下,我才弄明白了其中的渊源,赶紧记录下来慢慢积累,也希望对大家能有所帮助,还请积极提出意见或建议. 跨域请求需要借助后台代码接收callback回调函数,对json数据进行进一步处理:前台再用ajax请求向服务器发送callback参数,并指定数据格式为jsonp.
-
原生js实现ajax请求和JSONP跨域请求操作示例
本文实例讲述了原生js实现ajax请求和JSONP跨域请求.分享给大家供大家参考,具体如下: 直接上代码: const ajax = (params = {}) => { const nowJson = params.jsonp ? jsonp(params) : json(params); function jsonp(params){ //创建script标签并加入到页面中 var callbackName = params.jsonp; var head = document.getEle
-
AJAX请求以及解决跨域问题详解
目录 AJAX 介绍 一.原生AJAX请求(GET) 二.jQuery AJAX请求(GET 和POST) 三.跨域问题的解决 四.其他解决跨域问题方法 总结 AJAX 介绍 AJAX其实就是异步的js和xml 通过ajax可以在浏览器中发送异步请求. 最大优势:无刷新获取数据 优点: 1.可以无需刷新页面与服务器进行通信 2.允许根据用户事件更新部分页面内容 当然也存在其缺点问题:比如跨域问题等! 一.原生AJAX请求(GET) 由于get和post请求类似,原生代码相比jQuery复杂一些:
-
使用HTML5中postMessage知识点解决Ajax中POST跨域问题
由于同源策略的限制,Javascript存在跨域通信的问题,典型的跨域问题有iframe与父级的通信等.常规的几种解决方法: (1) document.domain+iframe: (2) 动态创建script: (3) iframe+location.hash: (4) flash. postMessage是HTML5为解决js跨域问题而引入的新的API,允许多个iframe/window跨域通信. HTML5中提供了在网页文档之间相互接收与发送信息的功能.使用这个功能,只要获取到网页所在窗口
-
vue.js使用代理和使用Nginx来解决跨域的问题
使用Nginx 反向代理解决跨域问题(vue.js使用代理去掉vue.js因为跨域而触发的options请求) 我们的项目还是需要node.js作为容器的 一.Windows 下安装Nginx (官网下载稳定版http://nginx.org/en/download.html) 二.修改config里的nginx.conf文件的server server { listen 8899;// 你的端口 server_name localhost; root C:/ZOBSF_F/dist;//你打包
-
js前端解决跨域的八种实现方案
由于同源策略的限制,满足同源的脚本才可以获取资源.虽然这样有助于保障网络安全,但另一方面也限制了资源的使用. 那么如何实现跨域呢,以下是实现跨域的一些方法. 一.jsonp跨域 原理:script标签引入js文件不受跨域影响.不仅如此,带src属性的标签都不受同源策略的影响. 正是基于这个特性,我们通过script标签的src属性加载资源,数据放在src属性指向的服务器上,使用json格式. 由于我们无法判断script的src的加载状态,并不知道数据有没有获取完成,所以事先会定义好处理函数.服
-
Ajax解决跨域之设置CORS响应头实现跨域案例详解
1.设置CORS响应头实现跨域 跨源资源共享(CORS) 1.1 什么是CORS CORS(Cross-Origin Resource Sharing),跨域资源共享.CORS 是官方的跨域解决方 案,它的特点是不需要在客户端做任何特殊的操作,完全在服务器中进行处理,支持 get 和 post 请求.跨域资源共享标准新增了一组 HTTP 首部字段,允许服务器声明哪些 源站通过浏览器有权限访问哪些资源 1.2 CORS 怎么工作的? CORS 是通过设置一个响应头来告诉浏览器,该请求允许跨域,浏览