原生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 相关文章推荐
jQuery语法总结和注意事项小结
Nov 11 Javascript
ScrollDown的基本操作示例
Jun 09 Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
Aug 29 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
May 03 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
May 10 Javascript
实现easyui的datagrid导出为excel的示例代码
Nov 10 Javascript
vue 自定义提示框(Toast)组件的实现代码
Aug 17 Javascript
javascript中关于类型判断的一些疑惑小结
Oct 14 Javascript
关于微信小程序map组件z-index的层级问题分析
Jul 09 Javascript
微信小程序制作扭蛋机代码实例
Sep 24 Javascript
如何在JS文件中获取Vue组件
Sep 16 Javascript
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 Vue.js
浅谈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
PHP中,文件上传
2006/12/06 PHP
谨慎使用PHP的引用原因分析
2012/09/06 PHP
PHP关联链接常用代码
2012/11/05 PHP
Laravel框架数据库CURD操作、连贯操作总结
2014/09/03 PHP
thinkphp隐藏index.php/home并允许访问其他模块的实现方法
2016/10/13 PHP
PHP解密支付宝小程序的加密数据、手机号的示例代码
2021/02/26 PHP
点击广告后才能获得下载地址
2006/10/26 Javascript
用JS将搜索的关键字高亮显示实现代码
2013/11/08 Javascript
javascript制作坦克大战全纪录(2)
2014/11/27 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
2015/08/31 Javascript
IONIC自定义subheader的最佳解决方案
2016/09/22 Javascript
Vue.js组件tabs实现选项卡切换效果
2016/12/01 Javascript
jQuery简易时光轴实现方法示例
2017/03/13 Javascript
Node.js搭建小程序后台服务
2018/01/03 Javascript
nodejs acl的用户权限管理详解
2018/03/14 NodeJs
jQuery简单判断值是否存在于数组中的方法示例
2018/04/17 jQuery
原生js实现拖拽功能基本思路详解
2018/04/18 Javascript
JS中DOM元素的attribute与property属性示例详解
2018/09/04 Javascript
vue打开其他项目页面并传入数据详解
2020/11/25 Vue.js
使用scrapy实现爬网站例子和实现网络爬虫(蜘蛛)的步骤
2014/01/23 Python
Python中用altzone()方法处理时区的教程
2015/05/22 Python
Python栈类实例分析
2015/06/15 Python
Python request设置HTTPS代理代码解析
2018/02/12 Python
Python 3.x 判断 dict 是否包含某键值的实例讲解
2018/07/06 Python
面向新手解析python Beautiful Soup基本用法
2020/07/11 Python
详解用 python-docx 创建浮动图片
2021/01/24 Python
html5 Canvas画图教程(1)—画图的基本常识
2013/01/09 HTML / CSS
HTML5 HTMLCollection和NodeList的区别详解
2020/04/29 HTML / CSS
某公司面试题
2012/03/05 面试题
会计与审计专业大专生求职信
2013/10/03 职场文书
员工自我鉴定范文
2013/10/06 职场文书
医药大学生求职简历的自我评价
2013/10/17 职场文书
个人工作表现评价材料
2014/09/21 职场文书
2015年环境监察工作总结
2015/07/23 职场文书
班主任工作经验交流会总结
2015/11/02 职场文书
详解Java线程池是如何重复利用空闲线程的
2021/06/26 Java/Android