DDR爱好者之家

原生JS实现ajax与ajax的跨域请求实例
站长资源 2024/11/26 佚名
36 1538
DDR爱好者之家 Design By 杰米

一、原生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="/UploadFiles/2021-04-02/json.php">


②由于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的跨域请求实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米