一,GET 请求
以下为异步方式
1,创建请求对象
//兼容 ie 5,6 写法
if(window.XMLHttpRequest) {
var xhr = new XMLHttpRequest();
} else {
var xhr = ActiveXObject("Microsoft.XMLHTTP");
}
2,监听 xhr 对象的请求状态,并对获取到的后天数据进行处理
readystate:xhr请求对象的 请求状态
* readystate的值(number类型)
* 1:请求建立连接(没有执行 send())
* 2:请求已发送,正在处理
* 3:请求已经处理, 并且已经得到部分数据
* 4:请求已经完成, 并且已经获取到所有数据
xhr.onreadystatechange = function(){
if (xhr.readyState == 4) {
//判断请求是否成功
if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
//请求成功,json 数据解析 xhr.responseText 为后台传入的json字符串
var arr = JSON.parse(xhr.responseText);
}else{
console.log("请求失败");
}
}
}
3,设置请求方式,启动请求 get 方式 将数据 以 key=value&key=value 形式在 url 后加?拼接在?之后
xhr.open("GET","AJAX.php?username=" + userN.value + "&userpass=" + userP.value);
4,发送请求
xhr.send(null);//null可省略
二,POST请求
第一,第二步与GET 方式一致
3,设置请求方式和网址 网址可写 绝对/相对 路径
xhr.open("POST", "AJAX.php");
4,设置请求头 请求头内 书写方式 参考 : AJAX请求头Content-type
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=utf-8");
5,发起请求 send 方法 内参数 以 key = value&key = value形式书写
xhr.send("username=" + userN.value + "&userpass=" + userP.value);