Ajax小记 



原生Ajax


Ajax就是异步的JS和XML，通过Ajax可以在浏览器向服务器发送异步请求，最大的优势就是：无刷新获取数据


XML


XML可扩展标记语言，被涉及用来传输和存储数据。不同于HTML的是，HTML是预定义标签，而XML没有预定义标签都是自定义标签，用来表示一些数据。现在已经被JSON替代


优点


    

  1. 

    可以无需刷新页面进而与服务器进行通信
    

    2. 

  2. 

    允许你根据用户事件来更新部分页面内容
    

    3. 



缺点


    

  1. 

    没有浏览历史不能回退
    

    2. 

  2. 

    存在跨域问题
    

    3. 

  3. 

    SEO不友好
    

    4. 



同源策略


同源策略是浏览器的一种安全策略。


同源：协议、域名、端口号必须完全相同 违背同源策略就是跨域






 


 


JSONP


Jsonp是 json 的一种"使用模式"，可以让网页从别的域名那获取资料，即跨域读取数据（仅支持GET请求）。


原理


在网页中有一些标签具有跨域能力，比如img、link、iframe、script。


JSONP就是利用script标签的跨域能力发送请求。


应用


服务端 JSONP 格式数据


如客户想访问 : https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction。


假设客户期望返回数据：["customername1","customername2"]。


真正返回到客户端的数据显示为: callbackFunction(["customername1","customername2"])。


使用JSONP，服务端要符合JSONP格式数据即返回格式为回调函数


客户端


 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <style>
         #box {
             width: 200px;
             height: 200px;
             border: solid 1px black;
         }
     </style>
 </head>
 <body>
     <div id="box"></div>
     <script>
         function handle(data) {
             const box = document.getElementById("box");
             box.innerText = data.name + "\n" + data.age + "\n" + data.gender;
         }
     </script>
     <script src="http://localhost:8000/jsonp"></script>
 </body>
 </html>


服务端


 app.all('/jsonp', (req, res) => {
     const data = {
         name: "zfs",
         age: 18,
         gender: "女"
     }
     const str = JSON.stringify(data);
     res.end(`handle(${str})`);
 });




 


CORS


跨域资源共享，CORS是官方的跨域解决方案，它的特点是不需要客户端做任何的特殊操作，完全在服务器进行处理，支持get和post请求。跨域资源共享标准新增了一组HTTP首部字段，允许服务器声明哪些源站通过浏览器可以有权访问哪些资源


 






            

            
posted @ 
2022-07-22 11:31 
雙雙 
阅读(258) 
评论(1) 
编辑 
收藏 
举报