异步交互（一）

前言：

        本文为javascript中ajax使用的快速指南，旨在作为一个快速上手使用的资料备份，更长使用的为jQuery中封装后的ajax技术。

一、获取XMLHttpRequest对象

        ajax的核心为XMLHttpRequest对象，通过该对象和服务器进行异步交互，因此使用Ajax技术的第一步，就是从不同的浏览器获取该对象的实例。

获取xhr对象的代码（附注：该段代码源自w3cschool）：

function getXmlHttpRequest() {var xmlHttp = null;try {// Firefox, Opera 8.0+, SafarixmlHttp = new XMLHttpRequest();} catch (e) {// Internet Explorertry {xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");} catch (e) {xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}}return xmlHttp;}

二、发送异步请求

        常用的web请求方式有两种，即get和post，得到xhr对象之后，通过这两种请求方式可以和服务器进行异步交互。

        get方式：get方式与服务器进行交互，无需显示传递参数，传递的参数附在url末尾，因此获取xhr对象之后，send方法传入的参数为null；

        post方式：post方式与服务器进行交互，请求参数封装在请求体中，因此需要通过xhr的send方法显示传递参数，另外，post方式交互原理是通过xhr模拟post方式提交表单，因此必须显示的设置请求头参数"content-type"为"application/x-www-form-urlencoded"，否则服务器不能正常解析请求（具体原因，请参考HTTP协议）；

        javascript实现的代码如下：

window.onload = function(){var xhr = getXmlHttpRequest();xhr.onreadystatechange = function(){if(xhr.readyState == 4)if(xhr.status == 200){alert("数据已经成功发送到服务器");alert(xhr.statusText);}};//get方式document.getElementById("getBtn").onclick = function(){xhr.open("get", "/ajax_demo/info?username=zhangsan&password=123");xhr.send(null);};//post方式document.getElementById("postBtn").onclick = function(){xhr.open("post", "/ajax_demo/info");xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");//post方式发送参请求参数xhr.send("username=lisi&password=456");};document.getElementById("showProductInfo").onclick = function(){xhr.open("post", "/ajax_demo/product");xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");//post方式，如果无参，则传nullxhr.send(null);};};

附注：

        本文如有错漏，烦请联系，不胜感激！