http الحصول على طلب في جافا سكريبت؟

Question

أنا بحاجة إلى القيام http الحصول على طلب في JavaScript. ما هي أفضل طريقة للقيام بذلك؟

أحتاج إلى القيام بذلك في جهاز Mac OS X DashCode.

Answer 1

توفر المتصفحات (و 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);
}

Answer 2

في jQuery:

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

Answer 3

الكثير من النصائح الرائعة أعلاه ، ولكن لا يمكن إعادة استخدامها للغاية ، وغالبًا ما تكون مليئة بالهراء وغيرها من الزغب الذي يخفي الرمز السهل.

إليك فئة JavaScript التي أنشأناها قابلة لإعادة الاستخدام وسهلة الاستخدام. حاليا لديها طريقة الحصول فقط ، ولكن هذا يناسبنا. لا ينبغي لإضافة منشور فرض ضرائب على مهارات أي شخص.

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
});

Answer 4

نسخة بدون رد فعل

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

Answer 5

الجديد window.fetch API هو استبدال أنظف ل 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) و Browser android و Chrome for Android) ، ومع ذلك لن يكون IE على الأرجح لن يكون احصل على دعم رسمي. جيثب لديه polyfill متاح الذي يوصى بدعم المتصفحات القديمة التي لا تزال مستخدمة إلى حد كبير (إصدارات ESP من Safari قبل مارس 2017 ومتصفحات الهاتف المحمول من نفس الفترة).

أظن ما إذا كان هذا أكثر ملاءمة من jQuery أو XMLHTTPrequest أم لا يعتمد على طبيعة المشروع.

إليك رابط للمواصفات https://fetch.spec.whatwg.org/

يحرر:

باستخدام ES7 Async/ينتظر ، يصبح هذا ببساطة (بناءً على هذا جوهر):

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

Answer 6

فيما يلي رمز للقيام بذلك مباشرة مع JavaScript. ولكن ، كما ذكرنا سابقًا ، ستكون أفضل حالًا مع مكتبة JavaScript. المفضل لدي هو jQuery.

في الحالة أدناه ، يتم استدعاء صفحة ASPX (التي تخدم كخدمة راحة رجل فقير) لإعادة كائن 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;
        }                    
    }
}

Answer 7

نسخة جاهزة للنسخ

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);

Answer 8

IE سوف تقوم بتخزين عناوين URL من أجل جعل التحميل بشكل أسرع ، ولكن ، على سبيل المثال ، تقوم ، على سبيل المثال ، بإجراء استقصاء خادم على فترات تحاول الحصول على معلومات جديدة ، على سبيل المثال ، سوف يتم تخزينك في عنوان URL ومن المحتمل أن يعيد نفس مجموعة البيانات التي كان لديك دائمًا.

بغض النظر عن الطريقة التي ينتهي بها الأمر إلى الحصول على طلبك - الفانيليا جافا سكريبت ، النموذج الأولي ، jQuery ، إلخ - تأكد من وضع آلية في مكانها لمكافحة التخزين المؤقت. من أجل مكافحة ذلك ، قم بإلحاق رمز فريد حتى نهاية عنوان URL الذي ستضربه. يمكن القيام بذلك بواسطة:

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

سيؤدي ذلك إلى إلحاق طابع زمني فريد حتى نهاية عنوان URL وسيمنع حدوث أي تخزين مؤقت.

Answer 9

قصير ونقي:

const http = new XMLHttpRequest()

http.open("GET", "https://api.lyrics.ovh/v1/toto/africa")
http.send()

http.onload = () => console.log(http.responseText)

Answer 10

النموذج المبدئي يجعلها ميتة بسيطة

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

Answer 11

لست على دراية بأدوات DashCode Mac OS ، ولكن إذا سمحوا لك باستخدام مكتبات JavaScript ودعمها xmlhttprequests, ، سأستخدم jQuery وافعل شيئًا كهذا:

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

Answer 12

حل واحد يدعم المتصفحات القديمة:

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);
            }
        }
    };
}

ربما مبالغة إلى حد ما ولكنك بالتأكيد تذهب آمنة مع هذا الرمز.

الاستخدام:

//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();

Answer 13

في ملف info.plist الخاص بعنصر واجهة المستخدم ، لا تنسى ضبطك AllowNetworkAccess مفتاح صحيح.

Answer 14

أفضل طريقة لاستخدام Ajax (يمكنك العثور على برنامج تعليمي بسيط في هذه الصفحة tizag). والسبب هو أن أي تقنية أخرى قد تستخدمها تتطلب المزيد من التعليمات البرمجية ، فلا يضمن العمل متصفحًا متقاطعًا دون إعادة صياغة ويتطلب منك استخدام المزيد من ذاكرة العميل عن طريق فتح الصفحات المخفية داخل الإطارات التي تمرر عناوين URL التي تحلل بياناتها وإغلاقها. أياكس هو الطريق للذهاب في هذا الموقف. أن بلدي عامين من JavaScript التنمية الثقيلة يتحدث.

Answer 15

لأولئك الذين يستخدمون 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.
  });

Answer 16

يمكنك الحصول على طلب HTTP بطريقتين:

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);
     }});
   }); 
   

Answer 17

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 مثل إرسال نموذج

Answer 18

للقيام بهذا الجلب 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

Answer 19

طلب 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();
}

Answer 20

أياكس

سيكون من الأفضل استخدام مكتبة مثل النموذج المبدئي أو jQuery.

Answer 21

إذا كنت ترغب في استخدام الرمز لعنصر واجهة مستخدم لوحة المعلومات ، ولا ترغب في تضمين مكتبة JavaScript في كل عنصر واجهة مستخدم قمت بإنشائه ، فيمكنك استخدام الكائن XmlHttprequest الذي يدعمه Safari أصليًا.

كما ذكرت أندرو هيدجز ، لا تتمتع عنصر واجهة مستخدم بالوصول إلى الشبكة بشكل افتراضي ؛ تحتاج إلى تغيير هذا الإعداد في info.plist المرتبط بالعناصر واجهة المستخدم.

Answer 22

لتحديث أفضل إجابة من جوان مع وعد هذا هو رمز بلدي:

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();
    });
}

Answer 23

يمكنك القيام بذلك مع 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 البرنامج التعليمي

Answer 24

فيما يلي بديل لملفات XML لتحميل ملفاتك ككائن والوصول إلى خصائص ككائن بطريقة سريعة جدًا.

• الانتباه ، بحيث يمكن له JavaScript وتفسير المحتوى بشكل صحيح ، من الضروري حفظ ملفاتك بنفس تنسيق صفحة 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);
}
}

إنها مجرد هدية صغيرة للتنظيم للمجموعة. شكرا لك مثل :)

إذا كنت ترغب في اختبار الوظيفة على جهاز الكمبيوتر الخاص بك محليًا ، فأعد تشغيل المتصفح الخاص بك مع الأمر التالي (مدعوم من جميع المتصفحات باستثناء Safari):

yournavigator.exe '' --allow-file-access-from-files