ajax运行原理及实现步骤

Ajax运行原理

在传统的网站应用当中 ，都是由浏览器本身向服务器端发送请求，由浏览器本身接受服务器端响应到客户端的数据，由于浏览去在发送请求和接收响应之间不能再继续响应用户的其他操作，比如继续浏览并拉动当前页面所以用户体验不好。
要实现在用户浏览当前网站期间向服务器端发送请求，并将请求来的数据在不刷新页面的情况下更新在页面当中。
所以请求的发送与响应的接受就不能由浏览器自己来做它要找一个代理人帮助他做这件事情，如有有人能帮助浏览器做了这件事情，浏览器就能空闲下来响应用户的操作了。
实际上Ajax就是浏览器的代理。

由Ajax代浏览器向服务器端发送请求，由Ajax帮助浏览器接受服务器端响应到客户端的数据，当Ajax接收到服务器端响应过来的数据之后，再使用DOM方法将服务器端发送过来的数据内容添加到页面当中。这样就能实现客户边浏览网站边向服务器端请求数据了。并且实现页面无刷新数据。
在传统的网站当中请求的发送与响应的接受开发人员是不可控的，而使用ajax技术向服务器端发送请求与响应接受开发人员是可控的。
我们可以在请求发送与接受响应期间为用户做加载提示以进一步提高用户浏览网站应用的体验。
这就是AJax向服务器端发送请求与接受响应的过程。

Ajax的实现步骤

1.创建Ajax对象
实际上就是帮助浏览器创建帮助它发送请求的代理人，在javascript之中有一个内置的构造函数叫XMLHttpRequest();创建XMLHttpRequest();这个构造函数的对象就是在创造Ajax对象，我们声明一个变量叫xhr来接受Ajax对象。

var xhr = new XMLHttpRequest();

XMLHttpRequest()构造函数中的XML指的是服务器端与客户端传输内容的数据格式，现在在Ajax的请求当中，服务器端返回给客户端的数据一般都是json数据格式。
XML这种数据格式在Ajax技术中已经很少见了。
HttpRequest指的就是HTTP请求的意思

2.告诉Ajax请求地址以及请求方式

xhr.open('get','http://www.example.com');

open方法的第一个参数是请求方式，值为get或post。第二个参数是请求地址，实际上就是服务器端对应的路由器请求地址，在请求地址和请求方式配置完成以后我们要做第三件事情。

3.发送请求

xhr.send();

如果不调用send方法请求是不会发送的。
4.获取服务器端给予客户端的响应数据
由于请求受网络速度快慢的影响，是需要一定的时间才能完成的，这个时间是一个不确定的时间，所以我们不能在send方法的后面直接取得返回的结果，我们需要为xhr对象下面的onload事件添加事件处理函数

xhr.onload = function(){
	console.log(xhr.responseText);
}

当服务器端对客户端做出了响应浏览器就会自动调用xhr对象下面的onload事件对应的事件处理函数。
在事件处理函数中，我们就可以获取到服务端给客户端响应的数据了，通过xhr对象下面的responseText属性获取服务器端响应的数据。