前端知识点整理系列（一）—— Ajax

准备找实习了，打算对前端的基础知识点做一些整理，做为找实习前的准备，这将会是一个系列的文章总结。

---

今天，我们来谈谈Ajax。

首先来看看Ajax的全称是什么？ AJAX = Asynchronous JavaScript and XML（异步的 JavaScript
和 XML）。

在Ajax被使用之前，假如我们要更新页面内容的话，需要重新加载整个的页面，但Ajax出现后，改变了这个劣势，我们可以在不重新加载整个网页的情况下，对网页的某部分进行更新。现如今，Web开发的过程中，Ajax已经普遍化了，在我们身边处处可见。例如谷歌，百度的搜索引擎，当我们在搜索框输入查询的内容时，提示框会实时更新而不需要重新加载网页，这就是用到了Ajax技术。
下面整理一下Ajax的工作原理。
Ajax的核心是XMLHttpRequest对象，它是Ajax实现的关键——发送异步请求，接收响应及执行回调都是通过它来完成的。

实现Ajax的基本步骤

1. 创建XMLHttpRequest对象,也就是创建一个异步调用对象.
2. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
3. 设置响应HTTP请求状态变化的函数.
4. 发送HTTP请求.
5. 获取异步调用返回的数据.
6. 使用JavaScript和DOM实现局部刷新.

我们先来看看原生javascript的ajax实现。

function Ajax(){
    //声明一个空对象来装入XMLHttpRequest对象
    var xmlHttpReq = null;
    //实例化XMLHttpRequest对象
    if(window.ActiveXobject){          //IE5.6是以ActiveXobject的方式实现
        xmlHttpReq = new ActiveXobject("Microsoft.XMLHTTP");
    }else if(window.XMLHttpRequest){      //除IE5,6以外的浏览器实现
        xmlHttpReq = new XMLHttpRequest();  
    }
    //调用open()方法并采用异步方式
    xmlHttpReq.open("GET","test.php",true);   
    //将请求发送到服务器（post可加入参数string）
    xmlHttpReq.send();   
    //请求状态改变回调
    xmlHttpReq.onreadystatechange=function(){
        if (xmlHttpReq.readyState==4 && xmlHttpReq.status==200){
            document.getElementById("myDiv").innerHTML=xmlHttpReq.responseText;
        }
    }
}

下表是readyState对应的状态码和描述

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState 0	请求未初始化
readyState 1	服务器连接已建立
readyState 2	请求已接收
readyState 3	请求处理中
readyState 4	请求已完成，且响应已就绪

---

再罗列一些http状态码吧。

状态码	描述
200	OK 一切正常，对GET和POST请求的应答文档跟在后面
301	Moved Permanently 客户请求的文档在其他地方，新的URL在Location头中给出，浏览器应该自动地访问新的URL。
302	Found 类似于301，但新的URL应该被视为临时性的替代，而不是永久性的。
304	Not Modified 客户端有缓冲的文档并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。
400	Bad Request 请求出现语法错误。
403	Forbidden 资源不可用。
404	Not Found 无法找到指定位置的资源
500	Internal Server Error 服务器遇到了意料不到的情况，不能完成客户的请求
501	Not Implemented 服务器不支持实现请求所需要的功能。例如，客户发出了一个服务器不支持的PUT请求

---

我们再看看jQuery对ajax的实现是怎么样的。在jQuery中$.ajax()方法属于最底层的方法，第二层是load(),$.get()方法，第三层是$.getScript()和$.getJSON()方法。我只整理一下$.ajax()方法，因为我平时用的最多。

$.ajax({ 
    url: "http://www.microsoft.com",    //请求的url地址 
    dataType: "json",   //返回格式为json 
    async: true, //请求是否异步，默认为异步，这也是ajax重要特性 
    data: { "id": "value" },    //参数值 
    type: "GET",   //请求方式 
    beforeSend: function() { 
        //请求前的处理 
    }, 
    success: function(data，textStatus) { 
        //请求成功时处理 
        alert(data);
    }, 
    complete: function() { 
        //请求完成的处理 
    }, 
    error: function() { 
        //请求出错处理 
    } 
}); 

本篇的Ajax使用就总结到这里，当然还有一些方法并未能全部的总结。在以后使用中，我会把它们也总结下来。