2018-11-27

2018-12-09 本文已影响0人缪呜

AJAX

AJAX是什么？？？

Asynchronous JavaScript & XML（js请求XML异步的技术）。
是网页i开发的一种技术。
作用就是用于异步，异步发送 & 请求数据。
不需要重新刷新当前页面。
目前更多使用JSON数据格式。

AJAX工作流程

下图表示为AJAX的工作流程：

客户端用于发送请求，服务器用于将客户端所请求的东西响应给客户端。客户端通过XMLHttpRequest对象和服务器进行对接，对接过程中会有对应的状态码和请求码。如果和服务器已经连接成功，那么服务器会以XML或者JSON这样的数据格式来返回，返回时先返回到代码里，此时会得到HTML Response响应数据，针对该响应数据放到对应的文档中。

XMLHttpRequest对象

它其实是一个对象类型的API。
是在浏览器环境下使用的。
用于客户端和服务端之间的数据的传输和接收。
用于请求XML数据以及JSON，甚至是纯文本text。

关于JS获取元素

getElementById()

GetElementById()可以访问Document中的某一特定元素，可以通过ID来取得元素，所只能访问设置了ID的元素。

<div id="docid"></div>

此时可以用getElementById("docid")来获取这个元素。

getElementsByName()

getElementsByname()可以通过name来获得元素。因为name可以重复所以此处是elements。如果一个文档中有两个以上的标签name相同，那么getElementsByname()可以取得这些元素组成一个数组。

<div name="docname" id="docid1"></div>
<div name="docname" id="docid2"></id>

此时可以用getElementsByname("docname")来获得着两个div，getElementsByname("docname")[0]访问第一个div，getElementsByname("docname")[1]访问第二个div。

getElementsByTagName()

getElementsByTagName()通过TagName，即标签名称来获得元素，因为一个document中会有相同的标签，所以这里也是elements。

<body>
<div name="docname" id="docid1" onClick="bgcolor()"></div>
<div name="docname" id="docid2" onClick="bgcolor()"></div>
</body>
</html>
<script language="JavaScript" type="text/JavaScript">
<!--
function bgcolor(){
    var docnObj=document.getElementsByTagName("div");
    docnObj[0].style.backgroundColor = "black";
    docnObj[1].style.backgroundColor = "black";
}
-->
</script>

这里可以用getElementsByTagName("div")来访问，用getElementsByTagName("div")[0]访问第一个div，getElementsByTagName("div")[1]访问第二个div。

下面是总结~

访问某一个特定元素时可以使用getElementById()，访问标签时使用getElementsByTagName()，但要注意的是IE浏览器并不支持这种方式。