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 Video Face Swap Swap faces in any video effortlessly with our completely free AI face swap tool! Show More Hot Article What's New in Windows 11 KB5054979 & How to Fix Update Issues 3 weeks ago By DDD How to fix KB5055523 fails to install in Windows 11? 2 weeks ago By DDD InZoi: How To Apply To School And University 4 weeks ago By DDD How to fix KB5055518 fails to install in Windows 10? 2 weeks ago By DDD Where to find the Site Office Key in Atomfall 4 weeks ago By DDD 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? 7870 15 Java Tutorial 1649 14 CakePHP Tutorial 1407 52 Laravel Tutorial 1301 25 PHP Tutorial 1244 29 Show More Related knowledge What is the reason why the browser does not respond after the WebSocket server returns 401? How to solve it? Apr 19, 2025 pm 02:21 PM The browser's unresponsive method after the WebSocket server returns 401. When using Netty to develop a WebSocket server, you often encounter the need to verify the token. �... Why can't JavaScript directly obtain hardware information on the user's computer? Apr 19, 2025 pm 08:15 PM Discussion on the reasons why JavaScript cannot obtain user computer hardware information In daily programming, many developers will be curious about why JavaScript cannot be directly obtained... Can JWT implement dynamic permission changes? What is the difference from the Session mechanism? Apr 19, 2025 pm 06:12 PM Confusion and answers about JWT and Session Many beginners are often confused about their nature and applicable scenarios when learning JWT and Session. This article will revolve around J... How to correctly generate and display the WeChat applet with parameters QR codes in Java? Apr 19, 2025 pm 04:48 PM Generating a WeChat applet QR code with parameters in Java and displaying it on an HTML page is a common requirement. This article will discuss in detail how to use J... What to do if the USDT transfer address is incorrect? Guide for beginners Apr 21, 2025 pm 12:12 PM After the USDT transfer address is incorrect, first confirm that the transfer has occurred, and then take measures according to the error type. 1. Confirm the transfer: view the transaction history, obtain and query the transaction hash value on the blockchain browser. 2. Take measures: If the address does not exist, wait for the funds to be returned or contact customer service; if it is an invalid address, contact customer service and seek professional help; if it is transferred to someone else, try to contact the payee or seek legal help. How to register an account on Ouyi Exchange Ouyi Exchange Registration Tutorial Apr 24, 2025 pm 02:06 PM The steps to register an Ouyi account are as follows: 1. Prepare a valid email or mobile phone number and stabilize the network. 2. Visit Ouyi’s official website. 3. Enter the registration page. 4. Select email or mobile phone number to register and fill in the information. 5. Obtain and fill in the verification code. 6. Agree to the user agreement. 7. Complete registration and log in, carry out KYC and set up security measures. Can two exchanges convert coins to each other? Can two exchanges convert coins to each other? Apr 22, 2025 am 08:57 AM Can. The two exchanges can transfer coins to each other as long as they support the same currency and network. The steps include: 1. Obtain the collection address, 2. Initiate a withdrawal request, 3. Wait for confirmation. Notes: 1. Select the correct transfer network, 2. Check the address carefully, 3. Understand the handling fee, 4. Pay attention to the account time, 5. Confirm that the exchange supports this currency, 6. Pay attention to the minimum withdrawal amount. What is on-chain transaction? What are the global transactions? Apr 22, 2025 am 10:06 AM EU MiCA compliance certification, covering 50 fiat currency channels, cold storage ratio 95%, and zero security incident records. The US SEC licensed platform has convenient direct purchase of fiat currency, a ratio of 98% cold storage, institutional-level liquidity, supports large-scale OTC and custom orders, and multi-level clearing protection. See all articles Public welfare online PHP training，Help PHP learners grow quickly！ About us Disclaimer Sitemap © php.cn All rights reserved