原生JS如何实现ajax与ajax的跨域请求实例
这篇文章将为大家详细讲解有关原生JS如何实现ajax与ajax的跨域请求实例,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
创新互联建站主营克拉玛依网站建设的网络公司,主营网站建设方案,app软件开发,克拉玛依h5小程序开发搭建,克拉玛依网站营销推广欢迎克拉玛依等地区企业咨询
什么是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","h61701.json",true); ajax.send(null);
二、ajax的跨域请求
[跨域请求处理]由于在JS中存在同源策略。当请求不同协议名,不同端口号,不同主机名下面的文件时,将会违背同源策略,无法请求成功!需要进行跨域处理!
1、后台PHP进行设置:
前台无需任何设置,在后台被请求的PHP文件中,写入一条header。
header("Access-Control-Allow-Origin:*");//表示允许哪些域名请求这个PHP文件,*表示所有域名都允许
2、使用src属性+JSONP实现跨域
①拥有src属性的标签自带跨域功能!所以可以使用script标签的src属性请求后台数据
②由于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})";
关于“原生JS如何实现ajax与ajax的跨域请求实例”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
文章名称:原生JS如何实现ajax与ajax的跨域请求实例
网页URL:http://myzitong.com/article/googcs.html