Rumah > Artikel > hujung hadapan web > Penjelasan terperinci tentang penggunaan bersama jQuery, Ajax dan JSONP dalam JavaScript_jquery
Dengan bantuan XMLHttpRequest, penyemak imbas boleh berinteraksi dengan pelayan tanpa menyegarkan keseluruhan halaman Ini adalah apa yang dipanggil Ajax (JavaScript Asynchronous dan XML). Ajax boleh memberikan pengguna pengalaman pengguna yang lebih kaya.
Permintaan Ajax didorong oleh JavaScript Permintaan dihantar ke URL melalui kod JavaScript Apabila pelayan membalas, fungsi panggilan balik akan dicetuskan oleh pelayan boleh diproses dalam fungsi panggil balik. Memandangkan keseluruhan proses penghantaran permintaan dan respons adalah tak segerak, kod Javascript lain dalam halaman akan terus dilaksanakan dalam tempoh ini tanpa gangguan.
jQuery pastinya memberikan sokongan yang baik untuk Ajax, dan ia juga menghilangkan perbezaan yang menyakitkan dalam sokongan Ajax antara pelbagai pelayar. Ia bukan sahaja menyediakan kaedah $.ajax() berciri penuh, tetapi juga lebih banyak fungsi seperti $.get(), $.getScript(), $.getJSON(), $.post() dan $().load (), dsb. Untuk kaedah yang mudah.
Walaupun ia dinamakan Ajax, banyak aplikasi Ajax tidak menggunakan XML, terutamanya aplikasi jQuery Ajax, sebaliknya, ia lebih biasa digunakan: teks biasa, HTML dan JSON (JavaScript) Object Notation. .
Secara amnya, disebabkan oleh sekatan dasar asal yang sama (protokol yang sama, nama domain yang sama, port yang sama), Ajax tidak boleh melaksanakan permintaan merentas domain, melainkan penyelesaian seperti JSONP (JSON dengan Padding) digunakan untuk mencapai beberapa permintaan yang terjejas. Fungsi merentas domain terhad.
Beberapa konsep penting tentang Ajax
GET vs POST, ini adalah dua kaedah yang paling biasa digunakan untuk menghantar permintaan ke pelayan Pemahaman yang betul tentang perbezaan antara kedua-dua kaedah ini adalah sangat penting untuk pembangunan Ajax.
Kaedah GET biasanya digunakan untuk melakukan beberapa operasi yang tidak merosakkan (iaitu, hanya mendapatkan maklumat daripada pelayan tanpa mengubah suai maklumat pada pelayan). Sebagai contoh, perkhidmatan pertanyaan carian biasanya menggunakan permintaan GET. Selain itu, permintaan GET juga mungkin dicache oleh penyemak imbas, yang mungkin menyebabkan beberapa masalah yang tidak dapat diramalkan. Secara amnya, permintaan GET hanya boleh menghantar data ke pelayan melalui rentetan pertanyaan.
Kaedah POST biasanya digunakan untuk melakukan beberapa operasi yang merosakkan pada pelayan (iaitu, mengubah suai data pada pelayan). Sebagai contoh, apabila anda menerbitkan catatan blog, anda harus menggunakan permintaan POST. Tidak seperti permintaan GET, permintaan POST tidak mempunyai masalah caching. Dalam permintaan POST, rentetan pertanyaan sebagai sebahagian daripada URL juga boleh menyerahkan data kepada pelayan, tetapi kaedah ini tidak disyorkan Semua data harus dihantar secara berasingan daripada URL.
Jenis data, jQuery biasanya memerlukan penentuan jenis data yang dikembalikan oleh pelayan Dalam sesetengah kes, jenis data mungkin sudah disertakan dalam nama kaedah, seperti $.getJSON(). tersedia Sebahagian daripada objek yang dikonfigurasikan yang akhirnya akan digunakan sebagai parameter kaedah $.ajax(). Jenis data biasanya termasuk yang berikut:
Pelaksanaan tak segerak, A dalam Ajax merujuk kepada tak segerak. Pada ketika ini, mungkin sukar bagi ramai pemula jQuery untuk memahami apa itu tak segerak, kerana permintaan Ajax adalah tak segerak secara lalai, dan maklumat yang dikembalikan oleh pelayan tidak tersedia dengan serta-merta. Semua maklumat yang dikembalikan oleh pelayan hanya boleh diproses dalam fungsi panggil balik. Contohnya, kod berikut adalah salah:
var response; $.get('foo.php', function(r) { response = r; }); console.log(response); // undefined!
Pendekatan yang betul adalah untuk memproses data yang dikembalikan oleh pelayan dalam fungsi panggil balik hanya dilaksanakan apabila permintaan Ajax berjaya diselesaikan Hanya pada masa ini data daripada pelayan boleh diperolehi:
$.get('foo.php', function(response) { console.log(response); });
同源策略及 JSONP,前面已经说过,一般情况下 Ajax 的请求会被限制在相同协议(http 或 https)、相同端口、相同域名下才能正确执行,但是 HTML 的 3f1c4e4b6b16bbbd69b2ee476dc4f83a 标签却无此限制,它可以载入任何域下的脚本,jQuery 正是利用了这一点才得以拥有跨域执行 Ajax 的能力。
所谓 JSONP,就是其它域的服务端返回给我们的是 JavaScript 代码,这段代码可以被加载到 HTML 中的 3f1c4e4b6b16bbbd69b2ee476dc4f83a 标签中,这段 JavaScript 代码中包含有从其它域下的服务端返回的 JSON 数据,并以回调函数的形式提供。这样一来 jQuery 就回避了同源策略的限制,曲线拥有了跨域执行 Ajax 的能力。
Ajax 调试工具,现在比较新的浏览器如 Chrome 和 Safari,甚至 IE 都内置了调试工具,Firefox 也有无比强大 FireBug 插件,借助于这些调试工具,可以非常详细的查看 Ajax 的执行过程。
和 Ajax 相关的一些方法
jQuery 提供了好多种简便的 Ajax 方法,但是它们的核心都是 $.ajax,所以必须正确理解 $.ajax。
jQuery 的 $.ajax 是创建 Ajax 请求中最直接也是最有效的方法,它的参数是一个 JavaScript 对象,我们可以在这个对象中对 Ajax 作非常详细的配置。另外,$.ajax 方法还可以分别定义 Ajax 请求成功和失败时的回调函数;而且它以一个可配置的对象作为参数的特性,使得我们可以在 Ajax 方法外配置这个对象,然后再传进来,这非常有助于实现代码复用。关于这个方法的详细文档:http://api.jquery.com/jQuery.ajax/
一个典型的示例如下:
$.ajax({ // 要请求的 URL url : 'post.php', // 要发给服务端的数据 // (将会转化为查询字符串,如:?id=123) data : { id : 123 }, // 定义此 Ajax 请求是 POST 还是 GET type : 'GET', // 服务端返回的数据类型 dataType : 'json', // Ajax 成功执行时的回调函数; // 回调函数的参数即为服务端返回的数据 success : function(json) { $('<h1/>').text(json.title).appendTo('body'); $('<div class="content"/>') .html(json.html).appendTo('body'); }, // 如果 Ajax 执行失败; // 将返回原始错误信息以及状态码 // 传入这个回调函数中 error : function(xhr, status) { alert('Sorry, there was a problem!'); }, // 这里是无论 Ajax 是否成功执行都会触发的回调函数 complete : function(xhr, status) { alert('The request is complete!'); } });
Catatan:
Mengenai dataType: Jika dataType yang ditakrifkan di sini berbeza daripada format data yang dikembalikan oleh pelayan, kod kami mungkin gagal dilaksanakan dan sukar untuk mengetahui sebabnya kerana kod status yang dikembalikan oleh HTTP tidak menunjukkan ralat . Oleh itu, apabila melaksanakan permintaan Ajax, anda mesti memastikan bahawa format data yang dikembalikan oleh pelayan adalah konsisten dengan definisi yang telah ditetapkan. Biasanya, adalah berkesan untuk mengesahkan jenis Kandungan dalam maklumat pengepala HTTP Untuk JSON, jenis Kandungan yang sepadan mestilah aplikasi/json.
Beberapa pilihan penyesuaian untuk $.ajax
Kaedah $.ajax mempunyai banyak pilihan penyesuaian, itulah sebabnya kaedah ini sangat berkuasa. Untuk menyemak semua pilihan penyesuaian, anda boleh merujuk kepada dokumentasi rasmi: http://api.jquery.com/jQuery.ajax/ Hanya beberapa pilihan yang biasa digunakan disenaraikan di bawah:
async: Nilai lalai adalah benar Jika anda memerlukan Ajax untuk dilaksanakan secara serentak, anda boleh menetapkannya kepada palsu. Sila ambil perhatian bahawa jika anda menetapkan nilai ini kepada palsu, kod JavaScript anda yang lain akan terganggu sehingga permintaan Ajax selesai dan data yang dikembalikan oleh pelayan diterima. Jadi, sila gunakan pilihan ini dengan berhati-hati.
cache: Tetapkan sama ada untuk cache data yang dihantar semula oleh pelayan. Nilai lalai adalah benar untuk data dalam format selain daripada "skrip" dan "jsonp". Jika ia ditetapkan kepada palsu, apabila menghantar permintaan kepada pelayan, rentetan pertanyaan akan ditambahkan pada URL Nilai rentetan ialah cap masa semasa untuk memastikan URL bagi setiap permintaan adalah berbeza, dan sudah tentu ianya berbeza tidak wujud. Terdapat masalah caching. Kaedah untuk mendapatkan cap masa dalam JavaScript ialah Date().getTime() baharu.
Selesai: Fungsi panggil balik dicetuskan apabila permintaan Ajax selesai Fungsi panggil balik ini akan dicetuskan tanpa mengira sama ada pelaksanaan berjaya atau tidak. Fungsi panggil balik ini boleh menerima maklumat asal dan kod status yang dikembalikan oleh pelayan.
Konteks: Tentukan skop apabila fungsi panggil balik dilaksanakan (siapa yang melakukan ini dalam fungsi panggil balik {alert(this)} menunjuk ke?). Secara lalai, ini dalam fungsi panggil balik menunjuk kepada parameter yang dihantar ke kaedah $.ajax, iaitu objek besar.
Data: Data yang akan dihantar ke pelayan Nilainya boleh menjadi objek atau rentetan pertanyaan, seperti foo=bar&baz=bim.
DataType: Jenis data yang dikembalikan oleh pelayan. Jika anda tidak menetapkan pilihan ini, jQuery akan menentukannya berdasarkan jenis MIME data yang dikembalikan oleh pelayan.
Ralat: Fungsi panggil balik yang akan dicetuskan apabila ralat pelaksanaan Ajax berlaku. Fungsi ini menerima maklumat permintaan asal dan kod status.
jsonp: Nama fungsi panggil balik yang perlu dinyatakan semasa melaksanakan permintaan JSONP Nilai lalai ialah "panggilan balik".
Kejayaan: Fungsi panggil balik yang akan dicetuskan apabila Ajax berjaya dilaksanakan. Dalam fungsi, anda boleh mendapatkan maklumat yang dikembalikan oleh pelayan (jika dataType ditetapkan kepada JSON, data yang dikembalikan harus menjadi objek JavaScript, anda juga boleh mendapatkan maklumat data asal dan kod status yang dikembalikan oleh pelayan).
Tamat masa: Tetapkan tamat masa untuk permintaan Ajax, dalam milisaat.
Jenis: Tentukan kaedah permintaan, GET atau POST, nilai lalai ialah GET. Kaedah lain seperti PUT dan DELETE juga boleh digunakan, tetapi tidak semua pelayar menyokongnya.
url: URL yang akan diminta.
Pilihan url ialah satu-satunya pilihan yang diperlukan antara semua pilihan, dan pilihan lain adalah pilihan.
Beberapa kaedah mudah
Jika anda tidak memerlukan begitu banyak pilihan yang boleh dikonfigurasikan dan tidak mengambil berat tentang mengendalikan ralat pelaksanaan Ajax, jQuery juga menyediakan beberapa kaedah yang sangat berguna dan mudah untuk menyelesaikan permintaan Ajax dengan cara yang lebih ringkas. Sebenarnya, kaedah penulisan mudah ini hanya merangkumi $.ajax dan pratetap pilihan tertentu.
Kaedah mudah yang disediakan oleh jQuery adalah seperti berikut:
Parameter berikut boleh diluluskan dalam setiap kaedah mudah di atas:
url: URL yang diminta, mesti disediakan.
Data: Data dihantar ke pelayan, pilihan. Boleh menjadi objek atau rentetan pertanyaan, seperti foo=bar&baz=bim.
Fungsi panggil balik: Fungsi panggil balik ini dicetuskan selepas permintaan berjaya dilaksanakan. Pilihan. Fungsi panggil balik menerima data yang dikembalikan oleh pelayan, termasuk kod status permintaan dan objek asal.
Jenis data: Jenis data yang dikembalikan oleh pelayan. Pilihan.
下面是三个简便方法的示例:
// 获取纯文本或者 html $.get('/users.php', { userId : 1234 }, function(resp) { console.log(resp); }); // 向页面中添加脚本,然后执行脚本中定义的函数。 $.getScript('/static/js/myScript.js', function() { functionFromMyScript(); }); // 从服务端获取 JSON 格式的数据。 $.getJSON('/details.php', function(resp) { $.each(resp, function(k, v) { console.log(k + ' : ' + v); }); });
$.fn.load
$.fn.load 方法是 jQuery 所有 Ajax 方法中唯一在选择器结果集上调用的方法。$.fn.load 方法从给定的 URL 上获取信息,然后填充到选择器结果集包含的元素中。另外,在 URL 后面还可以附加一些选择器,jQuery 最终只会把跟选择器相匹配的内容填充到对应的 HTML 元素中。
下面是示例:
$('#newContent').load('/foo.html'); // 或 $('#newContent').load('/foo.html #myDiv h1:first', function(html) { alert('加载完毕!'); });
Ajax 和 表单
在跟表单打交道方面,jQuery 的 Ajax 更显神威。最为有用的两个方法就是 $.fn.serialize 和 $.fn.serializeArray,下面是它们的用法:
// 将表单中数据转化为查询字符串 $('#myForm').serialize(); $('#myForm').serializeArray(); // 将表单中数据转化为对象数组,如: [ { name : 'field1', value : 123 }, { name : 'field2', value : 'hello world' } ]
使用 JSONP
JSON 的本质其实是一种跨站点脚本注入。现在有很多比较好的网站都提供了 JSONP 服务,允许我们用他们预先定义好的 API 获取他们的数据。下面是一个示例,来源于 http://www.giantflyingsaucer.com/blog/?p=2682
服务端代码:
<?php header("content-type: text/javascript"); if(isset($_GET['name']) && isset($_GET['callback'])) { $obj->name = $_GET['name']; $obj->message = "Hello " . $obj->name; echo $_GET['callback']. '(' . json_encode($obj) . ');'; } ?>
客户端代码:
$.ajax({ url: 'http://otherDomail.com:8080/JSONP/jsonp-demo.php', data: {name: 'Super man'}, dataType: 'jsonp', jsonp: 'callback', success: function( response ) { console.log( response.message ); } });
jQuery 把 JSONP 的实现细节隐藏在幕后,我们要做的就是告诉 jQuery 服务端定义好的函数名以及我们请求的数据类型是 JSONP,其它方面和普通的 Ajax 请求没什么区别。
Ajax 事件
很多时候我们都需要在 Ajax 请求开始或结束时做一些操作,例如显示或隐藏一个 loading… 图片。这些工作本可以在每个 Ajax 请求中各自实现,但是 jQuery 提供了更好的方法,你可以像绑定普通事件一样绑定 Ajax 事件。若要参阅全部事件列表,可访问 http://docs.jquery.com/Ajax_Events。下面是简单示例:
$('#loading_indicator') .ajaxStart(function() { $(this).show(); }) .ajaxStop(function() { $(this).hide(); });