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" οnclick="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+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, 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" οnclick="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>
![](https://i-blog.csdnimg.cn/blog_migrate/966217da233ed052c13b7376bca98741.gif)
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://i-blog.csdnimg.cn/blog_migrate/effcdc7d6db6f62e0180bfd608ae52d1.gif)
参考:https://blog.csdn.net/smartsmile2012/article/details/17316351
。。。