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;
}
}
发表回复