Terdapat beberapa cara untuk menyelesaikan masalah merentas domain dengan ajax

Terdapat tiga kaedah untuk ajax untuk menyelesaikan masalah merentas domain: 1. Gunakan proksi untuk mendapatkan kandungan di bawah nama domain lain melalui latar belakang, dan kemudian kembalikan kandungan yang diperoleh ke hujung hadapan supaya ia berada di bawah nama domain yang sama; 2. Gunakan JSONP untuk Kaedah ini hanya menyokong mendapatkan permintaan, dan memuatkan data ke dalam fail js pada pelayan jauh untuk panggilan pelanggan dan pemprosesan selanjutnya 3. Gunakan "LHttpRequest Level 2", sintaksnya ialah "header('; Access-Control-Allow-Origin:* ')".

Persekitaran pengendalian artikel ini: sistem windows10, versi javascript1.8.5&&&html5, komputer Dell G3.

Terdapat tiga cara untuk menyelesaikan isu ajax merentas domain

Domain: Domain ialah sempadan keselamatan sistem rangkaian WIN2K. Kami tahu bahawa unit paling asas bagi rangkaian komputer ialah "domain". Ini bukan unik untuk WIN2K, tetapi Active Directory boleh dijalankan melalui satu atau lebih domain. Pada komputer bebas, domain merujuk kepada komputer itu sendiri Sebuah domain boleh diedarkan di beberapa lokasi fizikal Pada masa yang sama, lokasi fizikal boleh dibahagikan kepada segmen rangkaian yang berbeza ke dalam domain yang berbeza hubungannya dengan hubungan Amanah dengan domain lain. Apabila berbilang domain disambungkan melalui perhubungan kepercayaan, Active Directory boleh dikongsi oleh berbilang domain kepercayaan.

Disebabkan keperluan untuk menggunakan AJAX untuk meminta permintaan di bawah nama domain lain di tempat kerja, akses akan dinafikan Ini kerana berdasarkan pertimbangan keselamatan, AJAX hanya boleh mengakses sumber tempatan dan tidak boleh mengakses sumber merentas domain.

Sebagai contoh, jika nama domain tapak web anda ialah aaa.com, dan anda ingin meminta kandungan dalam nama domain bbb.com melalui AJAX, penyemak imbas akan menganggapnya tidak selamat dan menafikan akses.

Terdapat beberapa situasi di mana masalah merentas domain mungkin berlaku:

Sebanyak tiga penyelesaian diringkaskan: proksi, JSONP dan XHR2 (XMLHttpRequest Tahap 2).

Kaedah pertama ialah proksi: Kaedah ini adalah untuk mendapatkan kandungan di bawah nama domain lain melalui latar belakang (ASP, PHP, JAVA, ASP.NET), dan kemudian meletakkan kandungan yang diperoleh Kembali ke bahagian hadapan, jadi kerana ia berada di bawah nama domain yang sama, tidak akan ada masalah merentas domain.

Kod pelaksanaan: Buat permintaan AJAX (alamat halaman ialah: http://localhost/ajax/proxy.html)

var request = null;
if(window.XMLHttpRequest){
request = new XMLHttpRequest();
}else{
request = new ActiveXObject("Microsoft.XMLHttp");
}
request.onreadystatechange = function(){
console.log(this.readyState);
if(this.readyState===4 && this.status===200){
var resultObj = eval("("+this.responseText+")"); //将返回的文本数据转换JSON对象
document.getElementById("box").innerHTML = resultObj.name+":"+resultObj.sex; //将返回的内容显示在页面中
}
}
request.open("POST","proxy.php",true);
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
request.send("name=吕铭印&sex=男");

Buat permintaan AJAX.

kod proksi.php

header("Content-type:text/html;charset=utf-8");
$url = "http://localhost:63342/ajax/proxy.js";
$contents = file_get_contents($url);
echo $contents;

Gunakan kod php untuk mendapatkan fail proxy.js di bawah localhost:63342.

kod proxy.js

{
name : "吕铭印",
sex : "男"
}

hasil larian proxy.html

Pada ketika ini, menggunakan proksi untuk mengakses fail antara domain yang berbeza.

Pertama, gunakan AJAX dalam proxy.html untuk mengakses fail proxy.php di latar belakang Kemudian, selepas proxy.php menerima permintaan, ia mengakses fail proxy.js dalam localhost:63342 kandungan proxy.js, Kembalikan kandungan ke halaman hujung hadapan, yang melaksanakan fungsi merentas domain.

Jika anda ingin mengakses berbilang fail merentas domain, anda boleh memberitahu fail proxy.php latar belakang alamat fail yang hendak diakses dalam bentuk parameter.

Kaedah kedua JSONP (hanya menyokong permintaan GET) : Kemudian, orang ramai mendapati bahawa ia tidak terjejas oleh domain silang semasa memanggil fail Js, jadi penyelesaian kedua telah diperolehi.

adalah untuk memuatkan data ke dalam fail js pada pelayan jauh untuk panggilan pelanggan dan pemprosesan selanjutnya.

jsonp.html

var url = "http://localhost:63342/ajax/jsonp.php?name=吕铭印&sex=男&callbackname=jsonp_callback"; //访问localhost:63342下的jsonp.php
var scriptTag = document.createElement("script"); //创建一个script标签
scriptTag.setAttribute("src",url); //设置script的src属性
document.body.appendChild(scriptTag); //将script标签添加到body中
//回调函数
var jsonp_callback = function(resultObj){
document.getElementById("box").innerHTML = resultObj.name+":"+resultObj.sex;
}
jsonp.php
$name = $_GET["name"];
$sex = $_GET["sex"];
$callbackname = $_GET["callbackname"]; //回调函数名称
echo "$callbackname({name:'$name',sex:'$sex'})";

Prinsip pelaksanaan: Memandangkan menggunakan teg skrip untuk memanggil fail js jauh tidak terjejas oleh domain silang, anda boleh mencipta teg skrip dan mengaksesnya melalui src atribut fail jauh.

Sebenarnya, ini bukan AJAX, tetapi ia boleh mencapai fungsi seperti AJAX.

Kaedah ketiga XMLHttpRequest Tahap 2: XMLHttpRequest Tahap 2 yang disediakan oleh HTML5 telah melaksanakan akses merentas domain dan ciri baharu yang lain

Ini memerlukan pelayan jauh Tambahkan kod berikut

header('Access-Control-Allow-Origin:*'); //*代表可访问的地址，可以设置指定域名
header('Access-Control-Allow-Methods:POST,GET');

untuk menggunakan kod AJAX biasa pada klien.

Ringkasan: Pelaksanaan proksi adalah yang paling menyusahkan, tetapi ia adalah yang paling banyak digunakan Mana-mana penyemak imbas yang menyokong AJAX boleh menggunakan kaedah ini.

JSONP agak mudah, tetapi hanya menyokong panggilan kaedah GET.

XHR2 adalah yang paling mudah, tetapi ia hanya menyokong HTML5 Jika anda sedang membangun untuk terminal mudah alih, anda boleh memilih untuk menggunakan XHR2.

【Tutorial berkaitan yang disyorkan: Tutorial video AJAX】

Atas ialah kandungan terperinci Terdapat beberapa cara untuk menyelesaikan masalah merentas domain dengan ajax. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!