原生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 相关文章推荐
Prototype使用指南之range.js
Jan 10 Javascript
在html页面上拖放移动标签
Jan 08 Javascript
Javascript学习笔记2 函数
Jan 11 Javascript
Javascript中的相等与不等运算
Apr 25 Javascript
收集的一些Array及String原型对象的扩展实现代码
Dec 05 Javascript
微信js-sdk地理位置接口用法示例
Oct 12 Javascript
Node.js静态服务器的实现方法
Feb 28 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
May 31 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
Dec 13 Javascript
vue实现将一个数组内的相同数据进行合并
Nov 07 Javascript
vue多个元素的样式选择器问题
Nov 29 Javascript
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
浅谈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 读取Postgresql中的数组
2013/04/14 PHP
PHP自动识别字符集并完成转码详解
2013/08/02 PHP
thinkphp文件引用与分支结构用法实例
2014/11/26 PHP
php函数传值的引用传递注意事项分析
2016/06/25 PHP
Mozilla 表达式 __noSuchMethod__
2009/04/05 Javascript
JavaScript 变量作用域分析
2011/07/04 Javascript
jquery中:input和input的区别分析
2011/07/13 Javascript
Jquery图片滚动与幻灯片的实例代码
2013/04/08 Javascript
location对象的属性和方法应用(解析URL)
2013/04/12 Javascript
自己封装的javascript事件队列函数版
2014/06/12 Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
2015/11/30 Javascript
jquery中键盘事件小结
2016/02/24 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
2016/06/06 Javascript
js模拟微博发布消息
2017/02/23 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
2017/06/30 Javascript
Layui事件监听的实现(表单和数据表格)
2019/10/17 Javascript
Vue extend的基本用法(实例详解)
2019/12/09 Javascript
vue 检测用户上传图片宽高的方法
2020/02/06 Javascript
Python使用微信SDK实现的微信支付功能示例
2017/06/30 Python
Python matplotlib画图实例之绘制拥有彩条的图表
2017/12/28 Python
Python之文字转图片方法
2018/05/10 Python
Pycharm以root权限运行脚本的方法
2019/01/19 Python
浅谈优化Django ORM中的性能问题
2020/07/09 Python
Pycharm Plugins加载失败问题解决方案
2020/11/28 Python
python+selenium自动化实战携带cookies模拟登陆微博
2021/01/19 Python
澳大利亚电子产品购物网站:Dick Smith
2017/02/02 全球购物
小学生防溺水广播稿
2014/01/12 职场文书
行政专员求职信范文
2014/05/03 职场文书
机票销售员态度不好检讨书
2014/09/27 职场文书
党员批评与自我批评材料
2014/10/14 职场文书
教师个人年终总结
2015/02/11 职场文书
互联网创业商业模式以及赚钱法则有哪些?
2019/10/12 职场文书
CSS实现多个元素在盒子内两端对齐效果
2021/03/30 HTML / CSS
python实现黄金分割法的示例代码
2021/04/28 Python
Python 如何解决稀疏矩阵运算
2021/05/26 Python
python中的plt.cm.Paired用法说明
2021/05/31 Python