简介
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。
Ajax 是一种用于创建快速动态网页的技术。
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用Ajax）如果需要更新内容，必须重载整个网页页面。
1.AJAX使用基本技巧和实现原理
先看一个ajax小例子：
<html>
<body>
#设置一个事件来触发
<div id="contentid">
<h3>this is a ajax test!!!</h3>
<button type="button" onclick="loadXMLDoc()" >chenge Content</button>
</div>
<script type="text/javascript">
#具体AJAX实现
function loadXMLDoc(){
#创建XMLHttpRequest对象，它是AJAX的基础
var xmlhttp;
#判断浏览器是否支持XMLHttpRequest
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("contentid").innerHTML=xmlhttp.responseText;
}
}
#例1:使用GET发送HTTP请求
xmlhttp.open("GET","/user/?name=jack&age=33",true); #异步方式获取user信息
xmlhttp.send() #发送请求到服务器
#例2:使用POST发送请求
xmlhttp.open("POST","/login_up/",false);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("name=jack&passwd=1234");
}
</script>
</body>
</html>
AJAX向服务器发送请求：
1.调用open(method, url ,async)设置请求信息
2.调用send([string])发送
3.调用setRequestHeader(header,value)设置HTTP请求头
open()参数解释：
method 请求类型： GET/POST
url 请求资源路径：/index.html 、/index.html?name=jack& age=23
async是否异步 true(异步) false(同步)
#1.当async=true 异步响应需要设置onreadystatechange响应事件就绪状态的执行函数,放置在xmlhtpp.open()前面
xmlhttp.onreadystatechange = function(){
#判断响应状态码
if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById("contentid").innerHTML=xmlhttp.responseText;
}
}
#2.当async=false时，不要设置onreadystatechange函数
xmlhttp.open("GET","/article?user=jack",false);
xmlhttp.send();
document.getElementById("contentid").innerHTML=xmlhttp.responseText;
| 属性 | 描述 |
|---|---|
| onreadystatechange | 每当readyState改变是，就会触发这个事件 |
| readyState(XMLHttpRequest的一个属性） | 保存XMLHttpRequest的状态： 0：请求未初始化1：服务器连接已建立 2：请求已接收 3：请求处理中 4： 请求已完成，且响应已就绪 |
| status(XMLHttpRequest的一个属性) | 200: "OK" 404:页面未找到 |
其中：onreadystatechange被触发5次(0-4),readyState每一次变化都会触发
send()参数解释：
只有当method=POST时，可以使用send("name=jack&age=23")发送表格内容
POST和GET:
与 POST 相比，GET更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
- 无法使用缓存文件（更新服务器上的文件或数据库）
- 向服务器发送大量数据（POST 没有数据量限制）
- 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
服务器响应：
| 属性 | 描述 |
|---|---|
| responseText | 文本形式的响应数据 |
| responseXML | XML形式的响应数据 |