ajax是如何实现跨域的,在JS中如何实现ajax与ajax的跨域请求
下面小编就为大家分享一篇原生JS实现ajax与ajax的跨域请求实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
一、原生JS实现ajax
第一步获得XMLHttpRequest对象
第二步:设置状态监听函数
第三步:open一个连接,true是异步请求
第四部:send一个请求,可以发送一个对象和字符串,不需要传递数据发送null
第五步:在监听函数中,判断readyState=4&&status=200表示请求成功
第六步:使用responseText、responseXML接受响应数据,并使用原生JS操作DOM进行显示var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function(){
console.log(ajax.readyState);
console.log(ajax.status);
if(ajax.readyState==4 && ajax.status==200){
console.log(ajax.responseText);
console.log(ajax.responseXML);//返回不是XML,显示null
console.log(JSON.parse(ajax.responseText));
console.log(eval("("+ajax.responseText+")"));
}
}
ajax.open("GET","h51701.json",true);
ajax.send(null);
二、ajax的跨域请求
[跨域请求处理]由于在JS中存在同源策略。当请求不同协议名,不同端口号,不同主机名下面的文件时,将会违背同源策略,无法请求成功!需要进行跨域处理!
1、后台PHP进行设置:
前台无需任何设置,在后台被请求的PHP文件中,写入一条header。header("Access-Control-Allow-Origin:*");//表示允许哪些域名请求这个PHP文件,*表示所有域名都允许
2、使用src属性+JSONP实现跨域
①拥有src属性的标签自带跨域功能!所以可以使用script标签的src属性请求后台数据
②由于src在加载数据成功后,后直接将加载内容放入到script标签中
所以,后台直接返回JSON字符串将不能在script标签中解析
因此,后台应该返回给前台一个回到函数名,并将JSON字符串作为参数传入
后台PHP文件中返回:echo"callBack({$str})";
③前台接收到返回的回到函数,将直接在script标签中调用。因此需要声明这样一个回调函数,作为请求成功的回调。function callBack(data){
alert("请求成功");
console.log(data);
}
3、JQuery的ajax实现JSONP
① 在ajax请求时,设置dataType为"json"
② 后套返回时,依然需要返回回调函数。但是,ajax在发送请求时会默认使用get请求将回到函数名发给后台,后台可以使用$_GET['callback']取出回调函数名:echo"{$_GET['callback']}({$str})";
③后台返回以后,ajax依然可以用success作为成功的回调函数:success:function(data){}
当然后台也可以随便返回一个回调函数名。echo"callBack({$str})";
前台只要请求成功,就会自动调用这个函数。类似于第2条的②③步
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
ajax是如何实现跨域的,在JS中如何实现ajax与ajax的跨域请求相关推荐
- js中奇怪的问题 同步ajax,modal遮罩层
奇怪问题一 今天有一段js执行的时候出现了问题 $.ajax({ ..., async:false, ... }); $('#myModal').modal('hide'); loadcurrentp ...
- 解决Word跨页表格在WPS中显示不全(转)
解决Word跨页表格在WPS中显示不全(转) Word跨页表格在WPS中会出现显示不全的现象.根据DOC文档中表格的不同(行列分布规则的表格:行列分布不规则的表格),解决此类问题要分两种情况: 一.处 ...
- 本地跨域处理ajax,Node.js配合node-http-proxy解决本地开发ajax跨域问题
情景: 前后端分离,本地前端开发调用接口会有跨域问题,一般有以下3种解决方法: 1. 后端接口打包到本地运行(缺点:每次后端更新都要去测试服下一个更新包,还要在本地搭建java运行环境,麻烦) 2. ...
- Ajax 跨域难题 - 原生 JS 和 jQuery 的实现对比
讲解顺序: AJAX 的概念及由来 JS 和 jQuery 中的 ajax 浏览器机制 AJAX 跨域 AJAX 的概念 在讲解 AJAX 的概念之前,我先提一个问题. 这是一个典型的 B/S 模式. ...
- js中各种跨域问题实战小结
什么是跨域?为什么要实现跨域呢? 这是因为JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.也就是说只能访问同一个域中的资源.我觉得这就有必要了解下javascript中的同源策略 ...
- js中的几种跨域方法
js跨域指的是通过js在不同域之间进行数据传输或通讯,例如ajax通信技术,或者通过js获取页面中iframe的数据.只要有任意一个不同,则协议.域名.端口中有任意一个不同,则彼此成为不同的域. 请注 ...
- js中几种实用的跨域方法原理详解
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- vue php axios 跨域,在vue项目中,使用axios跨域处理
下面我就为大家分享一篇在vue项目中,使用axios跨域处理,具有很好的参考价值,希望对大家有所帮助. 跨域,一个很是让人尴尬的问题,有些人可以在后台中设置请求头,但是很多前端并不具备后台的知识,并无 ...
- vue读取服务器文件跨域,新版vue-cli模板下本地开发环境使用node服务器跨域的方法...
背景 我们都知道浏览器有一个既核心也最基本的安全功能,即同源策略.同源分别是:协议,域名,端口.如果浏览器访问服务器不同源的话,就会访问不到数据.那开发中常常访问的服务器不同源,那么可以借助一个服务器 ...
最新文章
- 矩阵的卷积核运算(一个简单小例子的讲解)深度学习
- python rsa 公钥解密_python利用rsa库做公钥解密的方法教程
- layui树形父子不关联_DP专题7 | 没有上司的舞会 洛谷1352(树形DP)
- golang 获取文件行数
- Attempted relative import in non-package
- oracle12c多个pdb,Oracle 12c 多租户专题|12cR2中PDB内存资源管理
- php怎么随机显示6个数,PHP里一个12成员的数组,随机挑出6/3/3个成员(不重复),然后重新赋值,有什么简洁的办法实现?...
- 怎么计算信息完整度_德阳冻货运镖怎么计算费用
- java static 修饰变量吗_Java面试 - static 修饰的变量和方法有哪些特点?
- shell日志重定向到null
- app个人健康管理系统开源_开源会促进心理健康吗?
- Vue之webpack之Babel
- 漫谈 Clustering (番外篇): Vector Quantization
- sql prompt linux,sqlplus中灵活使用sqlprompt提示符
- 工大瑞普 NP-ISIS综合实验
- 网站流量可视化分析--浏览量分析、退出量分析
- php公众号模板在哪,微信公众号模板哪里找?公众号如何套用模板?
- 直观理解偏导数、方向导数和法向量和梯度
- 数据分析,机器学习学习用数据集[1]-搜狗新闻行业分类数据集(已分好训练测试和验证集)
- 智工教育:公务员必考的知识点内容