认识Ajax

一、Ajax、

1、AJAX 特点

优点：

可以无需刷新页面，与服务器进行通信
允许依据用户事件更新部分页面内容

缺点：

没有浏览历史，不能回退
存在跨越问题
SEO不友好

AJAX 原理

客户端发送请求，请求交给XMLHttpRequest，XMLHttpRequest 把请求提交给服务，服务器进行业务处理，服务器响应数据交给XMLHttpRequest对象，XMLHttpRequest对象接收数据，由javascript把数据写到页面上。

AJAX 应用

• 运用 XHTML+CSS 来表达资讯；

• 运用 JavaScript 操作 DOM（Document Object Model）来执行动态效果；

• 运用 XML 和 XSLT 操作资料;

• 运用 XMLHttpRequest 或新的 Fetch API 与网页服务器进行异步资料交换；

• 注意：AJAX 与 Flash、Silverlight 和 Java Applet 等 RIA 技术是有区分的。

AJAX 流程

    Ajax通过XmlHttpRequest对象来向服务器发出异步请求，从服务器获得数据，然后用Javascript来操作DOM而更新页面。

（1）创建Ajax对象（XmlHttpRequest）

var xml http=new XMLHttpRequest();

（2）判断数据的传输方式（get/post），打开链接open()

（3）获得响应

如需获得来自服务器的响应，请使用XMLHttpRequest对象的responseText或responseXML属性。

onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

（4）发送请求

document.querySelector("#btn1").onclick = function () {
            //第一步：创建一个XMLHttpRequet对象
            var xmlhttp = new XMLHttpRequest();
            //第二步：告诉浏览器请求的方式是什么，以及请求发送到那
            xmlhttp.open("get", "student.xml", true);
            //第三步：设置响应服务器端数据处理
            xmlhttp.onreadystatechange = function () {
            }
            //第四步：发送请求
            xmlhttp.send()
}