jQuery - AJAX 简... 登录

jQuery - AJAX 简介

什么是 AJAX ?

AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。

有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图、开心网等等。

关于 jQuery 与 AJAX

JQuery是轻量级的js库,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+)。jQuery使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。

通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。


实例:

先展示一个前端代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            //按钮单击时执行
            $("#testAjax").click(function(){
                //Ajax调用处理
                var html = $.ajax({
                    type: "POST",
                    url: "text.php",
                    data: "name=garfield&age=18",
                    async: false
                }).responseText;
                $("#myDiv").html('<h2>'+html+'</h2>');
            });
        });
    </script>
</head>
<body>
<div id="myDiv"><h2>通过 AJAX 改变文本</h2></div>
<button id="testAjax" type="button">Ajax改变内容</button>
</body>
</html>

在展示一段后台php代码,我们给命名为text.php:

<?php
  $msg='Hello,'.$_POST['name'].',your age is '.$_POST['age'].'!';
  echo $msg;
?>

这样我们就完成一个JQuery 简单的  Ajax调用实例。

下一节
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ //按钮单击时执行 $("#testAjax").click(function(){ //Ajax调用处理 var html = $.ajax({ type: "POST", url: "text.php", //调用text.php data: "name=garfield&age=18", async: false }).responseText; $("#myDiv").html('<h2>'+html+'</h2>'); }); }); </script> </head> <body> <div id="myDiv"><h2>通过 AJAX 改变文本</h2></div> <button id="testAjax" type="button">Ajax改变内容</button> </body> </html>
提交 重置代码
章节 评论 笔记 课件
  • 取消 回复 发送
  • 取消 发布笔记 发送