Ajax和JSONP跨域

最新推荐文章于 2022-12-02 20:17:17 发布

柏舟与洲

最新推荐文章于 2022-12-02 20:17:17 发布

阅读量151

点赞数

分类专栏： JavaScript和jQuery学习文章标签： ajax

本文链接：https://blog.csdn.net/weixin_45258054/article/details/106025839

版权

JavaScript和jQuery学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

AJAX技术简介

ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

前端中AJAX技术实现其实是由内置构造函数XMLHttpRequest构造函数实现的。但是在工作当中一般都是用JQ，因为JQ将原生AJAX技术进行封装。

简单使用

<body>
    <h1>ajax技术</h1>
    <button type="button">单击我向服务器发请求</button>
</body>
</html>
<script type="text/javascript">
    //给按钮绑定单机事件
    $("button").click(function(){
        $.get("./data.txt",  //向服务器端请求的地址
        {					 //向服务器端额外传递的数据
            "name": "小明",
            'ps': 123
        }, function (data) { //  服务器响应成功执行一次，data:就是服务器端响应数据
            //修改H1标题
            $("h1").html(data);
        });
    })
</script>

post请求

    //发送post请求
    $("#cur1").click(function (){
        $.post("/hello", {"color":"red"},function (data) {
            console.log("fff");
            //在页面没有重新加载情况下实现页面局部跟新
            $("h1").html(data);
        });
    })

ajax请求

    //发送post或者get请求
    $("#cur2").click(function (){
        //向服务器端发起POST请求
        //当前这个方法可以发起GET、POST，请求参数配置务必是一个JSON数据格式
        $.ajax({
            // 请求网址
            "url": "/hello",
            //请求方式既可以GET、POST
            "type": "get",
            //给服务器额外传递数据，必须是json
            "data": {
                "a": 1
            },
            //回调函数：可以接受服务器数据
            "success": function (data) {
                //当服务器响应成功的时候会立即执行一次
                $("h1").html(data);
            }
        });
    })

JSONP跨域

当用户发起多次请求的时候，如果协议、域名、端口号不同，就称之为跨域。

AJAX技术不能跨域请求数据，因为ajax遵守同源策略。但是JSONP数据格式可以。

实现原理：

利用script标签src属性（本身就可以跨域请求数据）
利用的是将一个函数执行部分放置另外一个服务器上面

跨域拉去数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <select></select>
</body>
</html>
<script>
    var select = document.querySelector("select");
    //声明一个同名的函数,远程调用了此函数
    function jQuery468252(arr) {
        // 遍历数组
        for (var i = 0;i < arr.length;i++){
           var op = document.createElement("option");
           op.innerHTML = arr[i].name;
           select.appendChild(op);
        }
    }
</script>
<!--将京东服务器调用部分引入-->
<script src="https://cds.3.cn/hotwords/get?cate=1318&callback=jQuery468252&_=1589020233108"></script>

柏舟与洲

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax和JSONP跨域

目录AJAX技术简介JSONP跨域AJAX技术简介ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。可以在不重新加载整个网页的情况下，对网页的某部分进行更新。前端中AJAX技术实现其实是由内置构造函数XMLHttpRequest构造函数实现的。但是在工作当中一般都是用JQ，因为JQ将原生AJAX技术进行封装。简单使用<body> <h1>ajax技术&l
复制链接

扫一扫

专栏目录