26-跨域_html-js-css

1.使用JQuery实现文件上传

1.定义ui结构
2.验证是否选择了文件
3.向FormData中追加文件
4.使用jquery发起上传文件的请求

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="./js/jquery.js">script>
head>
<body>
    <input type="file" id="file1">
    <button id="btn">上传文件button>

    <br>
    <img src="./loading.gif" style="display: none;" id="loading" alt="">
    


    <script>
    $(function(){
        
        // 监听ajax请求被发起了  会监听当前页面中所有的ajax请求
        $(document).ajaxStart(function(){
            $('#loading').show()
        })



        $(document).ajaxStop(function(){
            $('#loading').hide()
        })



        $('#btn').on('click',function(){
            var files = $("#file1")[0].files;
            if(files.length <= 0){
                return alert('请选择文件后再上传');
            }

            // 追加到FormData中
            var fd = new FormData();
            fd.append('avatar',files[0]);


            // 发起JQuery的ajax请求   上传文件
            $.ajax({
                method:'POST',
                url:'http://www.liulongbin.top:3006/api/upload/avatar',
                data:fd,
                // 不修改Content-Type属性  使用FormData默认的Content-Type
                contentType:false,
                // 不对FormData中的数据进行url编码，而是将FormData数据原样发送到服务器
                processData:false,
                success:function(res){
                     console.log(res)
                }
            })
        })
    })


    script>
body>
html>

2.axios

网址：http://www.axios-js.com/
Axios是专注于网络数据请求的库
相比于原生的XMLHttpRequest对象，axiios简单易用
相比于JQuery,axios更加轻量化，只专注于网络请求
axios发起GET请求

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 上面的请求也可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

axios发起Post请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

直接使用axios发送请求

// 发送 POST 请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="https://unpkg.com/axios/dist/axios.min.js">script>
    
head>
<body>
    
    <button id="btn1">发起GET请求button>
    <button id="btn2">发起Post请求button>
    <button id="btn3">直接使用axios发起GET请求button>
    <button id="btn4">直接使用axios发起Post请求button>

    <script>
      
      document.querySelector("#btn3").addEventListener('click',function(){
          var url = 'http://www.liulongbin.top:3006/api/get';
          var paramsObj = {name:'zs',age:12};
        //   console.log(axios)
        // axios.get(url,{params:paramsObj}).then(function(res){
        //     console.log(res)
        // })

        axios({
            method:'GET',
            url:url,
            params:paramsObj
        })
        .then(function(res){
            console.log(res)
        })
        
      })



      document.querySelector("#btn2").addEventListener('click',function(){
        var url = 'http://www.liulongbin.top:3006/api/post';
        var dataObj = {address:"北京",location:"昌平区"};
        axios.post(url,dataObj).then(function(res){
            console.log(res.data)
        })
      })

    script>
body>
html>

3.同源策略 1.什么是同源

如果两个页面的协议，域名和端口都相同，这两个页面具有相同的源

2.同源策略

同源策略是浏览器提供的一个安全功能

4.跨域 1.什么是跨域

同源指的是两个URL的协议、域名、端口一致，反之就是跨域

出现跨域的原因：浏览器的同源策略不允许非同源的URL之间进行资源的交互
网页：httP://www.test.com/index.html
接口：http:www.xx.com/index
浏览器允许发送跨域请求，但是跨域请求回来的数据，会被浏览器拦截，无法被网页获取到

2.解决跨域 JSONP和CORS

JSONP可以兼容低版本，被迫想出来的一种临时解决方案缺点：只支持GET请求，不支持POST请求

CORES是W3C标准属于跨域Ajax请求的根本解决方案，支持GET和POST请求缺点：不兼容低版本的浏览器

3.JSONP

是通过script标签的src属性解决跨域

4.JSONP原理

由于浏览器同源策略限制，网页中无法通过ajax请求非同源的接口数据，但是script标签不受浏览器同源策略的影响，可以通过src属性，请求非同源的js脚本

原理：是通过script标签的src属性请求跨域的数据接口，并通过函数调用的形式，接收跨域接口响应回来的数据

简单的jsonp请求

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    
    <script>

        function abc(data){
            console.log("data数据");
            console.log(data);
           
            
        }
    script>

    <script src="http://www.liulongbin.top:3006/api/jsonp?callback=abc&name=zs&age=12">script>
body>
html>

jquery发起jsonp请求

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="./js/jquery.js">script>
head>
<body>
    
    <button id="btn">发起jsonp请求button>
    <script>

        $(function(){
            $("#btn").on('click',function(){
                $.ajax({
                    url:"http://www.liulongbin.top:3006/api/jsonp?name=zs&age=12",
                    dataType:'jsonp',
                    success:function(res){
                        console.log(res)
                    }
                })
            })
        })
    script>
body>
html>

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/web/1297845.html

26-跨域

发表评论

评论列表（0条）