How JS implements browser communication

This article mainly shares with you how JS implements browser communication, mainly in the form of code. I hope it can help everyone.

Same-origin policy and restrictions

The same-origin policy restricts how documents or scripts loaded from the same source interact with resources from another source. This is an important security mechanism for isolating potentially malicious files. (Three are the same: protocol http/https, domain name and port)

• Cookie/LocalStorage and IndexDB cannot be read

• DOM cannot be obtained

• Ajax request cannot be sent

##URLResult Reasonhttp://store.company.com/dir2/other.htmlSuccesshttp://store.company.com/dir/inner/another.htmlSuccesshttps://store.company.com/secure.htmlFailedDifferent protocols (https and http)http://store.company.com:81/dir/etc.htmlFailedDifferent ports (81 and 80)http://news.company.com/dir/other.htmlFailureDifferent domain names (news and store)How to communicate between the front and back ends

• Ajax: Communication method under the same origin

• WebSocket: No restriction on the same origin policy

• CORS: supports cross-domain communication and also supports same-origin communication

How to create Ajax

• XMLHttpRequest object workflow

• Compatibility processing

• Event triggering conditions

• Event triggering sequence

var xht = XMLHttpRequest ? new XMLHttpRequest():new window.ActiveXObject('Microsoft.XMLHTTP');var data = opt.data,
    url = opt.url,
    type=opt.type.toUpperCase(),
    dataArr=[];for(var k in data){
    dataArr.push(k+'='+data[k]);
}if(type === 'GET'){
    url = url + '?' + dataArr.join("&");
    xhr.open(type, url.replace(/\?s/g,''), true);
    xhr.send();
}if(type === 'POST'){
    xhr.open(type, url, true);
    xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    xhr.send(dataArr.join('&'));
}
xhr.onload = function(){
    if(xhr.status === 200 || xhr.status === 304){ //媒体资源需要206
        var res;        if(opt.success && opt.success instanceof Function){
            res = xhr.responseText;            if(typeof res === 'string'){
                res = JSON.parse(res);
                opt.success.call(xhr, res);
            }
        }
    }else{        if(opt.error && opt.error instanceof Function){
            opt.error.call(xhr, res);
        }
    }
}

Several ways of cross-domain communication

MethodDescriptionJSONPDynamicly create the

Hot AI Tools Undresser.AI Undress AI-powered app for creating realistic nude photos AI Clothes Remover Online AI tool for removing clothes from photos. Undress AI Tool Undress images for free Clothoff.io AI clothes remover AI Hentai Generator Generate AI Hentai for free. Show More Hot Article R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal) 2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌 Hello Kitty Island Adventure: How To Get Giant Seeds 1 months ago By 尊渡假赌尊渡假赌尊渡假赌 How Long Does It Take To Beat Split Fiction? 4 weeks ago By DDD R.E.P.O. Save File Location: Where Is It & How to Protect It? 4 weeks ago By DDD Two Point Museum: All Exhibits And Where To Find Them 1 months ago By 尊渡假赌尊渡假赌尊渡假赌 Show More Hot Tools Notepad++7.3.1 Easy-to-use and free code editor SublimeText3 Chinese version Chinese version, very easy to use Zend Studio 13.0.1 Powerful PHP integrated development environment Dreamweaver CS6 Visual web development tools SublimeText3 Mac version God-level code editing software (SublimeText3) Show More Hot Topics Where is the login entrance for gmail email? 7375 15 Java Tutorial 1628 14 CakePHP Tutorial 1355 52 Laravel Tutorial 1267 25 PHP Tutorial 1216 29 Show More Related knowledge How to avoid being detected by the browser when using Fiddler Everywhere for man-in-the-middle reading? Apr 02, 2025 am 07:15 AM How to avoid being detected when using FiddlerEverywhere for man-in-the-middle readings When you use FiddlerEverywhere... How to get news data bypassing Investing.com's anti-crawler mechanism? Apr 02, 2025 am 07:03 AM Understanding the anti-crawling strategy of Investing.com Many people often try to crawl news data from Investing.com (https://cn.investing.com/news/latest-news)... How Flutter solves memory leak problem in Debian Apr 02, 2025 am 08:03 AM This article introduces various methods to troubleshoot and fix memory leaks in Flutter applications on Debian systems. 1. Use FlutterDevTools to detect memory leaks to install DevTools: Run flutterpubglobalactivatedevtools in the terminal to install FlutterDevTools. Run the application (Profile mode): Use flutterrun--profile to run your Flutter application and enter performance analysis mode. Start DevTools: Open http://localhost:9 in the browser Is Debian Strings compatible with multiple browsers Apr 02, 2025 am 08:30 AM "DebianStrings" is not a standard term, and its specific meaning is still unclear. This article cannot directly comment on its browser compatibility. However, if "DebianStrings" refers to a web application running on a Debian system, its browser compatibility depends on the technical architecture of the application itself. Most modern web applications are committed to cross-browser compatibility. This relies on following web standards and using well-compatible front-end technologies (such as HTML, CSS, JavaScript) and back-end technologies (such as PHP, Python, Node.js, etc.). To ensure that the application is compatible with multiple browsers, developers often need to conduct cross-browser testing and use responsiveness What should I do if I encounter garbled code printing for front-end thermal paper receipts? Apr 04, 2025 pm 02:42 PM Frequently Asked Questions and Solutions for Front-end Thermal Paper Ticket Printing In Front-end Development, Ticket Printing is a common requirement. However, many developers are implementing... How to manually trigger the onBlur event of a cell in Avue-crud row editing mode? Apr 04, 2025 pm 02:00 PM The onBlur event that implements Avue-crud row editing in the Avue component library manually triggers the Avue-crud component. It provides convenient in-line editing functions, but sometimes we need to... The difference in console.log output result: Why are the two calls different? Apr 04, 2025 pm 05:12 PM In-depth discussion of the root causes of the difference in console.log output. This article will analyze the differences in the output results of console.log function in a piece of code and explain the reasons behind it. �... How to wake up the Android App on the WeChat H5 page? Apr 04, 2025 pm 02:03 PM How to evoke Android App on the H5 page in WeChat? Many developers face this problem: how to directly... See all articles Public welfare online PHP training，Help PHP learners grow quickly！ About us Disclaimer Sitemap © php.cn All rights reserved