java ajax实现异步同步请求全面详解

XMLHttpRequest对象 var request=new XMLHttpRequest()

//兼容IE5 IE6

if (window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}

else

{// 老版本的 IE6, IE5 使用 ActiveX 对象

xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);

}

var request=new XMLHttpRequest() //创建对象

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

//做一些事情

request.responseText

}



success(data, textStatus, jqXHR)

data:处理后的数据, textStatus:描述状态的字符串,jqXHR（在jQuery 1.4.x的中，XMLHttpRequest） 对象

data:$(“#表单名”).serializeArray() serializeArray() 方法通过序列化表单值来创建对象数组（名称和值）。

onreadystatechange 是一个事件句柄。它的值 (state_Change) 是一个函数的名称，

当 XMLHttpRequest 对象的状态发生改变时，会触发此函数。状态从 0 (uninitialized)

到 4 (complete) 进行变化。仅在状态为 4 时，我们才执行代码。

为什么使用 Async=true ？

我们的实例在 open() 的第三个参数中使用了 “true”。

该参数规定请求是否异步处理。

True 表示脚本会在 send() 方法之后继续执行，而不等待来自服务器的响应。

onreadystatechange 事件使代码复杂化了。但是这是在没有得到服务器响应的情况下，防止代码停止的最安全的方法。

通过把该参数设置为 “false”，可以省去额外的 onreadystatechange 代码。如果在请求失败时是否执行其余的代码无关紧要，那么可以使用这个参数。

onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

open(method,url,async) eg:open(“get”,”ygc.com”,true) send();

method：请求的类型；GET 或 POST

url：文件在服务器上的位置

async：true（异步）或 false（同步）

send(string)

string：仅用于 POST 请求

responseText:获得字符串形式的响应数据

responseXML:获得XML形式的响应数据

status和statusText:以数字和文本形式返回HTTP状态码 200 OK 404未找到页面

getAllResponseHeader():获取所有的响应报头

readyState属性

0:请求未初始化，open还没有调用

1:服务器连接已建立

2:请求已接收,也就是接收到头信息了

3:请求处理中,也就是接收到响应主体了

4:请求已完成,且响应已就绪,也就是响应完成了

jQuery.ajax([settings])

type:类型 post或get 默认为 get

url:发送请求的地址

data:是一个对象，连同请求发送到服务器的数据

dataType:预期服务器返回的数据类型。如果不指定将自动根据HTTP包MIME信息

success:是一个方法,请求成功后的回调函数。传入返回后的数据，以及包含成功代码的字符串

error:是一个方法,请求失败时调用此函数。传入XMLHttpRequest对象

eg:

<script>
document.getElementById("search").onclick = function() {
var request = new XMLHttpRequest();
request.open("GET", "ygc.php?number=" + document.getElementById("keyword").value);
request.send();
request.onreadystatechange = function() {
if (request.readyState===4) {
if (request.status===200) {
document.getElementById("searchResult").innerHTML = request.responseText;
} else {
alert("发生错误：" + request.status);
}
}
}
}

document.getElementById("save").onclick = function() {
var request = new XMLHttpRequest();
request.open("POST", "ygc.php");
var data = "name=" + document.getElementById("staffName").value
+ "&number=" + document.getElementById("staffNumber").value
+ "&sex=" + document.getElementById("staffSex").value
+ "&job=" + document.getElementById("staffJob").value;
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send(data);
request.onreadystatechange = function() {
if (request.readyState===4) {
if (request.status===200) {
document.getElementById("createResult").innerHTML = request.responseText;
} else {
alert("发生错误：" + request.status);
}
}
}
}
</script>