এক্সএমএলএইচটিপিআরকিউস্টের প্রতিক্রিয়া কীভাবে পাবেন?


187

আমি জানতে চাইলে কীভাবে কোনও দূরবর্তী URL এর সামগ্রী লোড করতে এক্সএমএলএইচটিটিপিআরকোয়েস্ট ব্যবহার করতে হয় এবং অ্যাক্সেস করা সাইটের HTML কোনও জেএস ভেরিয়েবলে সঞ্চয় করা থাকে have

বলুন, আমি যদি http://foo.com/bar.php এর HTML () লোড করতে এবং সতর্ক করতে চাই, তবে আমি কীভাবে এটি করব?



2
আপনি যদি জেএস লাইব্রেরিগুলির জন্য উন্মুক্ত হন, jQuery এটিকে লোড () পদ্ধতিটি দিয়ে সহজ করে তোলে: api.jquery.com/load
scunliffe

19
godশ্বরের ধন্যবাদ, অবশেষে এমন গুগল ফলাফল যা jQuery কে সম্বোধন করে না: |
স্যাম ভ্লোবার্গস

উত্তর:


277

আপনি এটা পেতে পারেন XMLHttpRequest.responseTextXMLHttpRequest.onreadystatechangeযখন XMLHttpRequest.readyStateসমান XMLHttpRequest.DONE

এখানে একটি উদাহরণ (আই 6/7 এর সাথে সামঞ্জস্যপূর্ণ নয়)।

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == XMLHttpRequest.DONE) {
        alert(xhr.responseText);
    }
}
xhr.open('GET', 'http://example.com', true);
xhr.send(null);

আরও ভাল ক্রসব্রোজারের সামঞ্জস্যের জন্য, কেবল আইই 6/7 এর সাথে নয়, তবে কিছু ব্রাউজার-নির্দিষ্ট মেমরি ফাঁস বা বাগগুলি coverাকতে এবং অজেক্সিকাল অনুরোধগুলিতে ফায়ারিংয়ের সাথে কম কথোপকথনের জন্য আপনি jQuery ব্যবহার করতে পারেন ।

$.get('http://example.com', function(responseText) {
    alert(responseText);
});

নোট করুন যে লোকালহোস্টে চালনা না করে আপনাকে জাভাস্ক্রিপ্টের জন্য একই উত্স নীতি গ্রহণ করতে হবে to আপনি আপনার ডোমেনে একটি প্রক্সি স্ক্রিপ্ট তৈরি করতে বিবেচনা করতে পারেন।


কীভাবে আমরা সেই প্রক্সি তৈরি করতে যাব?
ক্রিস -

কবজির মতো কাজ করে :)
অনুরাগ

29

আমি সন্ধানের পরামর্শ দিই fetch। এটি ES5 সমতুল্য এবং প্রতিশ্রুতি ব্যবহার করে। এটি অনেক বেশি পাঠযোগ্য এবং সহজেই স্বনির্ধারিত।

const url = "https://stackoverflow.com";
fetch(url)
    .then(
        response => response.text() // .json(), etc.
        // same as function(response) {return response.text();}
    ).then(
        html => console.log(html)
    );

নোড.জেজে, আপনাকে fetchব্যবহার করে আমদানি করতে হবে :

const fetch = require("node-fetch");

আপনি যদি এটি সুসংগতভাবে ব্যবহার করতে চান (শীর্ষ স্কোপে কাজ করে না):

const json = await fetch(url)
  .then(response => response.json())
  .catch((e) => {});

অধিক তথ্য:

মজিলা ডকুমেন্টেশন

আমি কি ব্যবহার করতে পারি (94% অক্টোবর 2019)

ম্যাট ওয়ালশ টিউটোরিয়াল


26

এর XMLHttpRequestসাথে ব্যবহার করার সহজ উপায় pure JavaScript। আপনি সেট করতে পারেন custom headerতবে এটি প্রয়োজনের ভিত্তিতে alচ্ছিক ব্যবহৃত হয়।

1. পোস্ট পদ্ধতি ব্যবহার:

window.onload = function(){
    var request = new XMLHttpRequest();
    var params = "UID=CORS&name=CORS";

    request.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            console.log(this.responseText);
        }
    };

    request.open('POST', 'https://www.example.com/api/createUser', true);
    request.setRequestHeader('api-key', 'your-api-key');
    request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    request.send(params);
}

আপনি পোষ্ট পদ্ধতি ব্যবহার করে প্যারামগুলি পাঠাতে পারেন।

২. জিইটি পদ্ধতি ব্যবহার:

উদাহরণস্বরূপ নীচে চালান এবং একটি JSON প্রতিক্রিয়া পাবেন।

window.onload = function(){
    var request = new XMLHttpRequest();

    request.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            console.log(this.responseText);
        }
    };

    request.open('GET', 'https://jsonplaceholder.typicode.com/users/1');
    request.send();
}


আমার জন্য ভাল কাজ করে।
ময়ূর এস

ভালো উদাহরণ. ভাল কাজ করছে।

16

ইন XMLHttpRequest, ব্যবহার XMLHttpRequest.responseTextনীচের মত ব্যতিক্রম বাড়াতে পারে

 Failed to read the \'responseText\' property from \'XMLHttpRequest\': 
 The value is only accessible if the object\'s \'responseType\' is \'\' 
 or \'text\' (was \'arraybuffer\')

নিম্নলিখিত হিসাবে এক্সএইচআর থেকে প্রতিক্রিয়া অ্যাক্সেস করার সর্বোত্তম উপায়

function readBody(xhr) {
    var data;
    if (!xhr.responseType || xhr.responseType === "text") {
        data = xhr.responseText;
    } else if (xhr.responseType === "document") {
        data = xhr.responseXML;
    } else {
        data = xhr.response;
    }
    return data;
}

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        console.log(readBody(xhr));
    }
}
xhr.open('GET', 'http://www.google.com', true);
xhr.send(null);
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.