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调用实例。