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
。。。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。