JQuery里的Ajax使用

Ajax就是通过 HTTP 请求加载远程数据。

jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。

$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接 操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。

最简单的情况下，$.ajax()可以不带任何参数直接使用。

Ajax也不是某种什么编程语言，Ajax是一种在不需要重新加载整个网页的情况下，够让部分网页更新的技术。

而且有些传统的网页不使用Ajax，如果需要更新内容的话必须要重载整个网页。

Ajax异步实现要运用XMLHttpRequest和web服务器进行数据的异步交换

我们就来说说创建XMLHttpRequest对象

XMLHttpRequest 对象是用于在后台与服务器交换数据的。

所有现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest对象。

通过一行简单的 JavaScript 代码，我们就可以创建 XMLHttpRequest对象。

创建XMLHttpRequest对象的语法

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。

如果支持，则创建 XMLHttpRequest 对象。

如果不支持，则创建 ActiveXObject ：

Ajax向服务器发送请求,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求。

参数说明：

method：请求的类型；GET 或 POST

url：文件在服务器上的位置

async：true（异步）或 false（同步）Asynchronous

send(string)：将请求发送到服务器。

参数说明：

string：仅用于 POST 请求

一个简单的 GET 请求：

xhr.open("GET","/jQueryAjax/getPersonInfor",true);

xhr.send();

一个简单 POST 请求：

xhr.open("POST","/jQueryAjax/getPersonInfor",true);

xhr.send();

如果需要像 HTML 表单那样 POST 数据，

请使用 setRequestHeader() 来添加 HTTP 头。

然后在 send() 方法中规定您希望发送的数据：

xhr.open("POST","/jQueryAjax/postPersonInfor",true);      xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xhr.send(data);

然后使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性

获取来自服务器的响应

responseText：获得字符串形式的响应数据。

responseXML：获得 XML 形式的响应数据。

document.getElementById("myDiv").innerHTML=xhr.responseText;

AJAX的onreadystatechange 事件

onreadystatechange 事件

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

readyState 属性存有 XMLHttpRequest 的状态信息

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

onreadystatechange:存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

readyState:存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成，且响应已就绪

status:  200: "OK"  404: 未找到页面

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于 3 且状态为 200 时，表示响应已就绪：

xhr.onreadystatechange = function () {

if (xhr.readyState == 3 && xhr.status == 200) {

var txt = xhr.responseText;

console.log(txt);

                    }

                }