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：申请已实现，切响应已就绪
status200："OK" 400:未找到页面

在onreadystatechange事件中，咱们规定当服务器响应已做好被解决的筹备时执行的工作。当readyState等于4时切状态为200时，示意响应已就绪：

xmlhttp.onreadystatechange=function()  {  if (xmlhttp.readyState==4 && xmlhttp.status==200)    {    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;    }  }