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

来源:互联网 发布:linux python27 pyqt5 编辑:程序博客网 时间:2024/06/06 00:10

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>