AJAX JavScript原生异步通信
什么是AJAX
异步的 JavaScript 和 XML，Asynchronous JavaScript and XML
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。
JavaScript原生异步通信
创建对象
//ajax对象
var xmlHttp ;
if(window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
else
{
//老版本IE支持对象
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
状态监听
//当xmlhttp对象的readyState 状态改变时会触发 onreadystatechange事件
xmlHttp.onreadystatechange=function(){
document.getElementById("info").innerText=xmlHttp.responseText;
console.log(xmlHttp.readyState,xmlHttp.status,xmlHttp.responseText);
}
请求发送
// 第一个参数为请求类型 GET POST 第二个参数为请求位置URL 第三个参数为同步/异步
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send()
readyState五种状态：
0 － （未初始化）
(XMLHttpRequest)对象已经创建，但还没有调用open()方法。值为0表示对象已经存在，否则浏览器会报错：对象不存在。
1 － （载入/正在发送请求）
对XMLHttpRequest对象进行初始化，即调用open()方法，根据参数(method,url,true)，完成对象状态的设置。并调用send()方法开始向服务端发送请求。值为1表示正在向服务端发送请求。
2 － （载入完成/数据接收）
此阶段接收服务器端的响应数据。但获得的还只是服务端响应的原始数据，并不能直接在客户端使用。值为2表示send()方法执行完成，已经接收完全部响应数据。并为下一阶段对数据解析作好准备。
3 － （交互/解析数据）正在解析响应内容
此阶段解析接收到的服务器端响应数据。即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody、responseText或responseXML属性存取的格式，为在客户端调用作好准备。值为3表示正在解析数据。
4 － （后台处理完成）响应内容解析完成，可以在客户端调用了
此阶段确认全部数据都已经解析为客户端可用的格式，解析已经完成。值为4表示数据解析完毕，可以通过XMLHttpRequest对象的相应属性取得数据。
status 状态码：
常用：
200：请求成功（后台处理结果ok）、
303：重定向
400：请求错误、401：未授权、403：禁止访问、404：文件未找到
500：服务器错误
服务器响应
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。
GET 还是 POST？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含敏感字符的用户输入时，POST 比 GET 更稳定也更可靠
实现
GET：
<!--开发要认真 三思而后行 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JavaScript版本</title>
</head>
<body>
<button type="button" "asyncRequest()">异步请求</button>
<script type="text/javascript">
function asyncRequest()
{
console.log("异步请求");
//ajax对象
var xmlHttp ;
if(window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
else
{
//老版本IE支持对象
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//当xmlhttp对象的readyState 状态改变时会触发 onreadystatechange事件
xmlHttp.onreadystatechange=function(){
document.getElementById("info").innerText=xmlHttp.responseText;
console.log(xmlHttp.readyState,xmlHttp.status,xmlHttp.responseText);
}
xmlHttp.open("GET","http://localhost:3000?name=zzy",true);
xmlHttp.send()
}
function syncRequest()
{
console.log("同步请求");
}
</script>
</body>
</html>
POST：
<!--开发要认真 三思而后行 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JavaScript版本</title>
</head>
<body>
<button type="button" "asyncRequest()">异步请求</button>
<div id="info"></div>
<script type="text/javascript">
function asyncRequest()
{
console.log("异步请求");
//ajax对象
var xmlHttp ;
if(window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
else
{
//老版本IE支持对象
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//当xmlhttp对象的readyState 状态改变时会触发 onreadystatechange事件
xmlHttp.onreadystatechange=function(){
document.getElementById("info").innerText=xmlHttp.responseText;
console.log(xmlHttp.readyState,xmlHttp.status,xmlHttp.responseText);
}
xmlHttp.open("POST","http://localhost:3000",true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send("id=1&page=1")
}
function syncRequest()
{
console.log("同步请求");
}
</script>
</body>
</html>