ajax = Asynchronous + JavaScript + And + XML（現(xiàn)在XML慢慢已經(jīng)被JSON取代）
Asynchronous：異步請(qǐng)求（沒(méi)有中斷瀏覽器的用戶體驗(yàn)）從服務(wù)器獲取數(shù)據(jù)。
JSON ： 通過(guò)DOM操作對(duì)頁(yè)面進(jìn)行局部刷新
ajax作用：異步加載數(shù)據(jù) + 局部刷新頁(yè)面
效果一：利用api查看美女圖片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="beauty">換一組</button><br/>
<script src="https://cdn.bootcss.com/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#beauty").on("click",function(){
$("a").empty();
var url = "http://api.tianapi.com/meinv/?key=3cedb24a8f5af4277b3de0b9c841e1d6&num=20"
$.getJSON(url,function(jsonOBJ){
for (var i = 0; i < jsonOBJ.newslist.length ; i += 1){
$(document.body).append(
$("<a>").html(jsonOBJ.newslist[i].title+"<br/>").attr("href",jsonOBJ.newslist[i].picUrl).attr("width","400")
);
}
});
});
});
</script>
</body>
</html>
效果二：api-周公解夢(mèng)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>周公解夢(mèng)在線版</title>
<style type="text/css">
#main{
position: absolute;
margin: 100px 200px;
float: left;
width: 800px;
height: 400px;
border: solid black;
}
</style>
</head>
<body>
<div id="main">
<span>解夢(mèng)：</span>
<input placeholder="輸入您想查詢夢(mèng)的關(guān)鍵字" id="text">
<button id="confirm">查詢</button>
<hr />
<span>解析：</span>
</div>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.2/jquery.min.js"></script>
<script>
$(function(){
$("#confirm").on("click",function(){
var content = $("#text").val().trim();
if (content.length>0){
//getJSON方法
// var str1 = encodeURIComponent(content,"utf-8");
// var url = "http://api.tianapi.com/txapi/dream/?key=3cedb24a8f5af4277b3de0b9c841e1d6&word=" + str1;
// $.getJSON(url,function(jsonOBJ){
// $("#main>p").empty();
// if (jsonOBJ.code == 250){
// alert("未檢索到相關(guān)信息！")；
// }else{
// $("#main").append($("<p>").text(jsonOBJ.newslist[0].result))；
// }
// });
//ajax方法
$.ajax({
"url":"http://api.tianapi.com/txapi/dream/",
"type":"get",
"data":{
"key":"3cedb24a8f5af4277b3de0b9c841e1d6",
"word":content
},
"dataType": "json",
"success": function(jsonOBJ){
if (jsonOBJ.code == 250) {
alert("未檢索到相關(guān)信息！");
}else{
$("#main").append($("<p>").text(jsonOBJ.newslist[0].result));
}
}
});
}
});
});
</script>
</body>
</html>
Bootstrap響應(yīng)式布局
Bootstrap
