index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ajax</title> <script type="text/javascript" src="jquery-1.10.1.js"></script> <script type="text/javascript" src="demo.js"></script> <link type="text/css" rel="stylesheet" href="style.css" /> </head> <body> <input type="button" value="异步加载数据" /> <div id="box"></div> </body> </html>
test.html
<span class="title">一站式建网站</span> <span class="url">onestopweb.cn</span>
test.php
<?php
//echo '一站式建网站';
/*
if($_GET['url'] == 'onestopweb'){
echo '一站式建网站';
}else{
echo '不存在';
}
if($_POST['url'] == 'onestopweb'){
echo '一站式建网站';
}else{
echo '不存在';
}
*/
if($_GET['url'] == 'onestopweb'){
echo '一站式建网站';
}else{
echo '不存在';
}
?>
test.xml
<?xml version="1.0" encoding="UTF-8"?> <root> <url>www.onestopweb.cn</url> </root>
test.json
[
{
"url":"www.onestopweb.cn"
}
]
test.js
alert('我在被呼唤的情况下才被加载')
demo.js
$(function(){
/*
$('input').click(function(){
$.get('test.php?url=onestopweb',function(response,status,xhr){
$('#box').html(response);
});
});
//通过直接在 url 问号紧跟传参
$('input').click(function(){
$.get('test.php','url=onestopweb&a=b',function(response,status,xhr){
$('#box').html(response);
});
});
//通过第二个参数 data，字符串形式的键值对传参，然后自动转换为问号紧跟传参
$('input').click(function(){
$.get('test.php',{
url : 'onestopweb'
},function(response,status,xhr){
$('#box').html(response);
});
});
//通过第二个参数 data，对象形式的键值对传参，然后自动转换为问号紧跟传参
$('input').click(function(){
$.post('test.php?url=onestopweb',function(response,status,xhr){
$('#box').html(response);
});
});
//post 提交不能使用问号传参
$('input').click(function(){
$.post('test.php','url=onestopweb&a=b',function(response,status,xhr){
$('#box').html(response);
});
});
//post 提交可以使用字符串形式的键值对传参，自动转换为 http 消息实体传参
$('input').click(function(){
$.post('test.php',{
url : 'onestopweb'
},function(response,status,xhr){
$('#box').html(response);
});
});
//post 提交可以使用对象键值对
$('input').click(function(){
$.post('test.php',{
url : 'onestopweb'
},function(response,status,xhr){
$('#box').html(response);
},'html');//PHP 文件返回的数据是纯文本，默认是 html 或 text
});
$('input').click(function(){
$.post('test.php',{
url : 'onestopweb'
},function(response,status,xhr){
$('#box').html(response);
},'json');
});
//本身是纯文本，如果强行按照 xml 或者 json 数据格式返回的话，那么就无法获取数据
$('input').click(function(){
$.post('test.xml',function(response,status,xhr){
alert(response);
},'html');//默认 type 就已经是已经是xml
});
//如果默认已经是 xml,强行设置为 html,则会连 xml 标签也返回
$('input').click(function(){
$.post('test.json',function(response,status,xhr){
alert(response[0].url);
});
});
$('input').click(function(){
$.getJSON('test.json',function(response,status,xhr){
alert(response[0].url);
});
});
*/
$('input').click(function(){
$.getScript('test.js');
});
});