原生JS实现ajax与ajax的跨域请求实例


Posted in Javascript onDecember 01, 2017

一、原生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属性请求后台数据

<scriptsrc="http://127.0.0.1/json.php"type="text/javascript"charset="utf-8"></script>

②由于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条的②③步

以上这篇原生JS实现ajax与ajax的跨域请求实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 获取LI里的内容
Dec 17 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
Sep 19 Javascript
你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用
Apr 23 Javascript
jQuery中$.fn的用法示例介绍
Nov 05 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
Dec 24 Javascript
jquery获取checkbox的值并post提交
Jan 14 Javascript
javascript中的Base64、UTF8编码与解码详解
Mar 18 Javascript
解决js图片加载时出现404的问题
Nov 30 Javascript
jQuery基本选择器和层次选择器学习使用
Feb 27 Javascript
JQuery中Ajax的操作完整例子
Mar 07 Javascript
vue基于v-charts封装双向条形图的实现代码
Dec 09 Javascript
Vue实现移动端拖拽交换位置
Jul 29 Javascript
浅谈angular4实际项目搭建总结
Dec 01 #Javascript
JS实现的ajax和同源策略(实例讲解)
Dec 01 #Javascript
微信小程序表单验证功能完整实例
Dec 01 #Javascript
PHP自动加载autoload和命名空间的应用小结
Dec 01 #Javascript
利用jquery如何从json中读取数据追加到html中
Dec 01 #jQuery
javascript修改浏览器title方法 JS动态修改浏览器标题
Nov 30 #Javascript
vue组件发布到npm简单步骤
Nov 30 #Javascript
You might like
PHP4在Windows2000下的安装
2006/10/09 PHP
php实现高效获取图片尺寸的方法
2014/12/12 PHP
常用参考资料(手册)下载或者链接
2006/07/22 Javascript
List the Stored Procedures in a SQL Server database
2007/06/20 Javascript
jQuery+CSS 实现的超Sexy下拉菜单
2010/01/17 Javascript
JavaScript将页面表格导出为Excel的具体实现
2013/12/27 Javascript
JS实现根据出生年月计算年龄
2014/01/10 Javascript
基于javascript html5实现多文件上传
2016/03/03 Javascript
原生js实现百叶窗效果及原理介绍
2016/04/12 Javascript
动态加载js、css的实例代码
2016/05/26 Javascript
AngularJS集合数据遍历显示的实例
2017/12/27 Javascript
element-ui 表格实现单元格可编辑的示例
2018/02/26 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
2018/08/09 Javascript
微信小程序功能之全屏滚动效果的实现代码
2018/11/22 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
2019/03/11 Javascript
微信小程序实现图片压缩
2019/12/03 Javascript
原生javascript的ajax请求及后台PHP响应操作示例
2020/02/24 Javascript
python使用PyGame绘制图像并保存为图片文件的方法
2015/04/24 Python
Python 查看文件的读写权限方法
2018/01/23 Python
python删除某个字符
2018/03/19 Python
详解将Python程序(.py)转换为Windows可执行文件(.exe)
2019/07/19 Python
详解Django模版中加载静态文件配置方法
2019/07/21 Python
python 的 scapy库,实现网卡收发包的例子
2019/07/23 Python
Python异常原理及异常捕捉实现过程解析
2020/03/25 Python
美国眼镜网:GlassesUSA
2017/09/07 全球购物
高中生学习总结的自我评价范文
2013/10/13 职场文书
运动会开幕式邀请函
2014/02/03 职场文书
学生会招新策划书
2014/02/14 职场文书
西式结婚主持词
2014/03/14 职场文书
学校节能宣传周活动总结
2014/07/09 职场文书
临时用工协议书范本
2014/10/29 职场文书
应届毕业生求职信范文
2015/03/19 职场文书
美德少年主要事迹材料
2015/11/04 职场文书
2016年学习贯彻十八届五中全会精神心得体会
2016/01/05 职场文书
严以用权学习心得体会
2016/01/12 职场文书
英镑符号 £
2022/02/17 杂记