Ajax及其应用

一、什么是Ajax？

        AJAX（Asynchronous JavaScript And XML ）是一种使用XMLHttpRequest技术构建更复杂、动态的网页的编程实践。Ajax并不是编程语言，是一种从网页访问Web服务器的技术；Ajax可以在不重新刷新网页的情况下实现网页的部分更新。

二、工作原理：

        Ajax提供与服务器异步通信的能力，可在web页面触发js事件中中服务器发出异步请求，如当网页中发生一个事件，由 JavaScript 创建 XMLHttpRequest 对象，再由XMLHttpRequest 对象向Web服务器发送请求，服务器处理该请求后将响应发送回网页，最后JavaScript处理该响应并执行正确动作（比如刷新网页）。

三、XMLHttpRequest对象

        XMLHttpRequest对象顾名思义是基于XML的HTTP请求,是一个浏览器接口,XMLHttpRequest 用于在后台与服务器交换数据。XMLHttpRequest 是 Ajax 技术的核心，通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。

1、XMLHttpRequest方法

 （1）XMLHttpRequest对象的open()方法可以建立一个HTTP请求。

xhr.open(method,url,async);

open方法参数：

• method：HTTP 请求方法，必须参数，值包括 POST、GET 和 HEAD，大小写不敏感。
• url：请求的 URL 字符串，必须参数，大部分浏览器仅支持同源请求。
• async：指定请求是否为异步方式，默认为true。

（2）建立连接后，使用XMLHttpRequest对象的send()方法向服务器发送数据请求。

xhr.send(body);

参数 body 表示将通过该请求发送的数据，如果不传递信息，可以设置为 null 或者省略。

2、XMLHttpRequest属性

属性名	说明
onreadystatechange	用于指定XMLHttpRequest对象状态改变时的事件处理函数
readyState	用于获取XMLHttpRequest对象处理状态
responseText	用于获取服务器响应的XML文档对象
status	是服务器返回的状态码，只有当服务器的响应已经完成时，才会有该状态码
statusText	是服务器返回的状态文本信息，只有当服务器的响应已经完成时，才会有该状态文本信息

3、XMLHttpRequest事件

事件	触发条件
onreadystatechange	每当xhr.readyState改变时触发；但xhr.readyState由非 0 值变为 0 时不触发
onloadstart	调用xhr.send()方法后立即触发，若xhr.send()未被调用则不会触发此事件
onload	当请求成功完成时触发，此时xhr.readystate=4
onloadend	当请求结束（包括请求成功和请求失败）时触发