js 通信知识点总结

最新推荐文章于 2024-05-09 14:25:54 发布

xinxin_zhu

最新推荐文章于 2024-05-09 14:25:54 发布

阅读量321

点赞数

分类专栏： javascript 通信文章标签： javascript

本文链接：https://blog.csdn.net/xinxin_zhu/article/details/106321698

版权

本文总结了JavaScript中的同源策略及其限制，详细阐述了前后端通信的方法，如AJAX、WebSocket和CORS，并探讨了创建AJAX的过程及跨域通信的多种解决方案，包括JSONP、Hash、postMessage、WebSocket和CORS等。

摘要由CSDN通过智能技术生成

1 同源策略

浏览器限制不同源不能通信，源包括（协议：域名：端口）。非同源时

Cookie LocalStorage和IndexDB不能读取
DOM无法获取
AJAX不能请求

2前后端怎么通信

AJAX (同源)
WebSocket(不限制同源非同源)
CORS(支持同源和非同源)

3 创建ajax

XMLHttpRequest对象的工作流程
兼容性处理
事件的触发条件
事件的触发顺序

function ajax1(url, type) {
    const p = new Promise((resolve, reject) => {
        const xhr = XMLHttpRequest ? new XMLHttpRequest() : new window.ActiveXObject('Microsoft.XMLHTTP');//考虑兼容性  第一步
        if (type == 'GET') {
            //拼接参数到url后面 省略
            //....
            xhr.open('GET', url, true)   //第二步
            xhr.send();                  //第三步

        } if (type == 'POST') {
            xhr.open('POST', url, true)
            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')