大家好，又见面了，我是全栈君，祝每个程序员都可以多学几门语言。
0.前言
在项目推进过程中常常使用Ajax，通过Jquery提供的函数能够很方便的使用Ajax，可是在实际使用中也遇到一些问题，比如怎样防止浏览器使用缓存，怎样使用同步方式等。通过博文整理总结希望自身有所提高。
在这里通过一个加法样例说明问题.为了突出ajax，前端网页和后端PHP程序尽可能的简单。
【前端】——add.html
图1 add页面
【后端】——add.php
<?php
// 返回JSON格式
header('Content-Type:application/json;charset=utf-8');
$result = array();
$result["result"] = $_GET["a"] + $_GET["b"];
echo json_encode($result, JSON_NUMERIC_CHECK);
?>
【代码仓库】——
test-jquery-ajax
test-jquery-ajax
代码仓库位于bitbucket使用Hg(而不是Git)，Hg在windows或ubuntu上均有非常好用的GUI工具——TortoiseHg，本人愚笨没能熟练掌握Git。
【
TortoiseHg使用说明】——假设没有使用过Hg请參考博文hg clone部分操作就可以。
TortoiseHg使用说明】——假设没有使用过Hg请參考博文hg clone部分操作就可以。
【
JQuery 中文API】
JQuery 中文API】
1.经常使用的getJSON
在项目推进过程中使用的最多的便是getJSON，getJSON可从server获得一个JSON数据包，请注意若使用JSON格式serverHTTP首部中应包括application/json信息，否则会产生兼容性问题（简单说IE就可能出问题）。
var submit_async = function() {
$.getJSON('add.php', {
a: $('input[name="a"]').val(),
b: $('input[name="b"]').val()
},
function(data) {
$('#result').text(data.result);
});
};
【HTTP请求和响应】
图2 完整的HTTP请求和响应
2.防止浏览器使用缓存
浏览器为了加快执行速度，假设重复请求同一个URL，那么浏览器会使用缓存中的内容而不在向server又一次请求。为了防止浏览器使用缓存，能够在URL之后添�一些变化的内容，最经常使用的方法便是添�当前时间的毫秒值，比如添�&now=<当前时间毫秒值>。（即使用这样的方法也存在一些“顽固派”，比如执行iOS6系统的safari浏览器）。
var submit_async = function() {
$.getJSON('add.php', {
a: $('input[name="a"]').val(),
b: $('input[name="b"]').val(),
now: new Date().getTime() // 防止浏览器使用缓存
},
function(data) {
$('#result').text(data.result);
});
};
【HTTP请求和响应】
图3 完整的HTTP请求和响应
3.使用同步方式
getJSON方法并没有同步选项，假设使用同步方式可使用ajax原生方法。同步方式须要设置async选项为false。
var submit_sync = function() {
$.ajax({
type: "get",
url: 'add.php',
async: false, // 使用同步方式
data: {
a: $('input[name="a"]').val(),
b: $('input[name="b"]').val(),
now: new Date().getTime() // 注意不要在此行添加�逗号
},
contentType: "application/json; charset=utf-8",
dataType: "json",
// cache: false,
success: function(data) {
$('#result').text(data.result);
} // 注意不要在此行添加�逗号
});
}
【HTTP请求和响应】
HTTP请求和响应同图3.
4.再议防止浏览器使用缓存
在ajax方法中有一个
cache选项，假设设置为cache:false意为禁止浏览器缓存。实现的方法和【2】很相似，该參数在URL之后添�&_=<当前时间毫秒值>
cache选项，假设设置为cache:false意为禁止浏览器缓存。实现的方法和【2】很相似，该參数在URL之后添�&_=<当前时间毫秒值>
var submit_sync = function() {
$.ajax({
type: "get",
url: 'add.php',
async: false, // 使用同步方式
data: {
a: $('input[name="a"]').val(),
b: $('input[name="b"]').val()
},
contentType: "application/json; charset=utf-8",
dataType: "json",
cache: false,
success: function(data) {
$('#result').text(data.result);
} // 注意不要在此行添加�逗号
});
}
【HTTP请求和响应】
图4 完整的HTTP请求和响应
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/118654.html原文链接：https://javaforall.net
