Ajax的工作流程

一、Ajax

1、Ajax特点

优点：

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

缺点：

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

2、Ajax原理

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

 

3、ajax流程

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

（1）创建Ajax对象（XmlHttpRequest）

var xml http=new XMLHttpRequest();

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

方法	描述
open(method,url,async)	规定请求的类型、URL以及是否异步处理请求。 method:请求的类型;GET 或 POST url:文件在服务器上的位置 async: true(异步)或false(同步)

（3）获得响应

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

属性	描述
responseText	获得字符串形式的响应数据。
responseXML	获得XML形式的响应数据。

onreadystatechange事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当readyState改变时，就会触发onreadystatechange事件。readyState属性存有XMLHttpRequest的状态信息。

属性	描述
onreadystatechange	存储函数(或函数名)，每当readyState属性改变时，就会调用该函数。
readyState	存有XMLHttpRequest的状态。 从0到4发生变化。 0:请求未初始化 1:服务器连接已建立 2:请求已接收 3:请求处理中 4:请求已完成，且响应已就绪
status	200: "OK" 404:未找到页面

（4）发送请求

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