刚接触AJAX时,只知道在前端开发中她可以实现客户端和服务器端的异步数据交互。

        如果不使用AJAX，一个静态网页想要与服务器进行数据交互或是部分网页内容更新，基本上需要重新载入的。

        AJAX其实只是一个概念，一种思想。具体其实靠的是XMLHttpRequest这么个对象来实现的。这么一把异步网络交互神器，要是不好好学学，实在不好意思说自己也了解前端开发了。

<(￣︶￣)>。

        这里AJAX的身世咱就不去了解了，感兴趣的朋友可以百度。下面进入正题，学习AJAX的具体实现。

        搞编程的基本都懂面向对象吧(*^__^*)，咱要和服务端交互得有一个异步网络请求。那好,

先实现一个简单的异步请求：

 在上面的截图实现了一个简单的get请求，并打印服务端返回的数据。

有没有觉得很简单︿(￣︶￣)︿。

一点也不假，具体流程很简单:初始化一个异步请求-->为其设置必要的配置（请求方式，请求地址，开启异步）-->将请求发送出去-->等待数据返回。

(*@ο@*) 哇～这么几个函数调用就实现了一个异步请求，她到底是如何实现的咧？这里咱打住。咱学习的目的是如何使用，不去解析源码。点到为止嘛。-_-|||

GET的说明和限制：

1：open()函数中可以传递三个参数，第一个不用说咱使用“GET”。第二个参数url为需要请求的地址，若是想带上请求参数直接拼接在地址后面即可。第三个参数控制请求是否开启异步，其实不传默认就是true（异步），不设置也可以。如果设置为false（同步）浏览器会提示：、

嘿嘿执行不通过(ノへ￣、)

2:send()函数参数只能为空。如果我想传点什么(￣～￣) 嚼! 过去，比如表单提交，请出门左拐，额，不对！请使用POST请求方式。GET请求比如需要传递一个参数nickName=琉璃琥过去可以这样：http://www.xxx.com?nickName=琉璃琥。

3：onload 是发送请求后服务器的响应事件。服务器响应成功了会通过该事件来处理响应结果。多好多和谐是吧。

readyState ,status

好了，说的服务器响应了这里不得不说下 readyState ,status这两个属性值了。readyState表示的时XMLHttpRequest的实时属性/状态。status代表一个Http网络请求的服务器响应状态。对于status应该好理解，咱发送一个网络请求，咱就可以通过status知道请求成功还是出状况了。比如200（请求成功）,404(未找请求数据)，500+（不好意思服务器都歇了）。而readyState有5个状态：

readyState不同于status，她主要显示当前请求的状态，个人觉得侧重点在于客户端而不在与服务端。咱稍微多想一点就可以发现，我要了解下发送的请求服务器是否正已建立连接，这个时候通过http的响应状态码是无法准确判断的。功能上，就像网上买一个娃娃快递寄回来，快递员相当于status当你见到快递小哥（也可能是个美女o(*≧▽≦)ツ┏━┓）时，快递都已经到手了。咱查的订单信息相当于readyState，可以通过订单信息知道咱的娃娃是到哪了还是神秘的消失了。

onreadystatechange

好了，两个状态值说完了。这里还得提下onreadystatechange事件。onreadystatechange也是XMLHttpRequest的一个监听事件。相较于前者onload，onreadystatechange知道的事跟多，打印日志看看：

上面截图是一次GET请求打印的实时状态，不用多解释就知道。onreadystatechange作用跟大。

POST请求

话不多说直接上图

一目了然，采用POST请求时，19行就是将需要传递的字段通过哦send()函数发送给服务端。我这里使用onreadystatechange来监听数据提交的状态。如21-26行代码，在监听中判断如果请求事件和响应事件完成并成功后打印响应的数据，否则处理失败的逻辑。

到这里算是了解到了XMLHttpRequest的使用和AJAX基本概念 \(^o^)/YES!。若是发现本文中概念理解错误或是方式使用不当，希望评论区指正，吐槽。O(∩_∩)O哈哈~