jQuery-AJAX

1.AJAX简介

(1)什么是AJAX

AJAX = 异步 javascript 和XML(Asynchronous JavaScript and XML)
简单的说在不重载整个网页的情况下，AJAX通过后台加载数据，并在网页上进行显示
即其可实现对网页进行部分加载与显示

(2)jQuery与AJAX

.我们可以通过jQuery的AJAX方法，使用HTTP GET和HTTP Post从远程服务器上请求文本，HTML，XML或JSON－同时能够把这些外部数据直接载入网页的被选元素中
.编写常规的AJAX代码并不容易，因为不同的浏览器对AJAX的实现并不相同，这意味着您必须编写额外的代码对浏览器进行测试。不过jQuery团队为我们解决了这个问题，我们现在只需一行简单的代码，就可以实现AJAX功能了

2.jQuery-AJAX load()方法

jQuery load()方法是简单但很强大的AJAX方法
load()方法功能为从服务器加载数据，并把返回的数据放入被选元素中
语法

$(selecter).load(URL,data,callback);

必须的URL参数规定您希望加载的URL
可选的data参数规定与请求一同发送的查询字符串键/值集合
可选的callback参数是load()方法完成后所执行的函数名称
实例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = 'jquery.js'></script>
    <script>
        $(document).ready(function () {
            $('button').click(function () {
                $('.test').load('demo.txt');
            });
        });
    </script>

</head>
<body>

    <p style="background-color: red" class="test">用AJAX加载</p>
    <button type="button">获得外部内容</button>
</body>
</html>

除去上述用法，我们也可以把选择器加入到URL中

例子如下

$('#div1').load('demo_test.txt #p1');

3.jQuery-AJAX get()和post()方法

jQuery get()和post()方法用于通过HTTP GET或POST请求从服务器请求数据
(1)get和post对比

.GET - 从指定的资源请求数据
.POST - 向指定的资源提交要处理的数据

GET基本上用于从服务器获得数据。GET方法可能返回缓存数据
POST 也可用于从服务器返回数据，不过POST方法不会缓存数据，并且常用于连同请求一起发送数据

(2)jQuery $.get()方法$ .get()方法通过HTTP GET请求从服务器上请求数据
语法:

$.get(URL,callback);

必须的URL规定您希望请求的URL
可选的callback参数是请求成功后所执行的函数名

下面的例子使用$.get()方法从服务器上的一个文件中取回数据
实例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = 'jquery.js'></script>
    <script>
        $(document).ready(function () {
            $('button').click(function () {
                $.get('style.html',function (data,status) {
                    alert('数据: ' + data + '\n状态: ' + status);
                });
            });
        });
    </script>

</head>
<body>
    <button type="button">向页面发送HTTP GET请求</button>
</body>
</html>

(3)jQuery $.post()方法$ .post()方法通过HTTP POST请求从服务器上请求数据
语法:

$.post(URL,data,callback);

必须的URL参数规定希望请求的ＵＲＬ
可选的data参数规定连同请求发送到的数据
可选的callback参数是请求成功后所执行的函数名

1.AJAX简介

2.jQuery-AJAX load()方法

3.jQuery-AJAX get()和post()方法

猜你喜欢