suchen

Heim  >  Artikel  >  Web-Frontend  >  Informationen zur Verwendung von Ajax und JSONP

Informationen zur Verwendung von Ajax und JSONP

零到壹度
零到壹度Original
2018-03-29 10:35:591250Durchsuche

Dieser Artikel enthält hauptsächlich einen Artikel über die Verwendung von Ajax und JSONP. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich sein wird. Folgen wir dem Herausgeber und werfen wir einen Blick darauf.

1. Ajax

  • Definition: Eine Technologie, die HTTP-Anfragen für asynchrone Kommunikation mit dem Hintergrund sendet .

  • Prinzip: Instanziieren Sie das xmlhttp-Objekt und verwenden Sie dieses Objekt, um mit dem Hintergrund zu kommunizieren.

Ajax-Same-Origin-Richtlinie:

  • Ajax-angeforderte Seiten oder Ressourcen können nur Ressourcen unter derselben Domäne sein, nicht Ressourcen anderer Domänen basiert auf Sicherheitsüberlegungen beim Entwurf von Ajax.

Ajax-Methode:

1. $.ajax({}):

  • Gemeinsame Parameter:

    • URL: Netzwerkadresse anfordern

    • Typ: Anforderungsmethode, der Standardwert ist „GET“, häufig verwendet „POST“

    • dataType: Legen Sie das zurückgegebene Datenformat fest, im Allgemeinen mit JSON oder HTML und JSONP

    • Data: Legen Sie die an den Server gesendeten Daten fest

    • .done(): Rückruffunktion festlegen, nachdem die Anfrage erfolgreich war

    • .fail(): Rückruffunktion festlegen, nachdem die Anfrage fehlgeschlagen ist

    • asynchron: Legen Sie fest, ob asynchron sein soll. Der Standardwert ist „true“, was asynchron bedeutet

  • Codeverwendung: 

$(function () {
    $("input").click(function () {
        $.ajax({
            url: "./data.json",
            type: "get",
            dataType: "json",
        });
        .done(function(data) {//请求成功的回调函数
            $("input").val(dat.name);
        })
        .fail(function() {
            alert('服务器超时，请重试！');
        });
    });
})

......
<body>    <p>
        <input type="button" value="xinzhi">
    </p></body>
Hinweis: Daten stellen die vom Hintergrund zurückgegebenen Daten dar; die Verwendung von Ajax muss von der Serverumgebung abhängen.

2. $.get():

  • Die Methode $.get() verwendet eine GET-Anfrage, um Daten vom Server zu laden Daten ohne Aktualisierungsmethode.

  • Parameter:

    • URL: Die besuchte URL muss derselben Ursprungsrichtlinie folgen; >

      Daten: An den Server gesendete Daten.

    • function(data,status){}: Fordern Sie die erfolgreiche Ausführung der Funktion an

    • dataType: Der Datentyp der Anforderungsantwort. 

//参考代码：$(function () {
    $("input").click(function () {
        $.get(            "./data.json",            function (data,status) {                console.log(data.name);
            },            "json"
        );
    
    });
})

......
<body>    <p>
        <input type="button" value="xinzhi">
    </p></body>
Die Parameter der $.get()-Methode unterscheiden sich von denen von $.ajax(). Die URL ist ein erforderlicher Parameter. und die anderen drei optional.

  • Daten sind die zurückgegebenen Daten, Status stellt den Status der Anfrage dar, im Allgemeinen einschließlich „Erfolg“, „Fehler“, „Zeitüberschreitung“ usw.

  • Wenn der Datentyp jsonp ist, können Sie Daten auch domänenübergreifend anfordern

  • Es gibt keine Rückruffunktion für Anforderungsfehler

  • 3. $.post()

$.get()-Methode verwendet POST-Anfrage, um Daten vom Server zu laden; Methode, die es verwendet, und $. Die Methode get() ist genau die gleiche.

  • 4 vom Server, keine Angabe des Datentyps erforderlich, Rückgabe Die Daten werden automatisch in das Element

  • Parameter:

    URL eingefügt : Adresse;

    • Daten: Anfrageparameter, optional;

    • Funktion (Antwort, Status, xhr): Rückruffunktion für erfolgreiche Anfrage 🎜 >

    • Die zurückgegebenen Daten werden in p abgelegt;

    • kann nicht auf Daten domänenübergreifend zugreifen;

    • Antwort sind die zurückgegebenen Daten und Status ist der Status der Anfrage; 
$(function () {
    $("input").click(function () {
        $(".box").load(            "./data.json",            function (response,status) {
                console.log(data.name);
            }
        );
    });
})

......
<body>
    <p>
        <input type="button" value="xinzhi">
        <p class="box"></p>
    </p>
</body>
Es gibt keine Rückruffunktion bei fehlgeschlagener Anfrage

  • 4 . getJSON( )

  • Methode verwendet AJAX HTTP GET-Anfrage, um JSON-Daten zu erhalten

  • Parameter:

    • URL: Anforderungs-URL, erforderliche Parameter;

    Daten: an den Server gesendete Daten;

    • Funktion(Daten, Status , xhr): Rückruffunktion für erfolgreiche Anfrage

    • Methode ruft JSON-Daten direkt ab; >Keine Rückruffunktion, die einen Fehler zurückgibt;

    • Die Rückruffunktion ist eine benannte Funktion, keine anonyme Funktion

    • 5. 
$(function () {
    $("input").click(function () {
        $.getJSON(            "./data.json",            function(data,status) {                console.log(data.name);
            },
        );
    
    });
})

......
<body>    <p>
        <input type="button" value="xinzhi">
    </p></body>
Methode verwendet AJAX HTTP GET-Anfrage, um JS-Code abzurufen und auszuführen

  • Parameter:

  • <.>URL: Anfrage-URL, erforderliche Parameter;

  • Funktion (Daten, Status): Rückruffunktion für erfolgreiche Anfrage

  • Die zurückgegebenen Ergebnisdaten sind JS-Code

  • Diese Methode kann zum dynamischen Laden von JS-Code verwendet werden.

    • 2. jsonp

    • Definition: Ein Datenkommunikationsformat, das HTTP-Anfragen über Domänen hinweg senden und in Ajax eingebettet werden kann.

Prinzip: Verwenden Sie das Skript-Tag, um Ressourcen domänenübergreifend zu verknüpfen. 
$(function () {
    $("input").click(function () {
        $.getScript(            "./data.js",            function(data,status) {                console.log(data);
            },
        );
    
    });
})

......
<body>    <p>
        <input type="button" value="xinzhi">
    </p></body>

  • Verwendung 1: Funktionsparameterübergabe

  • Anleitung: Definieren Sie eine data.js-Datei extern. Der Pfad dieser Datei kann in einer anderen Domäne liegen als die aktuelle Seite unten.

    Inhalt von data.js: 
    • aa({    
    "data":{        "name":"xiaohong",        "age":"18"
    }
})

    • 将数据以页面定义的函数的参数的形式传递进去，从而获取数据。

    • 本质上可以将数据拆分，使得数据不用强制保存在同一个域名下。

    用法二：利用ajax

    $.ajax({
    url:&#39;...../data.js&#39;,//可以不是本地域名 
    type:&#39;get&#39;,
    dataType:&#39;jsonp&#39;,  //jsonp格式访问
    jsonpCallback:&#39;aa&#39;  //获取数据的函数})
.done(function(data){    console.log(data.name);
})
.fail(function() {
    alert(&#39;服务器超时，请重试！&#39;);
});

    • data.js的内容和上面一样。

    • 使用ajax的方法本质上也是script标签可以跨域链接资源，不过jquery为其封装了相同的方法，看起来一样。

    • 以上代码的执行过程为：ajax通过jsonp技术跨域访问data.js文件，通过找到aa()方法将其参数传递给.done方法的data参数执行.done方法。

    • 目前这种方式仍然有其局限性，就是必须知道data.js文件的名字和定义的方法aa，如果在仅仅知道域名的情况下，需要另外的方法.

    用法三

    var $input = $("input");
$input.keyup(function () {
    $.ajax({
        url:&#39;https://sug.so.360.cn/suggest?&#39;,//请求360搜索的联想数据
        type:&#39;get&#39;,
        dataType:&#39;jsonp&#39;,  //jsonp格式访问
        data: {word: $input.val()},
    })
    .done(function(data){
        console.log(data);
    })
    .fail(function() {
        alert(&#39;服务器超时，请重试！&#39;);
    });
})

....
<body>
    <input type="text">
</body>

    • 通过浏览器查看每次输入关键字服务器发送回的数据包，找到js文件中header的地址以及相关的提交数据，发现key为word关键字，因此可以向服务器发送data数据。

    • 服务器返回的数据会自动传给回调的匿名函数的参数data.

Das obige ist der detaillierte Inhalt vonInformationen zur Verwendung von Ajax und JSONP. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

json jquery ajax html 数据类型 封装 Error 回调函数 JS function 对象 异步 http word
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So implementieren Sie echtes Paging in Vue.jsNächster Artikel：So implementieren Sie echtes Paging in Vue.js

In Verbindung stehende Artikel

Mehr sehen