因为要学习ajax了,这个很重要,所以我要换章了。
什么是ajax?
ajax=异步javascript和xml(asynchronous javascript and xml);
简单地说就是在不重载整个网页的情况下,ajax通过后台加载数据,并在网页上进行显示。
使用ajax的应用程序案例有谷歌地图,腾讯微博,优酷视频,人人网等等。
关于jquery和ajax
jquery提供很多个与ajax有关的方法。
通过jquery ajax方法,能够使用http get和http post从远程服务器上请求文本,html,xml或json
同时能够把这些外部数据直接载入网页的被选元素中。
如果没有 jQuery,AJAX 编程还是有些难度的。
编写常规的 AJAX 代码并不容易,因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过,jQuery 团队为我们解决了这个难题,我们只需要一行简单的代码,就可以实现 AJAX 功能。
ajax load()方法
该方法是简单但强大的ajax方法。
load()从服务器加载数据,并把返回的数据放入被选元素中。
语法如下
$(selector).load(url,data,callback)
- url是必须的,规定要加载的url;
- data是可选的,规定与请求一同发送的查询字符串键值对集合。
- callback是可选的,是load方法完成后所执行的函数名称。
<div>一起加油</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".div1").load("new_file.txt");
});
});
</script>
<body>
<div class="div1">好好学js</div>
<button>确定</button>
</body>
</html>
也可以把选择器添加到url参数里。
下面的例子是“new_file.txt”中的<a>标签的内容加载到指定的div元素中,
<div>一起加油</div>
<a>哈哈哈</a>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".div1").load("new_file.txt a");
});
});
</script>
<body>
<div class="div1">好好学js</div>
<button>确定</button>
</body>
</html>
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数:
- responseTxt - 包含调用成功时的结果内容
- statusTXT - 包含调用的状态
- xhr - 包含 XMLHttpRequest 对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<script>
$(document).ready(function() {
$("button").click(function() {
$(".div1").load("new_file.txta", function(responsetxt, statustxt, xhr) {
if(statustxt == "success") {
alert("加载成功");
}
if(statustxt == "error") {
alert("加载失败" + xhr.status + xhr.statusText);
}
});
});
});
</script>
<body>
<div class="div1">好好学js</div>
<button>确定</button>
</body>
</html>
把加红的一行txt和a之中加空格即可
jquery ajax get()方法和post()方法
用于通过http get或post请求从服务器请求数据。
http请求:get 和post
两种在客户端和服务器端请进请求-相应的常用方法。
- get 从指定的资源请求数据
- post 向指定的资源提交要处理的数据
get基本上用于从服务器获得数据。会缓存数据。
post也可以用于从服务器获得数据,不过,post方法不会缓存数据,并且常用语连同请求一起发送数据。
jquery $.get()方法
通过http get请求从服务器上请求数据。
语法:
$.get{url,callback}
- 必须的url参数规定要请求的url。
- 可选的callback是请求成功后所执行的函数名。
<?php
echo '这是get方法';
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<script>
$(document).ready(function() {
$("button").click(function() {
$.get("new_file.php", function(data, status) {
alert("数据" + data + "\n状态" + status);
});
});
});
</script>
<body>
<button>http get请求并获取返回结果。</button>
</body>
</html>
jQuery $.post() 方法
$.post() 方法通过 HTTP POST 请求向服务器提交数据。
$.post(URL,data,callback);
- 必需的 URL 参数规定您希望请求的 URL。
- 可选的 data 参数规定连同请求发送的数据。
- 可选的 callback 参数是请求成功后所执行的函数名。
不知道为什么无法运行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<script>
$(document).ready(function() {
$("button").click(function() {
$.post("new_file.php", {
name: "csdn欢迎你",
url: "http://www.baidu.com"
},
function(data, status) {
alert("数据" + data + "\n状态" + status);
});
});
});
</script>
<body>
<button>http post请求并获取返回结果。</button>
</body>
</html>
$.post() 的第一个参数是我们希望请求的 URL ("new_file.php")。
然后我们连同请求(name 和 url)一起发送数据。
"new_file.php" 中的 PHP 脚本读取这些参数,对它们进行处理,然后返回结果。
第三个参数是回调函数。第一个回调参数存有被请求页面的内容,而第二个参数存有请求的状态。
//<?php
//echo '这是get方法';
//?>
<?php
$name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '';
$url = isset($_POST['url']) ? htmlspecialchars($_POST['url']) : '';
echo '网站名: ' . $name;
echo "\n";
echo 'URL 地址: ' .$url;
?>