您当前的位置:首页 > 计算机 > 编程开发 > JavaScript

前端学习——JQuery Ajax使用经验

时间:07-29来源:作者:点击数:
城东书院 www.cdsy.xyz

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);
?>

【 TortoiseHg使用说明】——如果没有使用过Hg请参考博文hg clone部分操作即可。   

1.常用的getJSON

在项目推进过程中使用的最多的便是getJSON,getJSON可从服务器获得一个JSON数据包,请注意若使用JSON格式服务器HTTP首部中应包含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,那么浏览器会使用缓存中的内容而不在向服务器重新请求。为了防止浏览器使用缓存,可以在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之后加入&_=<当前时间毫秒值>

    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请求和响应
城东书院 www.cdsy.xyz
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门
本栏推荐