前端使用ajax进行异步处理时的跨域问题

最新推荐文章于 2024-04-12 22:54:32 发布

柒暖微笑zp

最新推荐文章于 2024-04-12 22:54:32 发布

阅读量486

点赞数 2

本文链接：https://blog.csdn.net/zylovezp/article/details/77395652

版权

Ajax，即异步javascript和XML。ajax允许客户端的javascript向服务器发送和接收数据，并且不需要重新刷新web页面，这样的好处是在提升了用户体验的同时还减少了数据的大量缓存，所以在前端经常使用。下面是本人的一些总结，如有问题，欢迎探讨。

1 在使用ajax请求网址时，如果是局域网内，则是通过XMLHTTPRequest（）来发送请求，这个一般比较简单。

2 ajax最关键的问题在于跨域问题，解决跨域问题，一般有三种方法，这里讲的是jsonp的方式来进行跨域。用jsonp实现跨域，则会自动创建一个script的标签，创建src属性，生成全局的函数，函数的名字为jquery后面加一堆随机数，这个我们可以在网址中看到。

首先需要在ajax中，把dataType改为：jsonp,并且需要定义返回内容，即：jsonpCallback:'callback',(一般浏览器默认为callback。

然后在url中，将api接口地址后面加上&dtype=jsonp,告诉服务器你使用jsonp方式进行跨域，这样基本就可以实现跨域了。

举例如下，这是一个很简单的点击事件，通过点击，获取天气的某些信息，这里只是用简单的程序进行测试，证明跨域问题已经解决。程序中用jquery对ajax进行了封装。需要添加jquery文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>封装原生Ajax</title>
    <style type="text/css">
        #ems{
            position: absolute;
            left: 50%;
            width: 400px;
            margin-left: -200px;
            background: lightgreen;
            text-align: center;
            min-height: 50px;
            height: 500px;
            overflow-x: hidden;
            overflow-y: scroll;
        }
    </style>
</head>
<body>
<div id="ems">
    <div>
        <input type="button" value="查询" id="btn">
    </div>
</div>
<script src="jquery-1.11.1.js"></script>
<script type="text/javascript">
    $(function(){
        $('#btn').click(function () {
            $.ajax({
                type:'get',
                async:true,
                url:'http://cdn.weather.hao.360.cn/api_weather_info.php?app=hao360&code=101110101&dtype=jsonp',
                dataType:'jsonp',
                jsonpCallback:'callback',
                success:function (data) {
                    document.write(data.pubdate+'<br />'+data.pubtime+'<br />'+data.time);
                },error:function (){
                    alert('fail');
                }
            });
        });
    });


</script>
</body>
</html>

页面显示如下，点击查询后出现结果。

需要注意的一点是：一定要处于联网状态。

柒暖微笑zp

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端使用ajax进行异步处理时的跨域问题

Ajax，即异步javascript和XML。ajax允许客户端的javascript向服务器发送和接收数据，并且不需要重新刷新web页面，这样的好处是在提升了用户体验的同时还减少了数据的大量缓存，所以在前端经常使用。下面是本人的一些总结，如有问题，欢迎探讨。1 在使用ajax请求网址时，如果是局域网内，则是通过XMLHTTPRequest（）来发送请求，这个一般比较简单。2 ajax最关
复制链接

扫一扫