AJAX跨域请求数据原理与案例

最新推荐文章于 2022-05-18 12:45:50 发布

转载最新推荐文章于 2022-05-18 12:45:50 发布 · 309 阅读

杂谈同时被 2 个专栏收录

157 篇文章

订阅专栏

接口类

28 篇文章

订阅专栏

本文介绍了如何使用AJAX和JSONP实现跨域数据请求，包括客户端和服务器端的具体实现方式，并提供了示例代码，同时指出了使用这种方法的注意事项。

1、如何通过AJAX跨域请求数据

AJAX通过jsonp来实现跨域请求数据，通过设置dataType（jquery）为jsonp即可。

2、AJAX如何通过jsonp实现跨域（来源于其他网站资料）

JSONP(JSON with Padding)是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。

由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。

3、通过简单案例AJAX（jquery）实现跨域请求

客户端AJAX（jquery）源码：

$.ajax({
    type : "get",
    async:false,
    url : "http://192.168.0.22:88/test.php",
    dataType : "jsonp",
    jsonp: "callbackparam",                    //服务端用于接收callback调用的function名的参数
    jsonpCallback:"success_jsonpCallback",     //callback的function名称
    success : success,
        error: function(XMLHttpRequest, textStatus, errorThrown){
        alert(XMLHttpRequest+"<br/>"+textStatus+"<br/>"+errorThrown);
    }
    function success(data){
        </span>alert(data);
    }
});

服务器端源码：

<?php
$a=array();
$a["ceshishuju"]='1';
echo $_GET['callbackparam'] . '(' .json_encode($a) . ')';</span>
?>

4、通过AJAX跨域请求注意事项

（1）AJAX通过jsonp发送请求的方式都是get的方式，无论把客户端的type修改为get或者post，服务器段的程序只能通过get的形式才能获取到数据。

（2）服务器端需要执行回调函数才能获取数据，不然js会报错。

（3）通过AJAX传递数据的安全性比较低，如果传递密码之类的数据需慎重。