क्रॉस डोमेन XMLHttpRequest

AJAX तकनीक का एक महत्वपूर्ण घटक XMLHttpRequest है। यह ऑब्जेक्ट पृष्ठ को पुनः लोड करने की आवश्यकता के बिना सर्वर से HTTP अनुरोध करने के लिए संभव बनाता है।



आमतौर पर, XMLHttpRequest के साथ काम करना इस प्रकार है:

1. XMLHttpRequest ऑब्जेक्ट का एक उदाहरण बनाना

2. एक ईवेंट हैंडलर इंस्टॉल करना जो तब होता है जब ऑब्जेक्ट की स्थिति बदल जाती है (ऑन्रेडिस्टेटचेंज)

3. एक कनेक्शन खोलना (खुला) और एक अनुरोध भेजना (भेजना)



दुर्भाग्य से, XMLHttpRequest केवल उन फ़ाइलों के साथ काम करता है जो XMLHttpRequest का उपयोग करते हुए पृष्ठ के समान डोमेन में हैं। यही है, केवल एक ही डोमेन, प्रोटोकॉल और वर्तमान पृष्ठ के रूप में पोर्ट के साथ पते के लिए एक अनुरोध किया जा सकता है। यह सुरक्षा कारणों से किया जाता है और यदि आपको किसी अन्य साइट से डेटा / सामग्री प्राप्त करने की आवश्यकता होती है तो समस्याएँ पैदा होती हैं।



हाल ही में, यह समस्या मेरे सामने आई, एक बहुत ही सरल समाधान चुना गया, जिस पर बाद में चर्चा की जाएगी।



प्रॉक्सी! क्रॉस-डोमेन प्रश्नों के लिए एक सरल और सहज विधि। विधि का सार इस प्रकार है:



1. XMLHttpRequest अपने डोमेन पर एक PHP स्क्रिप्ट तक पहुँचता है, इसे अनुरोध विधि, पते और मापदंडों को पार करते हुए

2. PHP स्क्रिप्ट, बदले में, एक प्रॉक्सी के रूप में कार्य करती है। यही है, यह इसके लिए दिए गए मापदंडों के आधार पर एक अनुरोध करता है और जेएस स्क्रिप्ट को किसी अन्य सर्वर की प्रतिक्रिया देता है



एक PHP स्क्रिप्ट का काम, जो एक क्रॉस-डोमेन अनुरोध के लिए एक प्रॉक्सी है, CURL पर आधारित है।



यहाँ स्वयं प्रॉक्सी.फपी स्क्रिप्ट है:

<?php

header("Content-Type: text/xml; charset=windows-1251");

//

$method = (empty($_GET['method'])) ? 1 : $_GET['method'];

$url = $_GET['url'];

$url = (empty($_GET['url'])) ? die("no url") : $_GET['url'];

$params = $_GET['params'];

//

$allowed = array(1 => "~http:\/\/(www\.)?habrahabr\.ru\/~", 2 => "~http:\/\/(www\.)?el\-egoisto\.com\/~");

$count = count($allowed);

for ($i = 1; $i <= $count; $i++)

{

if (preg_match($allowed[$i],$url))

{

// -

$ch = curl_init();

switch ($method)

{

case 1:

// GET

curl_setopt($ch, CURLOPT_URL, $url."?".$params);

break;

case 2:

// POST

curl_setopt($ch, CURLOPT_URL, $url);

curl_setopt($ch, CURLOPT_POST, 1);

curl_setopt($ch, CURLOPT_POSTFIELDS, $params);

break;

}

curl_setopt($ch, CURLOPT_HEADER, 0);

$response = curl_exec($ch);

$header_size = curl_getinfo($ch,CURLINFO_HEADER_SIZE);

$xml = substr($response,$header_size);

echo $xml;

curl_close($ch);

exit();

}

}

?>







XMLHttpRequest इसे एक्सेस करता है और 3 पैरामीटर पास करता है:

1. विधि - GET अनुरोध के लिए 1 और POST के लिए 2

2. url - अनुरोध पता

3. परम - अनुरोध पैरामीटर



PHP स्क्रिप्ट इनपुट मापदंडों की उपस्थिति के लिए जांच करती है, यह जांचती है कि क्या उसे url के लिए अनुरोध भेजने की अनुमति है (regexp $ की एक सरणी की अनुमति है) और वास्तव में एक अनुरोध भेजता है और दूरस्थ सर्वर से प्रतिक्रिया देता है।



JS से, इस PHP स्क्रिप्ट का उपयोग इस तरह किया जाता है:



XMLHttpRequest - CreateReq और GetData के साथ काम करने के लिए 2 कार्य हैं। पहला एक ऑब्जेक्ट का एक उदाहरण बनाता है, और दूसरा एक हैंडलर सेट करता है और एक अनुरोध भेजता है।

function CreateReq()

{

var req = null;

if (window.XMLHttpRequest)

{

try

{

req = new XMLHttpRequest();

}

catch(e)

{

req = null;

}

}

else if (window.ActiveXObject)

{

try

{

req = new ActiveXObject("Msxml2.XMLHTTP");

}

catch(e)

{

try

{

req = new ActiveXObject("Microsoft.XMLHTTP");

}

catch(e)

{

req = null;

}

}

}

return req;

}



function GetData(url,callback)

{

req = new CreateReq;



if(req != null)

{

req.onreadystatechange = callback;

req.open('GET', url, true);

req.send(null);

}

else alert(" ..");

}









आइए, हमार से कर्म और शक्ति प्राप्त करने के उदाहरण का उपयोग करके एक GET अनुरोध भेजने पर विचार करें :)



function GetHabraMe()

{

GetData("/proxy.php?method=1&url="+encodeURIComponent("http://habrahabr.ru/api/profile/lordeg"),GetHabraCallback);

}



function GetHabraCallback()

{

if(req.readyState == 4)

{

if(req.status == 200)

{

var xmlDoc = req.responseXML;

var karma = xmlDoc.getElementsByTagName("karma").item(0).firstChild.data;

var rating = xmlDoc.getElementsByTagName("rating").item(0).firstChild.data;

var place = document.getElementById("data");

if(place != null)

{

place.innerHTML = ": "+karma+"<br>: "+rating+";

}

}

}

return false;

}









GetHabraMe प्रॉक्सी.php का उपयोग करके habrahabr.ru/api/profile/lordeg के लिए एक GET अनुरोध भेजेगा और परिणाम आईडी "डेटा" के साथ तत्व को "वापस" कर दिया जाएगा।



पोस्ट अनुरोध भेजना लगभग समान है:



function GetPings()

{

var d_topic = document.getElementById("topic");

if (d_topic.innerHTML == " ")

{

GetData("/proxy.php?method=2&url="+encodeURIComponent("http://el-egoisto.com/frontend.php")+"¶ms="+encodeURIComponent("func=recent&owner=9&id=1&cutoff=48"),GetMyLastPingsCallback);

}

}







"युद्ध की स्थिति" में कार्यान्वयन यहाँ देखा जा सकता है - lord-phoenix.com (लिंक "वर्तमान संगीत" और "हैब्राल्डगेग") :)

मैं मूल होने का दिखावा नहीं करता, मैंने सिर्फ एक समस्या का हल निकालने का फैसला किया है जो ब्लॉग विषय के रूप में मेरे सामने आई। शायद किसी को मेरे अनुभव से लाभ होगा।



संबंधित सामग्री:

1. xmlhttprequest.ru

2. ru.wikipedia.org/wiki/XMLHttpRequest

3. ru.wikipedia.org/wiki/AJAX

4. ru.wikipedia.org/wiki/CURL