本文主要为大家分享一篇原生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文件中返回：
echocallback({$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){}
当然后台也可以随便返回一个回调函数名。
echocallback({$str});

前台只要请求成功，就会自动调用这个函数。类似于第2条的②③步
相关推荐：
ajax的跨域访问-两种有效的解决方法介绍_php教程
如何用原生js实现ajax的get post请求
angularjs实现ajax请求的方法
以上就是原生js实现ajax与ajax的跨域请求的详细内容。