原生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 相关文章推荐
多个表单中如何获得这个文件上传的网址实现js代码
Mar 25 Javascript
js实现倒计时时钟的示例代码
Dec 17 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
Apr 21 Javascript
jQuery filter函数使用方法
May 19 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
Feb 02 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
JavaScript中undefined和null的区别
May 03 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
Sep 30 Javascript
使用ECharts实现状态区间图
Oct 25 Javascript
react项目如何使用iconfont的方法步骤
Mar 13 Javascript
vue-cli配置全局sass、less变量的方法
Jun 06 Javascript
vue中keep-alive、activated的探讨和使用详解
Jul 26 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
PHP中常用的输出函数总结
2014/09/22 PHP
PHP中魔术变量__METHOD__与__FUNCTION__的区别
2014/09/29 PHP
PHP使用CURL实现多线程抓取网页
2015/04/30 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
PHP 命名空间和自动加载原理与用法实例分析
2020/04/29 PHP
js event事件的传递与冒泡处理
2009/12/06 Javascript
JS中处理与当前时间间隔的函数代码
2012/05/23 Javascript
jquery 选择器引擎sizzle浅析
2013/02/06 Javascript
js 异步操作回调函数如何控制执行顺序
2013/12/24 Javascript
javascript实现获取字符串hash值
2015/05/10 Javascript
JavaScript学习笔记之取数组中最大值和最小值
2016/03/23 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
2016/09/02 Javascript
AngularJS实现按钮提示与点击变色效果
2016/09/07 Javascript
jQuery查找节点并获取节点属性的方法
2016/09/09 Javascript
canvas实现绘制吃豆鱼效果
2017/01/12 Javascript
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
2017/06/16 Javascript
Vue 父子组件的数据传递、修改和更新方法
2018/03/01 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
2018/08/28 Javascript
判断iOS、Android以及PC端的示例代码
2018/11/15 Javascript
JavaScript实现简单计算器功能
2019/12/19 Javascript
javascript利用canvas实现鼠标拖拽功能
2020/07/23 Javascript
Python自动调用IE打开某个网站的方法
2015/06/03 Python
python实现拼图小游戏
2020/02/22 Python
python输入一个水仙花数(三位数) 输出百位十位个位实例
2020/05/03 Python
Python 测试框架unittest和pytest的优劣
2020/09/26 Python
selenium与xpath之获取指定位置的元素的实现
2021/01/26 Python
英国时尚饰品和发饰购物网站:Claire’s
2017/07/04 全球购物
Lulu Guinness露露·吉尼斯官网:红唇包
2019/02/03 全球购物
AJAX的全称是什么
2012/11/06 面试题
高二化学教学反思
2014/01/30 职场文书
面试后感谢信
2014/02/01 职场文书
幼儿园优秀教师事迹
2014/02/13 职场文书
《菜园里》教学反思
2014/04/17 职场文书
2015年民主评议党员工作总结
2015/05/19 职场文书
小学一年级数学教学反思
2016/02/16 职场文书
通过Qt连接OpenGauss数据库的详细教程
2021/06/23 PostgreSQL