AJAX 教程
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
GET 还是 POST？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
AJAX - 向服务器发送请求请求
*代码
<!DOCTYPE html> <html> <head> <Meta charset="utf-8"> <script> function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) { // IE7+,Firefox,Chrome,Opera,Safari 浏览器执行代码 xmlhttp=new XMLHttpRequest(); } else { // IE6,IE5 浏览器执行代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","http://7xstkb.com1.z0.glb.clouddn.com/ajax_info_utf_8.txt",true); xmlhttp.send(); } </script> </head> <body> <div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div> <button type="button" onclick="loadXMLDoc()">修改内容</button> </body> </html>
效果：
使用回调函数
回调函数是一种以参数形式传递给另一个函数的函数。如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。
该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：
*代码
<!DOCTYPE html> <html> <head> <Meta charset="utf-8"> <script> var xmlhttp; function loadXMLDoc(url,cfunc) { if (window.XMLHttpRequest) { // IE7+,IE5 浏览器执行代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=cfunc; xmlhttp.open("GET",url,true); xmlhttp.send(); } function myFunction() { loadXMLDoc("http://7xstkb.com1.z0.glb.clouddn.com/ajax_info_utf_8.txt",function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }); } </script> </head> <body> <div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div> <button type="button" onclick="myFunction()">修改内容</button> </body> </html>
jQuery ajax() 方法
<html>
<head>
<Meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="myDiv"><h2>通过 AJAX 改变文本</h2></div>
<button id="b01" type="button">同步改变内容</button>
<button id="b02" type="button">异步改变内容</button>
<script type="text/javascript">
$(document).ready(function(){
$("#b01").click(function(){
htmlobj=$.ajax({url:"http://7xstkb.com1.z0.glb.clouddn.com/ajax_info_utf_8.txt",async:false
});
$("#myDiv").html(htmlobj.responseText);
});
$("#b02").click(function(){
$.ajax({url:"http://7xstkb.com1.z0.glb.clouddn.com/ajax_info_utf_8.txt",success:function(result){
$("#myDiv").html(result);
}
});
});
});
</script>
</body>
</html>
Jquery Ajax和getJSON获取后台普通Json数据
<html>
<head>
<Meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="myDiv"><h2>通过 AJAX 改变文本</h2></div>
<button id="b01" type="button">Ajax方式获取Json数据</button>
<button id="b02" type="button">方式二 Json方式获取数据</button>
<button id="b03" type="button">方式三 Json方式获取数据</button>
<p>方式一</p>
<ul id="list">
</ul>
<p>方式二</p>
<ul id="list2">
</ul>
<p>方式三</p>
<ul id="list3">
</ul>
<script type="text/javascript">
$(document).ready(function(){
$("#b01").click(function(){
//方式一 Ajax方式获取Json数据
$.ajax({
url: 'http://7xstkb.com1.z0.glb.clouddn.com/sport.json',type: 'GET',dataType: 'json',timeout: 1000,cache: false,beforeSend: LoadFunction,//加载执行方法
error: erryFunction,//错误执行方法
success: succFunction //成功执行方法
})
function LoadFunction() {
$("#list").html('加载中...');
}
function erryFunction() {
alert("error");
}
function succFunction(tt) {
var json = eval(tt); //数组
var tt = "";
$.each(json,function (index) {
//循环获取数据
var Name = json[index].name;
console.log("Name="+Name);
tt +=Name + "___" + "<br>";
});
$("#list").html('');
$("#list").html(tt);
}
});
//方式二 Json方式获取数据
$("#b02").click(function(){
$.getJSON(
"http://7xstkb.com1.z0.glb.clouddn.com/sport.json",function (data) {
//循环获取数据
var tt = "";
$.each(data,function (k,v) {
$.each(v,function (kk,vv) {
tt += kk + ":" + vv + "___";
});
tt += "<br/>";
});
$("#list2").html(tt);
}
);
});
//方式三 Ajax方式获取Json数据
$("#b03").click(function(){
$.getJSON("http://7xstkb.com1.z0.glb.clouddn.com/sport.json",function(data){
var tt = "";
$.each(data,function (index,sport) {
//循环获取数据
var Name = sport["name"];
console.log("Name="+Name);
tt +=Name + "___" + "<br>";
});
$("#list3").html('');
$("#list3").html(tt);
});
});
});
</script>
</body>
</html>
参考：https://blog.csdn.net/smartsmile2012/article/details/17316351
。。。
