原生JS实现Ajax及跨域请求完整指南

原生JS实现Ajax完整流程

一、原生JS实现ajax

第一步：获取XMLHttpRequest对象。

第二步：配置状态监听函数，用于处理请求过程中的状态变化。

第三步：调用open方法建立连接，参数true表示采用异步请求方式。

第四步：调用send方法发送请求。该方法可接收对象或字符串参数，若无需传递数据，则传入null。

第五步：在监听函数中判断条件，当readyState等于4且status等于200时，表示请求成功。

第六步：通过responseText或responseXML属性获取响应数据，并利用原生JavaScript操作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跨域请求解决方案

二、ajax的跨域请求

[跨域请求处理]由于JavaScript存在同源策略限制，当请求不同协议、不同端口号或不同主机名下的资源时，会违反同源策略导致请求失败，因此必须进行跨域处理。

1、后台PHP进行设置：

前台无需额外配置，只需在被请求的PHP文件后端写入一条header语句即可。

header("Access-Control-Allow-Origin:*");//表示允许哪些域名请求这个PHP文件，*表示所有域名都允许

2、使用src属性结合JSONP实现跨域

① 具备src属性的HTML标签天然支持跨域，因此可以利用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的跨域请求实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持本站。