คำขอ HTTP GET ใน JavaScript หรือไม่


807

ฉันต้องทำการร้องขอ HTTP GETใน JavaScript วิธีที่ดีที่สุดในการทำเช่นนั้นคืออะไร?

ฉันต้องทำสิ่งนี้ในวิดเจ็ต dashcode ของ Mac OS X


10
โปรดทราบว่านี่เป็นไปตามนโยบายแหล่งกำเนิดเดียวกัน en.wikipedia.org/wiki/Same_origin_policy
ripper234

คำตอบ:


1207

เบราว์เซอร์ (และ Dashcode) ให้วัตถุ XMLHttpRequest ซึ่งสามารถใช้ในการสร้างคำขอ HTTP จาก JavaScript:

function httpGet(theUrl)
{
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open( "GET", theUrl, false ); // false for synchronous request
    xmlHttp.send( null );
    return xmlHttp.responseText;
}

อย่างไรก็ตามคำขอแบบซิงโครนัสจะไม่สนับสนุนและจะสร้างคำเตือนตามบรรทัดของ:

หมายเหตุ: เริ่มต้นด้วย Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27) การร้องขอแบบซิงโครนัสบนเธรดหลักได้ถูกคัดค้านเนื่องจากผลกระทบด้านลบต่อประสบการณ์ของผู้ใช้

คุณควรทำการร้องขอแบบอะซิงโครนัสและจัดการการตอบสนองภายในตัวจัดการเหตุการณ์

function httpGetAsync(theUrl, callback)
{
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function() { 
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
            callback(xmlHttp.responseText);
    }
    xmlHttp.open("GET", theUrl, true); // true for asynchronous 
    xmlHttp.send(null);
}

2
แน่นอนว่า Javascript นั้นมีอยู่แล้วภายในหรือวิธีใดไลบรารี่ Javascript ให้วิธีการอำนวยความสะดวกสำหรับมัน? ความแตกต่างที่ว่าวิธีการอำนวยความสะดวกให้ดีความสะดวกสบายและไวยากรณ์ที่ชัดเจนและง่ายขึ้น
Pistos

37
ทำไมคำนำหน้า XML`
AlikElzin-kilaka

9
คำนำหน้า XML เพราะมันใช้ X จาก AJAX ๆ ~ Asynchronous JavaScript และ XML นอกจากนี้จุดที่ดีคือ " API ที่มีและ ECMAScript binding " เนื่องจากความจริงที่ว่า JavaScript สามารถมีได้หลายสิ่งนอกเหนือจากเบราว์เซอร์ที่สนับสนุน HTTP (เช่น Adobe Reader ... ) สิ่งที่ควรจดจำก็คือให้ปิดการใช้งาน หูแหลม.
จะ

7
@ AlikElzin-kilaka ที่จริงแล้วคำตอบทั้งหมดข้างต้นเป็นเครื่องหมายปิด (infact ที่เอกสาร W3 ที่เชื่อมโยงอธิบายว่า "แต่ละองค์ประกอบของชื่อนี้อาจทำให้เข้าใจผิด") คำตอบที่ถูกต้อง? stackoverflow.com/questions/12067185/…
Ashley Coolman

2
เรียก API มีวิธีที่ดีกว่าที่จะทำเช่นนี้และสามารถ polyfilled เมื่อมีความจำเป็น (ดู @ PeterGibson ของคำตอบด้านล่าง )
Dominus.Vobiscum

190

ใน jQuery :

$.get(
    "somepage.php",
    {paramOne : 1, paramX : 'abc'},
    function(data) {
       alert('page content: ' + data);
    }
);

4
โปรดทราบว่านี่ไม่ทำงานใน IE 10 เมื่อพยายามเข้าถึง url ในโดเมนอื่นนอกเหนือจากโดเมนของหน้า
BornToCode

5
@BontToCode คุณควรตรวจสอบเพิ่มเติมและอาจจะเปิดบั๊กในตัวติดตามปัญหา jQuery ในกรณีนั้น
ashes999

92
ฉันรู้ว่าบางคนต้องการที่จะเขียนจาวาสคริปต์ที่บริสุทธิ์ ฉันเข้าใจ. ฉันไม่มีปัญหากับคนที่ทำเช่นนั้นในโครงการของพวกเขา ของฉัน "ใน jQuery:" ควรถูกตีความว่าเป็น "ฉันรู้ว่าคุณถามว่าจะทำอย่างไรใน Javascript แต่ให้ฉันแสดงให้คุณเห็นว่าคุณจะทำอย่างไรกับ jQuery เพื่อให้คุณอยากรู้อยากเห็นของคุณ ความชัดเจนที่คุณสามารถเพลิดเพลินกับการใช้ห้องสมุดนี้ซึ่งจะทำให้คุณได้เปรียบและเครื่องมืออื่น ๆ มากมายเช่นกัน "
Pistos

34
สังเกตว่าโปสเตอร์ต้นฉบับกล่าวในภายหลังว่า: "ขอบคุณสำหรับคำตอบทั้งหมด! ฉันไปกับ jQuery ตามบางสิ่งที่ฉันอ่านบนเว็บไซต์ของพวกเขา"
Pistos

153

คำแนะนำที่ดีมากมายด้านบน แต่ไม่สามารถนำกลับมาใช้ใหม่ได้และมักจะเต็มไปด้วยเรื่องไร้สาระของ DOM และปุยอื่น ๆ ที่ซ่อนรหัสง่าย ๆ

นี่คือคลาส Javascript ที่เราสร้างขึ้นซึ่งสามารถใช้ซ้ำได้และใช้งานง่าย ขณะนี้มีเพียงวิธีการ GET แต่ใช้งานได้สำหรับเรา การเพิ่มโพสต์ไม่ควรเสียภาษีทักษะของทุกคน

var HttpClient = function() {
    this.get = function(aUrl, aCallback) {
        var anHttpRequest = new XMLHttpRequest();
        anHttpRequest.onreadystatechange = function() { 
            if (anHttpRequest.readyState == 4 && anHttpRequest.status == 200)
                aCallback(anHttpRequest.responseText);
        }

        anHttpRequest.open( "GET", aUrl, true );            
        anHttpRequest.send( null );
    }
}

ใช้ง่ายเหมือน:

var client = new HttpClient();
client.get('http://some/thing?with=arguments', function(response) {
    // do something with response
});

ข้อผิดพลาด UnCaughtReference HttpClient ไม่ได้ถูกกำหนดไว้ ฉันได้บรรทัดนี้มาเอง
sashikanta

คุณเรียกมันจาก html onClick ได้อย่างไร
Gobliins

ทำให้ฟังก์ชั่นอื่นที่มีลูกค้า var ... และเพียงแค่เรียกใช้ functionName (); กลับเท็จ ใน onClick
mail929

1
ReferenceError: XMLHttpRequest is not defined
Bugs Buggy

123

window.fetchAPI ใหม่เป็นการแทนที่ที่สะอาดกว่าสำหรับการXMLHttpRequestใช้ประโยชน์จาก ES6 ตามสัญญา มีคำอธิบายที่ดีที่นี่แต่เดือดลงไปที่ (จากบทความ):

fetch(url).then(function(response) {
  return response.json();
}).then(function(data) {
  console.log(data);
}).catch(function() {
  console.log("Booo");
});

รองรับเบราว์เซอร์ได้ดีในรุ่นล่าสุด (ใช้งานได้ใน Chrome, Firefox, Edge (v14), Safari (v10.1), Opera, Safari iOS (v10.3), เบราว์เซอร์ Android และ Chrome สำหรับ Android) แต่ IE จะ อาจไม่ได้รับการสนับสนุนอย่างเป็นทางการ GitHub มีโพลีฟิลให้เลือกใช้ซึ่งแนะนำให้สนับสนุนเบราว์เซอร์รุ่นเก่าที่ยังคงใช้งานอยู่ (รุ่น esp ของ Safari ก่อนเดือนมีนาคม 2017 และเบราว์เซอร์มือถือจากช่วงเวลาเดียวกัน)

ฉันเดาว่าจะสะดวกกว่า jQuery หรือ XMLHttpRequest หรือไม่ขึ้นอยู่กับลักษณะของโครงการ

นี่คือลิงค์ไปยังข้อมูลจำเพาะhttps://fetch.spec.whatwg.org/

แก้ไข :

การใช้ async / wait ของ ES7 จะกลายเป็นเรื่องง่าย (ตามGist นี้ ):

async function fetchAsync (url) {
  let response = await fetch(url);
  let data = await response.json();
  return data;
}

9
ฉันอาจช่วยบางคนเวลาโดยกล่าวว่าคุณสามารถทำได้เพื่อรวมข้อมูลประจำตัวในคำขอ:fetch(url, { credentials:"include" })
Enselic

@ bugmenot123 window.fetchไม่ได้มาพร้อมกับตัวแยกวิเคราะห์ XML แต่คุณสามารถแยกการตอบสนองด้วยตัวคุณเองถ้าคุณจัดการมันเป็นข้อความ (ไม่ใช่ json ตามตัวอย่างด้านบน) ดูstackoverflow.com/a/37702056/66349สำหรับตัวอย่าง
Peter Gibson

94

รุ่นที่ไม่มีการติดต่อกลับ

var i = document.createElement("img");
i.src = "/your/GET/url?params=here";

2
ยอดเยี่ยม ฉันต้องการสคริปต์ Greasemonkey เพื่อให้เซสชันมีชีวิตอยู่และข้อมูลโค้ดนี้สมบูรณ์แบบ เพียงห่อไว้ในsetIntervalสาย
Carcamano

9
ฉันจะรับผลลัพธ์ได้อย่างไร
user4421975

@ user4421975 คุณไม่ได้รับ - เพื่อเข้าถึงการตอบกลับคำขอคุณต้องใช้ XMLHttpRequest ข้างต้นแทน
Jakub Pastuszuk

74

นี่คือรหัสที่จะทำโดยตรงกับ JavaScript แต่ตามที่กล่าวไว้ก่อนหน้านี้คุณจะดีขึ้นมากกับห้องสมุด JavaScript สิ่งที่ฉันชอบคือ jQuery

ในกรณีด้านล่างเพจ ASPX (ที่ให้บริการในฐานะเซอร์วิส REST ของชายยากจน) กำลังถูกเรียกให้ส่งคืนออบเจ็กต์ JavaScript JSON

var xmlHttp = null;

function GetCustomerInfo()
{
    var CustomerNumber = document.getElementById( "TextBoxCustomerNumber" ).value;
    var Url = "GetCustomerInfoAsJson.aspx?number=" + CustomerNumber;

    xmlHttp = new XMLHttpRequest(); 
    xmlHttp.onreadystatechange = ProcessRequest;
    xmlHttp.open( "GET", Url, true );
    xmlHttp.send( null );
}

function ProcessRequest() 
{
    if ( xmlHttp.readyState == 4 && xmlHttp.status == 200 ) 
    {
        if ( xmlHttp.responseText == "Not found" ) 
        {
            document.getElementById( "TextBoxCustomerName"    ).value = "Not found";
            document.getElementById( "TextBoxCustomerAddress" ).value = "";
        }
        else
        {
            var info = eval ( "(" + xmlHttp.responseText + ")" );

            // No parsing necessary with JSON!        
            document.getElementById( "TextBoxCustomerName"    ).value = info.jsonData[ 0 ].cmname;
            document.getElementById( "TextBoxCustomerAddress" ).value = info.jsonData[ 0 ].cmaddr1;
        }                    
    }
}

33
ตั้งแต่คำตอบนี้เป็นหนึ่งในผลด้านบนสำหรับ googling "http คำขอจาวาสคริปต์" มันมูลค่าการกล่าวขวัญว่าการทำงานใน EVAL ข้อมูลการตอบสนองเช่นนั้นถือว่าปฏิบัติไม่ดี
Kloar

9
@Kloar จุดที่ดี แต่มันจะดียิ่งขึ้นเพื่อให้เหตุผลว่าทำไมมันไม่ดีซึ่งฉันเดาว่าเป็นความปลอดภัย การอธิบายว่าทำไมการปฏิบัติที่ไม่ดีเป็นวิธีที่ดีที่สุดในการทำให้คนเปลี่ยนนิสัย
Balmipour

43

รุ่นที่คัดลอกวาง(ใช้ฟังก์ชันดึงข้อมูลและลูกศร ) :

//Option with catch
fetch( textURL )
   .then(async r=> console.log(await r.text()))
   .catch(e=>console.error('Boo...' + e));

//No fear...
(async () =>
    console.log(
            (await (await fetch( jsonURL )).json())
            )
)();

รุ่นคลาสสิคคัดลอกวาง:

let request = new XMLHttpRequest();
request.onreadystatechange = function () {
    if (this.readyState === 4) {
        if (this.status === 200) {
            document.body.className = 'ok';
            console.log(this.responseText);
        } else if (this.response == null && this.status === 0) {
            document.body.className = 'error offline';
            console.log("The computer appears to be offline.");
        } else {
            document.body.className = 'error';
        }
    }
};
request.open("GET", url, true);
request.send(null);


19

IE จะแคช URL เพื่อให้การโหลดเร็วขึ้น แต่ถ้าคุณพูดการสำรวจเซิร์ฟเวอร์เป็นระยะ ๆ เพื่อพยายามรับข้อมูลใหม่ IE จะแคช URL นั้นและจะส่งคืนชุดข้อมูลเดิมที่คุณมีอยู่เสมอ

ไม่ว่าคุณจะทำตามคำขอ GET ของคุณอย่างไร - วานิลลา JavaScript, Prototype, jQuery และอื่น ๆ - ตรวจสอบให้แน่ใจว่าคุณได้วางกลไกเพื่อต่อสู้กับการแคช ในการต่อสู้นั้นให้ใส่โทเค็นที่ไม่ซ้ำกันไว้ท้าย URL ที่คุณกำลังจะกดปุ่ม สามารถทำได้โดย:

var sURL = '/your/url.html?' + (new Date()).getTime();

นี่จะเพิ่มการประทับเวลาที่ไม่ซ้ำกันที่ส่วนท้ายของ URL และจะป้องกันไม่ให้แคชเกิดขึ้น


12

ต้นแบบทำให้ตายง่าย

new Ajax.Request( '/myurl', {
  method:  'get',
  parameters:  { 'param1': 'value1'},
  onSuccess:  function(response){
    alert(response.responseText);
  },
  onFailure:  function(){
    alert('ERROR');
  }
});

2
ปัญหาคือ Mac OS X ไม่ได้ติดตั้ง Prototype ไว้ล่วงหน้า เนื่องจากวิดเจ็ตต้องทำงานในคอมพิวเตอร์ทุกเครื่องรวมถึง Prototype (หรือ jQuery) ในแต่ละวิดเจ็ตไม่ใช่ทางออกที่ดีที่สุด
kiamlaluno

@kiamlaluno ใช้ Prototype cdn จาก cloudflare
Vladimir Stazhilov

10

ทางออกหนึ่งที่สนับสนุนเบราว์เซอร์รุ่นเก่า:

function httpRequest() {
    var ajax = null,
        response = null,
        self = this;

    this.method = null;
    this.url = null;
    this.async = true;
    this.data = null;

    this.send = function() {
        ajax.open(this.method, this.url, this.asnyc);
        ajax.send(this.data);
    };

    if(window.XMLHttpRequest) {
        ajax = new XMLHttpRequest();
    }
    else if(window.ActiveXObject) {
        try {
            ajax = new ActiveXObject("Msxml2.XMLHTTP.6.0");
        }
        catch(e) {
            try {
                ajax = new ActiveXObject("Msxml2.XMLHTTP.3.0");
            }
            catch(error) {
                self.fail("not supported");
            }
        }
    }

    if(ajax == null) {
        return false;
    }

    ajax.onreadystatechange = function() {
        if(this.readyState == 4) {
            if(this.status == 200) {
                self.success(this.responseText);
            }
            else {
                self.fail(this.status + " - " + this.statusText);
            }
        }
    };
}

อาจจะค่อนข้าง overkill แต่คุณไปอย่างปลอดภัยกับรหัสนี้

การใช้งาน:

//create request with its porperties
var request = new httpRequest();
request.method = "GET";
request.url = "https://example.com/api?parameter=value";

//create callback for success containing the response
request.success = function(response) {
    console.log(response);
};

//and a fail callback containing the error
request.fail = function(error) {
    console.log(error);
};

//and finally send it away
request.send();

2
ผู้คนสามารถให้ความเห็นเกี่ยวกับสิ่งที่ฉันทำผิดได้ไหม ไม่เป็นประโยชน์อย่างนั้น!
flyingP0tat0

คำตอบที่ดีที่สุดในความคิดของฉันหากมีการเข้ารหัสใน ES5 โดยใช้จาวาสคริปต์ธรรมดา
CoderX

8

ฉันไม่คุ้นเคยกับวิดเจ็ต Dashcode ของ Mac OS แต่หากพวกเขาให้คุณใช้ไลบรารี JavaScript และสนับสนุนXMLHttpRequestsฉันจะใช้jQueryและทำสิ่งนี้:

var page_content;
$.get( "somepage.php", function(data){
    page_content = data;
});

5

ในไฟล์ Info.plist ของวิดเจ็ตอย่าลืมตั้งค่าAllowNetworkAccessคีย์ของคุณเป็นจริง


5

วิธีที่ดีที่สุดคือการใช้ AJAX (คุณสามารถค้นหาบทช่วยสอนง่ายๆในหน้าTizagนี้) เหตุผลก็คือเทคนิคอื่น ๆ ที่คุณอาจใช้ต้องใช้รหัสมากกว่านั้นไม่รับประกันว่าจะทำงานข้ามเบราว์เซอร์โดยไม่ต้องทำใหม่และต้องการให้คุณใช้หน่วยความจำไคลเอนต์มากขึ้นโดยการเปิดหน้าเว็บที่ซ่อนอยู่ภายในเฟรมผ่าน URL AJAX เป็นวิธีที่จะไปในสถานการณ์นี้ ว่าสองปีของฉันจาวาสคริปต์พัฒนาพูดหนัก


5

สำหรับผู้ที่ใช้AngularJsมันคือ$http.get:

$http.get('/someUrl').
  success(function(data, status, headers, config) {
    // this callback will be called asynchronously
    // when the response is available
  }).
  error(function(data, status, headers, config) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

5

คุณสามารถรับคำขอ HTTP GET ได้สองวิธี:

  1. วิธีนี้ขึ้นอยู่กับรูปแบบ xml คุณต้องส่ง URL สำหรับคำขอ

    xmlhttp.open("GET","URL",true);
    xmlhttp.send();
  2. อันนี้ขึ้นอยู่กับ jQuery คุณต้องระบุ URL และ function_name ที่คุณต้องการโทร

    $("btn").click(function() {
      $.ajax({url: "demo_test.txt", success: function_name(result) {
        $("#innerdiv").html(result);
      }});
    }); 

5

ในการทำ API การดึงข้อมูลนี้เป็นวิธีการที่แนะนำโดยใช้สัญญา JavaScript XMLHttpRequest (XHR), วัตถุ IFrame หรือแท็กแบบไดนามิกเป็นวิธีที่เก่ากว่า (และ clunkier)

<script type=“text/javascript”> 
    // Create request object 
    var request = new Request('https://example.com/api/...', 
         { method: 'POST', 
           body: {'name': 'Klaus'}, 
           headers: new Headers({ 'Content-Type': 'application/json' }) 
         });
    // Now use it! 

   fetch(request) 
   .then(resp => { 
         // handle response }) 
   .catch(err => { 
         // handle errors 
    }); </script>

นี่คือตัวอย่างการดึงข้อมูลที่ยอดเยี่ยมและเอกสาร MDN


4
function get(path) {
    var form = document.createElement("form");
    form.setAttribute("method", "get");
    form.setAttribute("action", path);
    document.body.appendChild(form);
    form.submit();
}


get('/my/url/')

สิ่งเดียวกันสามารถทำได้สำหรับคำขอโพสต์เช่นกัน
ไปที่ลิงค์นี้คำขอโพสต์ JavaScript เช่นส่งแบบฟอร์ม


4

คำขอ async อย่างง่าย:

function get(url, callback) {
  var getRequest = new XMLHttpRequest();

  getRequest.open("get", url, true);

  getRequest.addEventListener("readystatechange", function() {
    if (getRequest.readyState === 4 && getRequest.status === 200) {
      callback(getRequest.responseText);
    }
  });

  getRequest.send();
}


2
// Create a request variable and assign a new XMLHttpRequest object to it.
var request = new XMLHttpRequest()

// Open a new connection, using the GET request on the URL endpoint
request.open('GET', 'restUrl', true)

request.onload = function () {
  // Begin accessing JSON data here
}

// Send request
request.send()

1

หากคุณต้องการใช้รหัสสำหรับวิดเจ็ต Dashboard และคุณไม่ต้องการรวมไลบรารี JavaScript ในทุกวิดเจ็ตที่คุณสร้างขึ้นคุณสามารถใช้วัตถุ XMLHttpRequest ที่ Safari รองรับ

ตามที่รายงานโดย Andrew Hedges วิดเจ็ตไม่มีการเข้าถึงเครือข่ายโดยค่าเริ่มต้น คุณต้องเปลี่ยนการตั้งค่าใน info.plist ที่เกี่ยวข้องกับวิดเจ็ต


1

เพื่อรีเฟรชคำตอบที่ดีที่สุดจาก joann โดยสัญญาว่านี่คือรหัสของฉัน:

let httpRequestAsync = (method, url) => {
    return new Promise(function (resolve, reject) {
        var xhr = new XMLHttpRequest();
        xhr.open(method, url);
        xhr.onload = function () {
            if (xhr.status == 200) {
                resolve(xhr.responseText);
            }
            else {
                reject(new Error(xhr.responseText));
            }
        };
        xhr.send();
    });
}

1

ทันสมัยสะอาดและสั้นที่สุด

fetch('https://www.randomtext.me/api/lorem')


0

คุณสามารถทำได้ด้วย JS บริสุทธิ์เช่นกัน:

// Create the XHR object.
function createCORSRequest(method, url) {
  var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr) {
// XHR for Chrome/Firefox/Opera/Safari.
xhr.open(method, url, true);
} else if (typeof XDomainRequest != "undefined") {
// XDomainRequest for IE.
xhr = new XDomainRequest();
xhr.open(method, url);
} else {
// CORS not supported.
xhr = null;
}
return xhr;
}

// Make the actual CORS request.
function makeCorsRequest() {
 // This is a sample server that supports CORS.
 var url = 'http://html5rocks-cors.s3-website-us-east-1.amazonaws.com/index.html';

var xhr = createCORSRequest('GET', url);
if (!xhr) {
alert('CORS not supported');
return;
}

// Response handlers.
xhr.onload = function() {
var text = xhr.responseText;
alert('Response from CORS request to ' + url + ': ' + text);
};

xhr.onerror = function() {
alert('Woops, there was an error making the request.');
};

xhr.send();
}

ดู: สำหรับรายละเอียดเพิ่มเติม: บทแนะนำ html5rocks


0
<button type="button" onclick="loadXMLDoc()"> GET CONTENT</button>

 <script>
        function loadXMLDoc() {
            var xmlhttp = new XMLHttpRequest();
            var url = "<Enter URL>";``
            xmlhttp.onload = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == "200") {
                    document.getElementById("demo").innerHTML = this.responseText;
                }
            }
            xmlhttp.open("GET", url, true);
            xmlhttp.send();
        }
    </script>

-1

นี่เป็นอีกทางเลือกหนึ่งของไฟล์ xml เพื่อโหลดไฟล์ของคุณเป็นวัตถุและเข้าถึงคุณสมบัติเป็นวัตถุด้วยวิธีที่รวดเร็วมาก

  • ข้อควรระวังเพื่อให้จาวาสคริปต์สามารถแปลความหมายและเนื้อหาได้อย่างถูกต้องมีความจำเป็นต้องบันทึกไฟล์ของคุณในรูปแบบเดียวกับหน้า HTML ของคุณ หากคุณใช้ UTF 8 ให้บันทึกไฟล์ของคุณใน UTF8 เป็นต้น

XML ทำงานเป็นแผนผังได้ไหม? แทนการเขียน

     <property> value <property> 

เขียนไฟล์อย่างง่ายเช่นนี้:

      Property1: value
      Property2: value
      etc.

บันทึกไฟล์ของคุณ .. ตอนนี้เรียกใช้ฟังก์ชัน ....

    var objectfile = {};

function getfilecontent(url){
    var cli = new XMLHttpRequest();

    cli.onload = function(){
         if((this.status == 200 || this.status == 0) && this.responseText != null) {
        var r = this.responseText;
        var b=(r.indexOf('\n')?'\n':r.indexOf('\r')?'\r':'');
        if(b.length){
        if(b=='\n'){var j=r.toString().replace(/\r/gi,'');}else{var j=r.toString().replace(/\n/gi,'');}
        r=j.split(b);
        r=r.filter(function(val){if( val == '' || val == NaN || val == undefined || val == null ){return false;}return true;});
        r = r.map(f => f.trim());
        }
        if(r.length > 0){
            for(var i=0; i<r.length; i++){
                var m = r[i].split(':');
                if(m.length>1){
                        var mname = m[0];
                        var n = m.shift();
                        var ivalue = m.join(':');
                        objectfile[mname]=ivalue;
                }
            }
        }
        }
    }
cli.open("GET", url);
cli.send();
}

ตอนนี้คุณสามารถรับค่าของคุณได้อย่างมีประสิทธิภาพ

getfilecontent('mesite.com/mefile.txt');

window.onload = function(){

if(objectfile !== null){
alert (objectfile.property1.value);
}
}

มันเป็นเพียงของขวัญเล็ก ๆ ที่จะสานต่อกลุ่ม ขอบคุณที่คุณชอบ :)

หากคุณต้องการทดสอบฟังก์ชั่นบนเครื่อง PC ของคุณให้รีสตาร์ทเบราว์เซอร์ด้วยคำสั่งต่อไปนี้ (รองรับโดยเบราว์เซอร์ทั้งหมดยกเว้นซาฟารี):

yournavigator.exe '' --allow-file-access-from-files
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.