Ajax与跨域

2019-05-11 本文已影响0人遇明不散

Ajax

什么是Ajax
- AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术，以此提高与服务器交互的效率
异步请求步骤
- 创建一个异步对象
- 设置请求方式和请求地址
- 发送请求
- 监听状态的变化
- 处理返回的结果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04-ajax-get</title>
</head>
<body>
<button>发送请求</button>

<script type="text/javascript">
    var btn=document.getElementsByTagName('button')[0];

    btn.onclick = function(){
        // 创建异步请求对象
        // let xmlobj = new XMLHttpRequest();
        var xmlobj = null;
        if (window.XMLHttpRequest){
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlobj = new XMLHttpRequest();
          }else{
                // code for IE6, IE5
                xmlobj = new ActiveXObject("Microsoft.XMLHTTP");
          }

        // 设置请求方式与请求地址
        // xmlobj.open('GET','04-ajax-get.php',true);
        xmlobj.open('GET','04-ajax-get.txt',true);
        // 发送请求
        xmlobj.send();
        // 监听状态的变化
        xmlobj.onreadystatechange = function(){
            if(xmlobj.readyState == 4){
                // 判断是否请求成功
                if(xmlobj.status >= 200 && xmlobj.status < 300 
                  || xmlobj.status === 304){
                    // console.log('OK');
                    console.log(xmlobj.responseText);
                }else{
                    console.log('FAILED');
                }
            }
        }
    }
</script>
</body>
</html>

Ajax在IE浏览器中的缓存问题
- 在IE浏览器中, 如果通过Ajax发送GET请求, 那么IE浏览器认为同一个URL只有一个结果
- 可采用以下三种方式解决上述问题
  - AJAX请求的属性上直接设置cache
  - 调用$.ajaxSetup方法禁止掉Ajax的缓存机制
  - 通过为URL地址添加后缀的方式解决问题

// 通过为URL地址添加后缀的方式
xhr.open("GET","05-ajax-get.txt?t="+(new Date().getTime()),true);

Ajac请求的url问题
- 在URL中是不可以出现中文的, 如果出现了中文需要转码
- js中可以使用encodeURIComponent()方法转码
POST请求
- POST请求与GET请求基本一致,只是请求方法不一样
- 若要在请求过程中传参,使用setRequestHeader()来添加HTTP头,然后在send()添加数据即可

xmlhttp.open("POST","ajax_test.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

jQuery-Ajax

在 jQuery中提供了对原生的AJAX的封装

load() 方法

$obj.load(url,data,callback)
// 作用：异步加载数据到 $obj 元素中
// url ：异步请求的地址
// data ：传递给服务器端的参数(可选)，
//       可以传递普通字符串，可以传递JSON
// callback：异步请求完成后要执行的操作(可选)

// 一般把回调函数设置如下：
function(resText,statusText){
    resText : 响应数据
    statusText : 响应的状态文本
}

$.get() 方法

$.get(url,data,callback,type)
// url : 异步请求地址
// data : 请求提交的数据，可以是字符串，可以是JSON
// callback : 请求成功时的回调函数
// type : 响应回来的数据的类型，即将响应回来的数据转化指定类型
//     html : 响应回来的文本是html文本
//     text : 响应回来的文本是普通文本
//     json : 响应回来的数据是JSON对象

// 回调函数
function(resText){
    resText : 表示响应回来的文本
}

$.ajax() 方法

$.ajax({请求参数的JSON对象})
// 参数对象中的属性
// url : 字符串，表示异步请求的地址
// type : 字符串，请求方式，get 或 post
// data : 传递到服务器端的参数，可以是字符串，可以是JSON对象
// dataType : 字符串，响应回来的数据的格式
//      'html'
//      'xml'
//      'text'
//      'script'
//      'json'
//      'jsonp' 
// success:回调函数，请求和响应成功时回来执行的操作
// error : 回调函数，请求或响应失败时回来执行的操作
// beforeSend : 回调函数，发送ajax请求之前执行的操作，如果return false，则终止请求发送

同源策略

什么是同源策略
- 同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能
- 所谓同源是指: 协议，域名，端口都相同,就是同源, 否则就是跨域请求
同源策略带来的影响
- 在同源策略下, 浏览器只允许Ajax请求同源的数据, 不允许请求不同源的数据但在企业开发中
- 一般情况下为了提升网页的性能, 网页和数据都是单独存储在不同服务器上的，这时如果再通过Ajax请求数据就会拿不到跨域数据
跨域解决方案
- jsonp
- document.domain+iframe
- location.hash + iframe
- window.name + iframe
- window.postMessage
- flash等第三方插件
- 通过<script>向服务器资源发送请求，由服务器资源指定前端页面的哪个方法来执行响应的数据
前端

function flight(data){
            let html = "<div>";
            html += "<p>航班号:" + data.flightNO+"</p>";
            html += "<p>出发:" + data.froms+"</p>";
            html += "<p>到达:" + data.tos+"</p>";
            html += "<p>时间:" + data.time+"</p></div>";
            $("body").append(html);
    }
$(function () {
        $("#btn").click(function () {
            let script = $('<script><\/script>');
            script.attr('src','http://127.0.0.1:5000/flight_server?callback=flight');
            $('body').append(script);
        });
    });

后端

@app.route('/flight_server')
def flight_server():
    dic = {
        "flightNO":"MU763",
        "froms":'Beijing',
        "tos":"New York",
        "time":"16:55"
    }
callback = request.args.get('callback')
res = callback +"(" + json.dumps(dic) + ")"
return res

jsonp

什么是jsonp
- jsonp让网页从别的地址（跨域的地址）那获取资料，即跨域读取数据
jsonp实现跨域访问的原理
- 在同一界面中可以定义多个script标签
- 同一个界面中多个script标签中的数据可以相互访问
- 可以通过script的src属性导入其它资源
- 通过src属性导入其它资源的本质就是将资源拷贝到script标签中
- script的src属性不仅能导入本地资源, 还能导入远程资源
- 由于script的src属性没有同源限制, 所以可以通过script的src属性来请求跨域数据
JSONP优化
- 在企业开发中通过JSONP来获取跨域的数据,一般情况下服务器返回的都不会是一个变量, 而是一个函数的调用
- 当前服务器返回的函数调用名称写死了,服务器返回函数叫什么名称, 我们本地就必须定义一个叫什么名称的函数(通过URL参数的方式来动态指定函数名称)
- 由于script标签默认是同步, 前面的script标签没有加载完数据, 后面的script标签就不会被执行所以请求数据的script标签必须放到后面(通过JS动态创建script标签, 因为JS动态创建的script标签默认就是异步的,不用等到前面的标签加载完就可以执行后面的script标签)
jQuery中jsonp使用

$.ajax({
    url: "http://127.0.0.1:80/jQuery/Ajax/22-jsonp.php",
    data:{
        "teacher": "wxm",
        "age": 22
    },
    dataType: "jsonp", // 表示需要请求跨域的数据
    jsonp: "cb",  // 告诉服务器在获取回调函数名称的时候需要用什么key来获取
    jsonpCallback: "test", // 告诉服务器在获取回调函数名称的时候回调函数的名称是什么
    success: function (msg) {
        console.log(msg);
    }
});

Ajax与跨域

Ajax

jQuery-Ajax

load() 方法

$.get() 方法

$.ajax() 方法

同源策略

jsonp

猜你喜欢

热点阅读