一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天，点击查看活动详情。
Ajax
Ajax是Asynchronous JavaScript And XML的缩写
主要功能是实现异步刷新
首先是不通过Ajax进行数据交互
//如果不同过Ajax提交数据
<html>
<head>
<title>Test1</title>
<meta charset="utf-8">
</head>
<body>
<form action="./test.html">
Input Username <input name="name" type="text" value="">
<input type="submit" value="Submit">
</form>
<script>
</script>
</body>
</html>
//test.html中的内容
<script>
document.write("<h3>Already Username</h3>");
</script>
Ajax 一种创建动态网页的技术
通过后台和服务器进行少量数据交换，Ajax可以使网页实现异步更新
网页不需要重新加载，只对某一部分进行更新
首先浏览器创建一个XMLHttpRequest()对象，然后向服务器发送HttpRquest
服务器首先处理浏览器发送的HttpRquest，然后创建响应并将数据返回浏览器
浏览器使用Javascript处理返回的数据，更新页面内容
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="myDiv"><h2>使用Ajax修改内容</h2></div>
<button onclick="loadXMLDoc()">修改内容</button>
<script>
function loadXMLDoc(){
//AJAX脚本执行
}
</script>
</body>
</html>
Ajax脚本执行，逐步解析
创建XMLHttpRequest对象
var xmlhttp;
xmlhttp = new XMLHttpRequest();
创建XMLhttpRequest对象，不同版本的浏览器也有区别
现在所有的浏览器基本都内建了XMLHttpRequest对象
而项IE5或者IE6等老版本浏览器则没有
需要使用另一个方法创建
var xmlhttp;
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
所以为了不管再那个版本中都不出错，可以使用一个if语句进行判断
var xmlhttp;
if (window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}
else{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
向服务器发送请求
对于发送请求到服务器，需要使用到XMLHttpRequest对象的open()和send()方法
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
关于open方法
open(method,url,async)
其中method：请求的类型，GET或者POST
url：文件在服务器的位置
async：true(异步),false(同步) //如果XMLHttpRequest对象要使用Ajax的话，async一定要true
异步：不可以和多线程相等，虽然看起来很像同时执行
当一个线程，需要等待的时候，异步不需要阻塞当前线程等待处理完成，而是会允许后续的操作
直到其它线程处理完成，并回调通知此线程
//一个异步代码
console.log(1);
setTimeout(function(){console.log(2);},0) //设置一个定时器，打印2
console.log(3)
//打印结果:
1 3 2
关于send方法
send(string)，将请求发送到服务器，仅用于POST请求
GET请求
xmlhttp.open("GET","demo.php",true);
xmlhttp.send();
但是这样有可能会得到缓存的结果
所以为了避免这种情况，可以给url设置一个唯一的ID
xmlhttp.open("GET","demo.php?t="+Math.random,true);
如果想在url上附带信息
xmlhttp.open("GET","demo.php?name=test&age=19",true);
POST请求
xmlhttp.open("POST","demo.php",true)
xmlhttp.send();
使用setRequestHeader()添加HTTP头
xmlhttp.open("POST","demo.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("name=test&age=19")；
服务器响应
responseText获取字符串形式的响应数据
responseXML获取XML形式的响应数据
字符串形式的响应，可以这样子使用
document.getElementById("d1").innerHTML=xmlhttp.responseText;
如果是xml形式的响应
xmldoc = xmlhttp.responseXML;
txt = "";
x = xmldoc.getElementsByTagName("ARTIST");
for (var i=0;i<x.length;i++){
txt = txt+x[i].childNodes[0].nodeValue+"<br>";
/*
childNodes返回子节点的集合
[0]代表第一个子节点
nodeValue是获取节点的值
*/
}
document.getElementById("d1").innerHTML=txt;
onreadystatechange事件
onreadystatechange 存储函数，如果readyState的属性发生改变，就会调用该函数
readyState放着XMLHttpRequest的状态，从0到4分别不同
0:请求未初始化，1:服务器连接已建立，2请求已接收，3:请求处理中，4:请求已完成，且响应就绪
status 200:"OK",404:"未找到页面"
所以一般有一个固定的写法
var xmlhttp;
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("d1").innerHTML=xmlhttp.responseText;
}
}
这样子写，如果存在多个Ajax任务，就要每次都重新写一遍，就会非常麻烦。所以可以写一个标准的函数，然后每次执行Ajax任务的时候调用该函数
function loadXMLDoc(){
//Ajax脚本执行
}
function myrequest(){
loadXMLDoc("dome.php",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("d1").innerHTML=xmlhttp.responseText;
}
});
}
\
