ajax与jsonp的使用详解
这次给大家带来ajax与jsonp的使用详解，ajax与jsonp使用的注意事项有哪些，下面就是实战案例，一起来看一下。
前言：ajax和jsonp可以与后台通信，获取数据和信息，但是又不用刷新整个页面，实现页面的局部刷新。
一、ajax
•定义：一种发送http请求与后台进行异步通讯的技术。
•原理：实例化xmlhttp对象，使用此对象与后台通信。
ajax的同源策略：
•ajax请求的页面或资源只能是同一个域下面的资源，不能是其他域的资源，这是在设计ajax时基于安全考虑。
--------------------------------------------------------------------------------
ajax的方法：
1. $.ajax({}):
•常用参数： •url：请求网络地址
•type：请求方式，默认是'GET'，常用'POST'
•dataType：设置返回的数据格式，一般使用json，也可以是html和jsonp；
•data：设置发送给服务器的数据
•.done():设置请求成功后的回调函数
•.fail():设置请求失败后的回调函数
•async:设置是否异步，默认值是'true'，表示异步
•代码运用：
$(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>说明：data表示后台返回的数据；ajax使用需要依赖服务器环境。
2. $.get():
•$.get() 方法使用GET请求从服务器加载数据;也是一种无刷新的请求数据的ajax方法。
•参数：
•url:访问的网址，需要遵循同源策略；
•data:发送到服务器的数据。
•function(data,status){}：请求成功运行的函数
•dataType：请求响应的数据类型。
//参考代码：
$(function () {
$("input").click(function () {
$.get(
"./data.json",
function (data,status) {
console.log(data.name);
},
"json"
);
});
})
......
<body>
<p>
<input type="button" value="xinzhi">
</p>
</body>
•$.get()方法的参数和$.ajax()不一样，网址url为必须的参数，其他三个可选。
•data为返回的数据，status表示请求的状态，一般有""success","error","timeout"等几种。
•如果datatype类型为jsonp，也可以跨域请求数据。
•无请求失败的回调函数。
3. $.post()
•$.get() 方法使用POST请求从服务器加载数据;
•其使用的方法和$.get()方法完全一样。
4. $.load():
•从服务器加载数据，不需要指定datatype,返回的数据会自动放置到元素中。
•参数：
•URL:地址；
•data:请求的参数，可选；
•function(response,status,xhr)：请求成功的回调函数。
$(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>
•返回的数据会放置在p中；
•不能跨域访问数据；
•response为返回的数据，status为请求的状态；
•无请求失败的回调函数。
4. getJSON()
•方法使用 AJAX 的 HTTP GET 请求获取 JSON 数据。
•参数：
•url: 请求网址，必须的参数；
•data: 发送给服务器的数据；
•function(data,status,xhr):请求成功的回调函数
$(function () {
$("input").click(function () {
$.getJSON(
"./data.json",
function(data,status) {
console.log(data.name);
},
);
});
})
......
<body>
<p>
<input type="button" value="xinzhi">
</p>
</body>•方法直接获取的是json数据；
•无返回失败的回调函数；
•回调函数时命名函数，不是匿名函数；
5. getScript()
•方法使用 AJAX 的 HTTP GET 请求获取并执行js代码。
•参数：
•url: 请求网址，必须的参数；
•function(data,status):请求成功的回调函数
$(function () {
$("input").click(function () {
$.getScript(
"./data.js",
function(data,status) {
console.log(data);
},
);
});
})
......
<body>
<p>
<input type="button" value="xinzhi">
</p>
</body>•返回结data是js代码；
•该方法可以用来动态加载js代码。
二、jsonp
•定义：一种可以实现跨域发送http请求的数据通信格式，可以嵌在ajax中使用。
•原理：利用script标签可以跨域链接资源的特性。
用法一：函数传参
<script type="text/javascript">
function aa(data){
console.log(data.name);
}
</script>
<script type="text/javascript" src="....../data.js"></script>说明：在外部定义一个data.js文件，这个文件的路径可以与当前页面不在同一个域下面。
data.js的内容：
aa({
"data":{
"name":"xiaohong",
"age":"18"
}
})•将数据以页面定义的函数的参数的形式传递进去，从而获取数据。
•本质上可以将数据拆分，使得数据不用强制保存在同一个域名下。
用法二：利用ajax
$.ajax({
url:'...../data.js',//可以不是本地域名
type:'get',
dataType:'jsonp', //jsonp格式访问
jsonpCallback:'aa' //获取数据的函数
})
.done(function(data){
console.log(data.name);
})
.fail(function() {
alert('服务器超时，请重试！');
});•data.js的内容和上面一样。
•使用ajax的方法本质上也是script标签可以跨域链接资源，不过jquery为其封装了相同的方法，看起来一样。
•以上代码的执行过程为：ajax通过jsonp技术跨域访问data.js文件，通过找到aa()方法将其参数传递给.done方法的data参数执行.done方法。
•目前这种方式仍然有其局限性，就是必须知道data.js文件的名字和定义的方法aa，如果在仅仅知道域名的情况下，需要另外的方法.
用法三
var $input = $("input");
$input.keyup(function () {
$.ajax({
url:'https://sug.so.360.cn/suggest?',//请求360搜索的联想数据
type:'get',
dataType:'jsonp', //jsonp格式访问
data: {word: $input.val()},
})
.done(function(data){
console.log(data);
})
.fail(function() {
alert('服务器超时，请重试！');
});
})
....
<body>
<input type="text">
</body>•通过浏览器查看每次输入关键字服务器发送回的数据包，找到js文件中header的地址以及相关的提交数据，发现key为word关键字，因此可以向服务器发送data数据。
•服务器返回的数据会自动传给回调的匿名函数的参数data.
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Atas ialah kandungan terperinci ajax与jsonp的使用详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1378
52
Bagaimana untuk menyelesaikan ralat 403 yang dihadapi oleh permintaan jQuery AJAX
Feb 20, 2024 am 10:07 AM
Tajuk: Kaedah dan contoh kod untuk menyelesaikan ralat 403 dalam permintaan AJAX jQuery Ralat 403 merujuk kepada permintaan bahawa pelayan melarang akses kepada sumber Ralat ini biasanya berlaku kerana permintaan itu tidak mempunyai kebenaran atau ditolak oleh pelayan. Apabila membuat permintaan jQueryAJAX, anda kadangkala menghadapi situasi ini Artikel ini akan memperkenalkan cara menyelesaikan masalah ini dan memberikan contoh kod. Penyelesaian: Semak kebenaran: Mula-mula pastikan alamat URL yang diminta adalah betul dan sahkan bahawa anda mempunyai kebenaran yang mencukupi untuk mengakses sumber tersebut.
Bagaimana untuk menyelesaikan ralat permintaan jQuery AJAX 403
Feb 19, 2024 pm 05:55 PM
jQuery ialah perpustakaan JavaScript popular yang digunakan untuk memudahkan pembangunan sisi klien. AJAX ialah teknologi yang menghantar permintaan tak segerak dan berinteraksi dengan pelayan tanpa memuatkan semula keseluruhan halaman web. Walau bagaimanapun, apabila menggunakan jQuery untuk membuat permintaan AJAX, anda kadangkala menghadapi 403 ralat. Ralat 403 biasanya ralat akses yang dinafikan pelayan, mungkin disebabkan oleh dasar keselamatan atau isu kebenaran. Dalam artikel ini, kami akan membincangkan cara menyelesaikan permintaan jQueryAJAX yang menghadapi ralat 403
Bagaimana untuk menyelesaikan masalah jQuery AJAX ralat 403?
Feb 23, 2024 pm 04:27 PM
Bagaimana untuk menyelesaikan masalah jQueryAJAX ralat 403? Apabila membangunkan aplikasi web, jQuery sering digunakan untuk menghantar permintaan tak segerak. Walau bagaimanapun, kadangkala anda mungkin menghadapi kod ralat 403 apabila menggunakan jQueryAJAX, menunjukkan bahawa akses dilarang oleh pelayan. Ini biasanya disebabkan oleh tetapan keselamatan bahagian pelayan, tetapi terdapat cara untuk mengatasinya. Artikel ini akan memperkenalkan cara menyelesaikan masalah ralat jQueryAJAX 403 dan memberikan contoh kod khusus. 1. membuat
Bagaimana untuk mendapatkan pembolehubah daripada kaedah PHP menggunakan Ajax?
Mar 09, 2024 pm 05:36 PM
Menggunakan Ajax untuk mendapatkan pembolehubah daripada kaedah PHP adalah senario biasa dalam pembangunan web Melalui Ajax, halaman boleh diperoleh secara dinamik tanpa menyegarkan data. Dalam artikel ini, kami akan memperkenalkan cara menggunakan Ajax untuk mendapatkan pembolehubah daripada kaedah PHP, dan memberikan contoh kod khusus. Pertama, kita perlu menulis fail PHP untuk mengendalikan permintaan Ajax dan mengembalikan pembolehubah yang diperlukan. Berikut ialah kod contoh untuk fail PHP mudah getData.php:
PHP dan Ajax: Membina enjin cadangan autolengkap
Jun 02, 2024 pm 08:39 PM
Bina enjin cadangan autolengkap menggunakan PHP dan Ajax: Skrip sisi pelayan: mengendalikan permintaan Ajax dan mengembalikan cadangan (autocomplete.php). Skrip pelanggan: Hantar permintaan Ajax dan cadangan paparan (autocomplete.js). Kes praktikal: Sertakan skrip dalam halaman HTML dan nyatakan pengecam elemen input carian.
PHP lwn. Ajax: Penyelesaian untuk mencipta kandungan yang dimuatkan secara dinamik
Jun 06, 2024 pm 01:12 PM
Ajax (JavaScript Asynchronous dan XML) membenarkan menambah kandungan dinamik tanpa memuatkan semula halaman. Menggunakan PHP dan Ajax, anda boleh memuatkan senarai produk secara dinamik: HTML mencipta halaman dengan elemen kontena dan permintaan Ajax menambah data pada elemen selepas memuatkannya. JavaScript menggunakan Ajax untuk menghantar permintaan kepada pelayan melalui XMLHttpRequest untuk mendapatkan data produk dalam format JSON daripada pelayan. PHP menggunakan MySQL untuk menanyakan data produk daripada pangkalan data dan mengekodnya ke dalam format JSON. JavaScript menghuraikan data JSON dan memaparkannya dalam bekas halaman. Mengklik butang mencetuskan permintaan Ajax untuk memuatkan senarai produk.
PHP dan Ajax: Cara Meningkatkan Keselamatan Ajax
Jun 01, 2024 am 09:34 AM
Untuk meningkatkan keselamatan Ajax, terdapat beberapa kaedah: Perlindungan CSRF: menjana token dan menghantarnya kepada pelanggan, menambahnya ke bahagian pelayan dalam permintaan untuk pengesahan. Perlindungan XSS: Gunakan htmlspecialchars() untuk menapis input bagi mengelakkan suntikan skrip berniat jahat. Pengepala Kandungan-Keselamatan-Dasar: Hadkan pemuatan sumber berniat jahat dan nyatakan sumber dari mana skrip dan helaian gaya dibenarkan untuk dimuatkan. Sahkan input sisi pelayan: Sahkan input yang diterima daripada permintaan Ajax untuk menghalang penyerang daripada mengeksploitasi kelemahan input. Gunakan perpustakaan Ajax yang selamat: Manfaatkan modul perlindungan CSRF automatik yang disediakan oleh perpustakaan seperti jQuery.
Pertukaran data tak segerak menggunakan fungsi Ajax
Jan 26, 2024 am 09:41 AM
Cara menggunakan fungsi Ajax untuk mencapai interaksi data tak segerak Dengan perkembangan teknologi Internet dan Web, interaksi data antara bahagian hadapan dan bahagian belakang telah menjadi sangat penting. Kaedah interaksi data tradisional, seperti penyegaran halaman dan penyerahan borang, tidak lagi dapat memenuhi keperluan pengguna. Ajax (JavaScript Asynchronous dan XML) telah menjadi alat penting untuk interaksi data tak segerak. Ajax membolehkan web menggunakan JavaScript dan objek XMLHttpRequest
