共计 3612 个字符，预计需要花费 10 分钟才能阅读完成。
W3C 学习笔记（谁说抄不是笔记？）
Ajax 根底
Ajax 教程
Ajax=Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
Ajax不是新的编程语言 ，而是一种应用现有规范的新 办法 。
Ajax 是与服务器替换数据并更新局部网页的 艺术（？？？），在不从新加载整个页面的状况下。
Ajax 简介
Ajax 是一种在无需从新加载整个网页的状况下，可能更新局部网页的技术。
学习之前，应该要对上面的常识有根本的理解：
- HTML/XHTML
- CSS
- JavaScript/DOM
-
- *
什么事 Ajax？
Ajax= 异步 javascript 和 xml。
Ajax 事一种用于创立疾速动静网页的技术。
通过在后盾与服务器进行大量数据交换，Ajax 能够应用网页实现异步更新。这意外这能够在不从新加载整个网页的状况下，对网页的某局部进行更新。
传统的网页（不实用 Ajax）如果须要更新内容，必须更新整个网页面。
有很多应用 Ajax 的应用程序案例：Google 地图，弹幕等。
Ajax 实例
案例参见：https://www.w3school.com.cn/a…
Ajax 实例解释：
下面的 Ajax 应用程序蕴含一个 div 和一个按钮。
div 局部用于显示来自服务器的信息，当按钮被点击时，它负责调用名为 loadXMLDoc()的函数，留神这是须要写在 <body> 中的页面显示局部：
<body>
<div id="myDiv"><h3>Let Ajax change this text</h3></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>接下来就是须要在 head 局部增加一个 script 标签：
<head>
<script type="text/javascript">
function loadXMLDoc(){}
</script>
</head>Ajax XHR
XHR 创建对象
XMLHttpRequest 是 Ajax 的根底
XMLHttpRequest 对象
所有古代浏览器均反对 XMLHttpRequest 对象（IE5 和 IE6 是用 ActiveXObject）。
XMLHttpRequest 用于在后盾与服务器替换数据，这意味着能够在不从新加载整个页面的状况下，对网页的某局部进行更新。
创立 XMLHttpRequest 对象
所有浏览器（IE7+，FireFox，Chrome，Safari 以及 Opera）均外敌 XMLHttpRequest 对象
创立 XMLHttpRequest 对象的语法：
variable=new XMLHttpRequest();Ajax 申请
XMLHttpRequest 对象用于和服务器替换数据
向服务器发送申请
如需讲申请发送带服务器，咱们应用 XMLHttpRequest 对象的 open()和 send()办法：
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();| 办法 | 形容 |
|---|---|
| open(method,url,async) | 规定申请的类型、URL 以及是否异步解决申请。1.method：申请的类型；GET 和 POST。2.URL：文件在服务器上的地位 3.async：true（异步）或 false（同步） |
| send（String） | 将申请发送到服务器。string：仅用于 POST 申请 |
GET 还是 POST？
与 POST 相比，GET 绝对更简略，也更快，并且在大部分状况下都能用，而后在一下状况中，请应用 POST 申请：
- 无奈应用缓存文件（更新服务器上的文件或数据库）
- 像服务器发送大量数据（POST 没有数据量限度）
- 发送蕴含未知字符的用户输出时，POST 比 GET 更文件也更牢靠
-
- *
GET 申请
一个简略的 GET 申请：
xhr.open("GET","demo_get.asp",true);
xhr.send();如果心愿通过 GET 办法发送信息，能够再增加：
xhr.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
xhr.send();POST 申请
一个简略的 POST 申请：
xhr.open("POST","demo_post.asp",true);
xhr.send();如果须要像 HTML 表单那样 POST 数据，能够应用 setRequestHeader（）来增加 HTTP 头。而后在 send 办法中规定你心愿发送的数据：
xhr.open("POST","demo_post.asp",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("fname=Bill&lname=Gates");| 办法 | 形容 |
|---|---|
| setRequestHeader(_header_,_value_) | 向申请增加 HTTP 头。hearder: 规定头的名称 value：规定头的值~~~~ |
url- 服务器上的文件
open() 办法的 url 参数是服务器上文件的地址：
xmlhttp.open("GET","ajax_test.asp",true);该文件能够是任何类型的文件，比方：.txt 和.xml，或者服务器脚本文件，比方：.asp 和.php（在传回相应之前，可能在服务器上执行工作）。
异步：Async=true
当应用 async=true 时，就须要规定相应处于 onreadystatechange 工夫中的就绪状态时执行的函数：
xhr.onreadystatechange=function(){if(xhr.readyState==4&&xhr.status==200){document.getElementById("myDiv").innerHTML=xhr.responseText;
}
}
xhr.open("GET","test1.txt",true);同步：Async=false
如果应用 async=false，须要在 open()办法中的第三个参数批改为 false，W3C 不举荐应用这个，然而对于小申请，也是能够的。请记住，javascript 会等到服务器相应就绪才继续执行，如果服务器忙碌或迟缓，应用程序会被挂起或进行
XHR 响应
服务器相应
如需取得来自服务器的相应，就须要 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
| 属性 | 形容 |
|---|---|
| responseText | 取得字符串模式的响应数据。 |
| responseXML | 取得 XML 模式的响应数据。 |
responseText 属性
responseText 属性返回字符串模式的响应，写法为：
document.getElementById("myDiv").innerHTML=xhr.responseText;responseXML 属性
如果来自服务器的响应是 XML，并且须要作为 XML 对象进行解析，就须要应用 responseXML，例如：
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementByTagName("SHIT");
for(i=0;i<x.length;i++){txt=txt+x[i].childNodes[0].nodeValue+"<br/>";
}
document.getElementById("myDiv").innerHTML=txt; XHR readyState
onreadystatechange 事件
当申请被发送到服务器时，咱们须要执行一些急于响应的工作。每当 readState 扭转时，就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。上面是 XMLHttpRequest 对象的三个重要的属性：
| 属性 | 形容 |
|---|---|
| onreadystatechange | 存储函数（或函数名），每当 readyState 属性扭转时，就会调用该函数。 |
| readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。0：申请未初始化。1：服务器连贯已建设。2：申请已接管。3：申请解决中。4：申请已实现，切响应已就绪 |
| status | 200：”OK” 400: 未找到页面 |
在 onreadystatechange 事件中，咱们规定当服务器响应已做好被解决的筹备时执行的工作。当 readyState 等于 4 时切状态为 200 时，示意响应已就绪：
xmlhttp.onreadystatechange=function()
{if (xmlhttp.readyState==4 && xmlhttp.status==200)
{document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
