Apakah fungsi ajax?

Fungsi ajax termasuk: 1. "$(selector).load()", digunakan untuk memuatkan data jauh ke dalam elemen yang dipilih; 3. "$ ()"; 4. "$.post()"; 5. "$.getJSON()"; 6. "$.getScript()".

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi JavaScript 1.8.5, komputer Dell G3.

Fungsi permintaan AJAX

(url) URL (alamat) data yang sedang dimuatkan

(data) Objek kunci/nilai data yang dihantar ke pelayan

(panggilan balik) Apabila data dimuatkan, semua Fungsi dilaksanakan

(jenis) Jenis data yang dikembalikan (html, xml, json, jasonp, skrip, teks)

(pilihan) Semua pilihan pasangan kunci/nilai AJAX yang lengkap permintaan

1, $.get(url,[data],[panggilan balik])

Penjelasan: url ialah alamat permintaan, data ialah senarai data yang diminta , dan panggilan balik ialah Fungsi panggil balik selepas permintaan yang berjaya Fungsi ini menerima dua parameter Parameter pertama ialah data yang dikembalikan oleh pelayan, dan parameter kedua ialah parameter pilihan.

Antaranya, format data yang dikembalikan oleh pelayan sebenarnya adalah format rentetan, bukan format data json yang kami mahukan di sini hanya untuk perbandingan dan ilustrasi

$.get("data.php",$("#firstName.val()"),function(data){
$("#getResponse").html(data); }//返回的data是字符串类型
);

2 , $.post(url,[data],[panggilan balik],[type])

Penjelasan: Fungsi ini serupa dengan parameter $.get(), dengan tambahan jenis parameter, jenis adalah permintaan Jenis data boleh menjadi html, xml, json dan jenis lain Jika kita menetapkan parameter ini kepada: json, maka format yang dikembalikan akan menjadi format json Format yang dikembalikan oleh $.get() adalah sama, kedua-duanya adalah rentetan

$.post("data.php",$("#firstName.val()"),function(data){
$("#postResponse").html(data.name);
},"json"//设置了获取数据的类型，所以得到的数据格式为json类型的
);

Tiga, $.ajax(opiton)

Penerangan: $.ajax () Fungsi ini berkuasa dan boleh melakukan banyak kawalan tepat pada ajax Jika anda memerlukan penjelasan terperinci, sila rujuk maklumat yang berkaitan

$.ajax({
url: "ajax/ajax_selectPicType.aspx",
data:{Full:"fu"},
type: "POST",
dataType:'json',
success:CallBack,
error:function(er){
BackErr(er);}
});

4. $.getJSON(url,[data] ,[panggilan balik ])

$.getJSON("data.php",$("#firstName.val()"),function(jsonData){
$("#getJSONResponse").html(jsonData.id);}//无需设置，直接获取的数据类型为json，所以调用时需要使用jsonData.id方式
);

Apabila Ajax bertemu jQuery Terdapat lebih banyak dan lebih banyak aplikasi berasaskan AJAX, dan untuk pembangun bahagian hadapan, bukanlah perkara yang menyenangkan untuk berurusan secara langsung dengan HTTPRequest yang mendasari. Memandangkan jQuery dikapsulkan JavaScript, saya mesti mempertimbangkan isu aplikasi AJAX. Sesungguhnya, jika anda menggunakan jQuery untuk menulis AJAX, ia akan menjadi N kali lebih mudah daripada menulisnya terus dalam JS. (Saya tidak tahu cara menggunakan jQuery. Adakah anda akan kehilangan pengetahuan anda tentang JS...) Di sini diandaikan bahawa semua orang sudah biasa dengan sintaks jQuery, dan mari kita buat beberapa ringkasan beberapa aplikasi ajax.

Muat halaman statik

muat( url, [data], [panggilan balik] );
url (String) alamat URL halaman HTML yang diminta
data (Peta) (parameter pilihan) data kunci/nilai dihantar ke pelayan
fungsi panggil balik (Panggil Balik) (parameter pilihan) apabila permintaan selesai (tidak perlu berjaya)

kaedah load() boleh memuatkan kandungan halaman statik dengan mudah ke dalam objek jQuery yang ditentukan.

$('#ajax-p').load('data.html');

Dengan cara ini, kandungan data.html akan dimuatkan ke dalam objek DOM dengan ID ajax-p. Anda juga boleh melaksanakan operasi Ajax untuk memuatkan sebahagian kandungan dengan menentukan ID, seperti:

$('#ajax-p').load('data.html#my-section');

Melaksanakan kaedah GET dan POST

get( url, [data], [callback] )

• url ( String ) Alamat URL untuk menghantar permintaan.

• data (Peta) (parameter pilihan) Data yang akan dihantar ke pelayan, dinyatakan dalam bentuk pasangan Kunci/nilai, akan digunakan sebagai QueryString Dilampirkan pada URL permintaan

• fungsi panggil balik (Panggil Balik) (parameter pilihan) apabila pemuatan berjaya (kaedah ini dipanggil hanya apabila status pengembalian Respons berjaya)
  

Jelas sekali ini adalah fungsi yang secara khusus melaksanakan kaedah GET, dan ia agak mudah untuk digunakan

$.get('login.php', {
   id      : 'Robin',
   password: '123456',
   gate    : 'index'
  }, function(data, status) {
   //data为返回对象，status为请求的状态
   alert(data);
   //此时假设服务器脚本会返回一段文字"你好，Robin！"，
那么浏览器就会弹出对话框显示该段文字
   alert(status);
   //结果为success, error等等，但这里是成功时才能运行的函数
  });

post( url, [data], [callback], [type] )

• url ( String) alamat URL untuk menghantar permintaan.
  

• data (Peta) (parameter pilihan) Data yang akan dihantar ke pelayan, dinyatakan dalam bentuk Pasangan kunci/nilai

• fungsi panggil balik (Panggil Balik) (parameter pilihan) apabila pemuatan berjaya (kaedah ini dipanggil hanya apabila status pengembalian Respons berjaya)

• jenis (String) (parameter pilihan) Jenis data yang diminta, xml, teks, json, dll.

juga merupakan fungsi mudah yang disediakan oleh jQuery, penggunaannya

$.post('regsiter.php', {
   id:'Robin',
   password: '123456',
   type:'user'
  },function(data, status) {
   alert(data);
  }, "json");

Fungsi pemuatan skrip dipacu peristiwa: getScript()

getScript( url, [callback] )

• url (String) alamat fail JS untuk dimuatkan

• fungsi panggil balik (Fungsi) (pilihan) selepas berjaya memuatkan
  

Fungsi getScript() boleh memuatkan dan melaksanakan skrip JavaScript dari jauh. Fungsi ini boleh menjangkau Domain memuatkan fail JS (ajaib...?!). Kepentingan fungsi ini sangat besar Ya, ia boleh mengurangkan jumlah kod untuk pemuatan awal halaman, kerana anda boleh memuatkan fail JS yang sepadan berdasarkan interaksi pengguna dan bukannya memuatkan semuanya apabila halaman dimulakan.

$.getScript('ajaxEvent.js', function() {
   alert("Scripts Loaded!");
   //载入ajaxEvent.js，并且在成功载入后显示对话框提示。
  });

Bina jambatan untuk komunikasi data: getJSON()

getJSON(url,[data],[callback])

• url (String) Hantar alamat permintaan

• data (Peta) (pilihan) Parameter kunci/nilai untuk dihantar

• fungsi panggil balik (Fungsi) (pilihan) apabila pemuatan berjaya.
  

JSON ialah format penghantaran data yang ideal yang boleh disepadukan dengan baik dengan JavaScript atau bahasa hos yang lain. bahasa dan boleh digunakan secara langsung oleh JS. Menggunakan JSON berbanding tradisional GET dan POST terus menghantar data "bogel", yang lebih munasabah dalam struktur dan lebih selamat. Bagi fungsi getJSON() jQuery, ia hanya menetapkan parameter JSON. Versi ringkas fungsi ajax(). Fungsi ini juga boleh digunakan merentas domain dan mempunyai kelebihan tertentu berbanding get() dan post(). Selain itu, fungsi ini boleh ditulis dengan menulis url permintaan Dalam format "myurl?callback=X", biarkan program melaksanakan fungsi panggil balik X.

$.getJSON('feed.php',{
   request: images,
   id:      001,
   size:    large
   }, function(json) {
    alert(json.images[0].link);
    //此处json就是远程传回的json对象，假设其格式如下：
    //{'images' : [
    // {link: images/001.jpg, x :100, y : 100},
    // {link: images/002.jpg, x : 200, y 200:}
    //]};
   }
 );

Fungsi ajax() peringkat bawah

Walaupun fungsi get() dan post() sangat ringkas dan mudah digunakan, fungsi tersebut masih tidak dapat mencapai beberapa keperluan reka bentuk yang lebih kompleks, seperti membuat tindakan berbeza pada masa yang berbeza apabila ajax dihantar. jQuery menyediakan fungsi yang lebih khusus: ajax().

ajax( pilihan )

ajax() menyediakan sejumlah besar parameter, jadi ia boleh melaksanakan fungsi yang agak kompleks.

你可以指定xml、script、html、json作为其数据类型，可以为beforeSend、error、sucess、complete等状态设置 处理函数，众多其它参数也可以订完完全全定义用户的Ajax体验。下面的例子中，我们用ajax()来调用一个XML文档：

$.ajax({
    url: 'doc.xml',
    type: 'GET',
    dataType: 'xml',
    timeout: 1000,
    error: function(){
        alert('Error loading XML document');
    },
    success: function(xml){
        alert(xml);
  //此处xml就是XML的jQuery对象了，你可以用find()、next()或XPath等方法在里面寻找节点，
和用jQuery操作HTML对象没有区别
    }
});

进一步了解AJAX事件

前面讨论的一些方法都有自己的事件处理机制，从页面整体来说，都只能说是局部函数。jQuery提供了AJAX全局函数的定义，以满足特殊的需求。下面是jQuery提供的所有函数（按照触发顺序排列如下）：

• ajaxStart
  (全局事件) 开始新的Ajax请求，并且此时没有其他ajax请求正在进行

• beforeSend
  (局部事件) 当一个Ajax请求开始时触发。如果需要，你可以在这里设置XMLHttpRequest对象

• ajaxSend
  (全局事件) 请求开始前触发的全局事件

• success
  (局部事件) 请求成功时触发。即服务器没有返回错误，返回的数据也没有错误

• ajaxSuccess
  全局事件全局的请求成功

• error
  (局部事件) 仅当发生错误时触发。你无法同时执行success和error两个回调函数

• ajaxError
  全局事件全局的发生错误时触发

• complete
  (局部事件) 不管你请求成功还是失败，即便是同步请求，你都能在请求完成时触发这个事件

• ajaxComplete
  全局事件全局的请求完成时触发

• ajaxStop
  (全局事件) 当没有Ajax正在进行中的时候，触发
  局部事件在之前的函数中都有介绍，我们主要来看看全局事件。对某个对象进行全局事件监听，那么全局中的AJAX动作，都会对其产生影响。比如，当页面在进行AJAX操作时，ID为”loading”的p就显示出来：

$("#loading").ajaxStart(function(){
   $(this).show();
 });

全局事件也可以帮助你编写全局的错误相应和成功相应，而不需要为每个AJAX请求独立设置。有必要指出，全局事件的参数是很有用的。除了 ajaxStart、ajaxOptions，其他事件均有event, XMLHttpRequest, ajaxOptions三个参数。第一个参数即事件本身；第二个是XHR对象；第三个是你传递的ajax参数对象。在一个对象里显示全局的AJAX情况：

$("#msg").beforeSend(function(e,xhr,o) {
 $(this).html("正在请求"+o.url);
 }).ajaxSuccess(function(e,xhr,o) {
 $(this).html(o.url+"请求成功");
 }).ajaxError(function(e,xhr,o) {
 $(this).html(o.url+"请求失败");
});

很显然，第三个参数也可以帮助你传递你在AJAX事件里加入的自定义参数。 在单个AJAX请求时，你可以将global的值设为false，以将此请求独立于AJAX的全局事件。

$.ajax({
   url: "request.php",
   global: false,
   // 禁用全局Ajax事件.
 });

如果你想为全局AJAX设置参数，你会用上ajaxSetup()函数。例如，将所有AJAX请求都传递到request.php，；禁用全局方法；强制用POST方法传递：

$.ajaxSetup({
  url: "request.php",
  global: false,
  type: "POST"
});

【相关教程推荐：AJAX视频教程】

Atas ialah kandungan terperinci Apakah fungsi ajax?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!