关于javascript:秃头油腻胖子的进阶之路Ajax篇上

W3C 学习笔记（谁说抄不是笔记？）

Ajax=Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
Ajax不是新的编程语言，而是一种应用现有规范的新办法。
Ajax 是与服务器替换数据并更新局部网页的艺术（？？？），在不从新加载整个页面的状况下。

Ajax 是一种在无需从新加载整个网页的状况下，可能更新局部网页的技术。

学习之前，应该要对上面的常识有根本的理解：

HTML/XHTML
CSS
JavaScript/DOM
- *

什么事 Ajax？
Ajax= 异步 javascript 和 xml。
Ajax 事一种用于创立疾速动静网页的技术。

通过在后盾与服务器进行大量数据交换，Ajax 能够应用网页实现异步更新。这意外这能够在不从新加载整个网页的状况下，对网页的某局部进行更新。
传统的网页（不实用 Ajax）如果须要更新内容，必须更新整个网页面。
有很多应用 Ajax 的应用程序案例：Google 地图，弹幕等。

案例参见：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>

XMLHttpRequest 是 Ajax 的根底

XMLHttpRequest 对象

所有古代浏览器均反对 XMLHttpRequest 对象（IE5 和 IE6 是用 ActiveXObject）。
XMLHttpRequest 用于在后盾与服务器替换数据，这意味着能够在不从新加载整个页面的状况下，对网页的某局部进行更新。

创立 XMLHttpRequest 对象

所有浏览器（IE7+，FireFox，Chrome，Safari 以及 Opera）均外敌 XMLHttpRequest 对象

创立 XMLHttpRequest 对象的语法：

variable=new XMLHttpRequest();

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 会等到服务器相应就绪才继续执行，如果服务器忙碌或迟缓，应用程序会被挂起或进行

服务器相应
如需取得来自服务器的相应，就须要 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;

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;
    }
  }

关于javascript:秃头油腻胖子的进阶之路Ajax篇上

Ajax 根底

Ajax 教程

Ajax 简介

Ajax 实例

Ajax XHR

XHR 创建对象

Ajax 申请

向服务器发送申请

XHR 响应

XHR readyState