WEB前端 - Ajax

Posted 2021-02-18 HELLO WORLD

【Ajax】

【同步与异步】

同步交互：请求的返回的数据会覆盖之前的数据
异步交互：页面不刷新，页面的部分地方刷新，页面的额部分地方就可以完成与服务器的数据交互

【底层实现：XMLHttpRequest-javascript提供的API中的对象】

请求流程：
    
一个js事件被触发 -》执行一个方法，调用异步方法；
                        （1）通过XMLHttpRequest发送请求，并通过XMLHttpRquest接受响应；？具体访问实现过程是什么？
                                    [1]创建XMLHttpRequest对象
                                            var xhr=new XMLHttpRequest();
                                    [2]打开与服务器的一个链接
                                            xhr.open("post","url..");
                                            xhr.setRequestHeader("Content-Type","xxxxx");//设置请求头-http协议规定的参数值；
                                            
                                    [3]发送请求参数
                                            xhr.send("xxxx");
                                    [4]服务器返回数据给客户端，同时返回一些状态，监听服务器端的状态改变
                                            //监听响应状态
                                            xhr.onreadystatechange=function(){
                                                //服务器响应状态：0，1，2，3，4
                                                //响应完成=4,注：不等于响应成功；xhr.readyState==4;
                                                //响应成功=状态码：200；xhr.status=200;
                                                //响应数据：xhr.responseText;
                                            }
                        （2）通过DOM把数据显示到界面；

【ajax跨域请求】！！！

（1） 什么是跨域请求；

域 -> URL中域名,IP,端口不同都是跨域；就是跨域名访问；- 会有安全限制；
eg：在A站点访问B站点数据时；

（2） jQuery-ajax实现跨域

《实现1》dataType : "jsonp"；
    简单原理：动态创建script 标签，然后利用 script 的 SRC 不受同源策略约束来跨域获取数据。
              缺点！！是需要后端配合输出特定的返回信息-回调函数格式；
    
    1 前端设置：dataType : "jsonp",//开启跨域；客户端给服务端传递一个回调函数，服务端返回的是一个回调函数的调用，并将数据放在回调函数中作为参数传递过来。
                注：ajax一般使用js的XMLHttpRquest对象实现异步；
                    若设置dataType=jsonp;则不用xhr，使用script标签；内部会有一个回调函数；
    2 后台服务设置： 
        
    
《实现2：思路》
        利用反应代理的机制来解决跨域的问题，
        前端请求的时候先将请求发送到同源地址的后端，
        通过后端请求转发来避免跨域的访问。

【新：背景】

html5支持了CORS协议。
CORS 是一个 W3C 标准，全称是”跨域资源共享”（Cross-origin resource sharing），
允许浏览器向跨源服务器，发出 XMLHttpRequest 请求，从而克服了 AJAX 只能同源使用的限制。
它通过服务器增加一个特殊的 Header[Access-Control-Allow-Origin]来告诉客户端跨域的限制，
如果浏览器支持 CORS、并且判断 Origin 通过的话，就会允许 XMLHttpRequest 发起跨域请求。
前端使用了 CORS 协议，就需要后端设置支持非同源的请求，对于SpringBoot 对于CORS 同样有着良好的支持；

 

【springboot设置跨域请求支持】

[坑]
    ajax请求的datatyp为html.....日！一般都是json，居然必须要html；

参：其他...暂时不详