文章标题

原生 Ajax 的使用
下面我们使用 ajax 来从服务器端获取数据：

/* ajax的使用分四步走 */
function getDate() {
//1、创建XMLHttpRequest对象，注意，IE6的兼容问题 var xhr = new XMLHttpRequest();
//打开连接，open方法有三个参数 ， 第一个是访问的请求方式，第二个是访问服务器的URL，第三个是一个Boolean值，true表示异步， false表示同步，一般为异步，默认是true。 当请求是GET时，参数可以直接在URL后面拼接，
如： * ajax.do？name=123&password=123 ， 当参数拼接时，一定要加?表示携带参数，当存在多个参数时， 每个参数间使用&拼接，注意参数时键值对的方式，以等号连接 */
xhr.open(“GET”,”ajax.do”,true);
//3、ajax的回调函数
xhr.onreadystatechange = function() {
/* 回调函数会触发好几次，但是我们一般只会使用最后一次。 就是请求完成的触发,readState 等于4的时候 ，
{ 0 请求未初始化（在调用 open() 之前）
1 请求已提出（调用 send() 之前）
2 请求已发送（这里通常可以从响应得到内容头部）
3 请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）
4 请求已完成（可以访问服务器响应并使用它） } */
/* readyState等于4表示请求已经结束，服务器响应完成
status表示http请求的状态，200表示正常响应
404表示资源不可达（找不到）
500表示服务器端错误 */
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);//得到服务器端的文本数据 alert(xhr.responseXML);//得到服务器端的XML数据 }
};
/*发送数据，如果没有数据，可以不传递数据或者传递null, 如:xhr.send(null);
如果post请求传递数据，则这样写
1. 首先设置一下xhr的请求头信息 xhr.setRequestHeader(“Content-type”,”application/x-www-form
urlencoded”);
2. 再这样传递参数
3. * xhr.send(name=liujianhong&password=123); */
xhr.send();
}
Ajax 的使用包括了四步：
1、 得到 XMLHttpRequest 对象，注意如果要兼容 IE6 则使用我注释的代码
2、 使用 XMLHttpRequest 对象的 open 方法，注意参数问题
3、 Ajax 的回调函数，服务器响应后，得到数据的处理
4、 发送请求 send 方法。