AJAX学习总结
学习任务
-
AJAX的主要作用/目的
-
实现原理
-
工作步骤
-
XMLHttPRequest对象
-
实例AJAX的一般步骤
AJAX的主要作用/目的
AJAX，我们都知道它的主要作用是异步传输，那什么叫异步传输呢？
异步传输是 通过在后台与服务器进行少量数据交换，使网页实现局部刷新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。以前的时候，浏览器与服务器之间的交互，都是客户端重新发送请求，服务器响应请求，响应的是整个页面。可能我们只是改了页面的很小一部分，其他都没变，但是服务器依然会给我们发送一个新的应答。导致客户端上的与服务器发来的有相关多的一部分是重复的。但是AJAX可以使我们局部刷新，使服务器给我们发我们需要的那部分。
那为什么它可以实现局部刷新呢？
这个问题我们放到结尾来回答。
实现原理
浏览器访问服务器时，标准的请求响应时，浏览器的动作是同步操作。如浏览器请求某地址。
工作步骤
- 第一步浏览器中触发某个事件，创建XMLHttpRequest对象。
- 通过这个对象来向服务器发送请求。
- 服务器接收到该请求后，处理该请求，向浏览器做出回复。
- 浏览器中通过js代码来局部修改页面内容。
XMLHttPRequest对象
了解AJAX的小伙伴们，会发现在AJAX异步传输的过程中有一个对象至关重要且始终存在，它就是XMLHTTPRequest，下面我没来详细了解一下这个对象
XMLHttpRequest 用于在后台与服务器交换数据。没有它的存在，将不会有异步传输。
- 通过var xmlhttp = new XMLHttpRequest();来创建该对象。
- xmlhttp.onreadystatechange=function(){ 执行 接受服务器响应和对服务器响应做出操作}，该对象的onreadystatechange方法中，每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState的值表示此次请求的状态信息，也就是XMLHttpRequest对象的状态信息。
- xmlhttp.open("GET/POST","URL",true);open()方法用来设置该请求的一些信息，第一个参数是请求类型（GET/POST），第二个参数是服务器目标文件的地址。第三个参数是，是否执行AJAX异步。
- xmlhttp.send();用来发送该请求。
实例AJAX的一般步骤
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h1>哈哈哈哈</h1></div>
<button type="button" onclick="loadXMLDoc()">AJAX传值</button>
</body>
</html>现在来解决开头的那个问题，为什么AJAX可以实现局部刷新呢？
- js可以获取网页中个元素的对象，然后修改它们
- 服务器的响应通过js来截断。然后通过js来实现网页的局部刷新
所以说AJAX是依托于js的，为什么ajax放在js代码中，就是因为js的这种局部修改的特殊性。
