欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

在JS中如何实现ajax与ajax的跨域请求

程序员文章站 2022-04-27 12:21:21
...
下面小编就为大家分享一篇原生JS实现ajax与ajax的跨域请求实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

一、原生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条的②③步

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在javascript中如何实现异步图片上传

在jquery中如何实现隐藏元素功能

在jQuery中如何实现验证表单密码一致性

在JS中有关数组函数如何使用

在微信小程序中有关如何使用picker组件

以上就是在JS中如何实现ajax与ajax的跨域请求的详细内容,更多请关注其它相关文章!