Web前端：Ajax用法

说明：

Ajax用于异步请求，本网页内刷新。

一、代码提示插件：

(1)Help菜单 - > Install New Software。

(2)弹出窗口点击"add" -> 在name中随便输个名，在Location中输入"http://www.agpad.com/update"，确定。

(3)在搜到的列表中全选，finish进行安装。

二、使用Ajax请求服务端：

1.创建XmlHttp对象：

/**
 * 创建XmlHttp对象
 */
var xmlhttp;
if (window.XMLHttpRequest){// 所有新浏览器使用
    xmlhttp = new XMLHttpRequest();
}else if (window.ActiveXObject){// IE5、IE6浏览器使用
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

2.向服务器发送请求：

(1)GET请求：

//第1参数为请求方法，第2参数为url后坠，第3参数true为异步，false为同步
xmlHttp.open("GET", "/UserServlet/getUserInfo?id=1&name=yang", true);

(2)POST请求：

// 第1参数为请求方法，第2参数为url后坠，第3参数true为异步，false为同步
xmlHttp.open("POST", "/UserServlet/getUserInfo", true);
//设置响应头(post请求方式时必须要设置)，让数据以HTML表单格式提交
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

3.注册响应回调，处理服务器返回数据：

(1)说明：

xmlHttp.readyState：
0：请求未初始化
1：服务器连接已建立
2：请求已接收
3：请求处理中
4：请求已完成，且响应已就绪

xmlHttp.status：
200："OK"
404：未找到页面

xmlHttp.responseText：服务器返回的字符串

(2)注册回调：

// 注册响应回调
xmlHttp.onreadystatechange = function() {
    //不成功不处理
    if(xmlHttp.readyState != 4 || xmlHttp.status != 200){
        return;
    }

    // 解析服务器返回的json
    var json = xmlHttp.responseText;
}

4.发送请求：

(1)GET方式：

// 发送请求，get方式不带参数
xmlHttp.send();

(2)POST方式：

// 发送请求，post数据放send参数里
xmlHttp.send("id=1&name=yang");