window.unload ajax不执行_Ajax技术详解

什么是Ajax？

Ajax= Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。Ajax不是新的编程语言,而是一种使用现有标准的新方法。

在生活中，我们在上网时经常会遇到这种情况，如我们在注册一个账号时，输入的用户名在我们没有点击提交按钮的时候，网页会提示我们输入的用户名已被占用；还有，在百度搜索想要的词条时，我们没有按下回车，页面就会根据我们输入的词条自动下搜索并呈现出搜索后的结果。

简而言之，Ajax就是一种在无需重新加载整个页面的情况下，能够更新部分页面的技术。以上类似的情况，就是网页应用Ajax的体现，Ajax就是这些功能的核心技术。

要学习Ajax，就要先明白同步与异步这个概念。程序里面的同步和异步和我们现实生活理解不太一样，一般我们对同步的理解是同时做很多事情，但程序中的同步是按照任务的顺序执行任务，前一个任务没有执行结束，下一个任务不会执行，要等待上一个任务执行结束。异步就是同时可以执行多个任务。类似于游戏里面，普通而玩家只能同时接受一个主线任务，当前任务不完成，无法开启下一个任务；而氪金玩家就可以同时接受多个主线任务，同时进行，不受影响。

但是，同步和异步也有各自的优缺点：

1、同步的执行效率会比较低，耗费时间，但有利于我们对流程进行控制，避免很多不可掌控的意外情况；

2、异步的执行效率高，节省时间，但是会占用更多的资源，也不利于我们对进程进行控制。

要开始学习Ajax，我们需要先创建一个XMLHttpRequest对象，XMLHttpRequest时Ajax的基础。所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法：

var xhr = new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

var xhr = new ActiveXObject('Microsoft.XMLHTTP');

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

接下来我们学习一下Ajax中的向服务器发送请求与服务器响应。

服务器发送请求：

XMLHttpRequest对象用于和服务器交换数据。如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

open(method,url,[aycs])：初始化Ajax对象 (打开)

1.method:http请求方式；2.get/posturl:请求的服务器地址；3.aycs:同步与异步。

应用格式为：

xhr.open();

xhr.send();

关于请求中的GET请求，一段代码例子：

请求的地址为：

var url = 'baidu';

open参数为get

xhr.open('get',url);

设置请求头信息

xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');

设置get请求参数值

xhr.send('names='+inp.value);

而请求中的POST请求，我们只要在open方法中把GET方法改为POST方法即可。

我们再来介绍一个设置请求头的方法，setRequestHeader(header,value)：设置请求头信息header代表请求头名称；value 表示请求头的值。

如果需要获取全部响应头信息，我们用：xhr.getAllResponseHeaders()这个方法；

如果需要获取指定头信息，我们需要用：xhr.getResponseHeader('key')。

服务器响应：

如需获得来自服务器的响应，使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。我们先来介绍两个属性，

responseText：如果服务器端返回字符串，使用responseText进行接收；

responseXML ：如果服务器端返回XML数据，使用responseXML进行接收。

我们再来介绍一个最重要的知识点；

readystste属性，代表Ajax的状态码；从0-4，有五种情况：

0：表示对象已建立，但未初始化，只是 new 成功获取了对象，但是未调用open方法

1：表示对象已初始化，但未发送，调用了open方法，但是未调用send方法

2：已调用send方法进行请求

3：正在接收数据（接收到一部分），客户端已经接收到了一部分返回的数据

4：接收完成，客户端已经接收到了所有数据

onreadystatechange 事件：

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

每当 readyState 改变时，就会触发 onreadystatechange 事件，当 readyState 状态码发生改变时所触发的回调函数。readyState 属性存有 XMLHttpRequest 的状态信息。

好了，Ajax的最基本的介绍就到这里了。