项目实例：
function mode(input,ul){
$(function(){
//载入时隐藏下拉li
$(ul).hide(0);
});
//Ajax 动态获取关键字
$(function(){
//监听文本框输入变化
$(input).bind('input propertychange',function(){//解决iphone端的事件触发问题
//创建ajax对象函数
function createLink(){
if(window.ActiveXObject){
var newRequest = new ActiveXObject("Microsoft.XMLHTTP");
}else{
var newRequest = new XMLHttpRequest();
}
return newRequest;
}
//如果文本框为空，不发送请求
if($(input).val().length==0){
$(ul).hide(0);
return;
}
//发送请求
http_request = createLink();//创建一个ajax对象
if(http_request){
var sid = $(input).val();
var url = "getdata.PHP?flag=1";
var data = "keywords="+sid;
//alert(data)
http_request.open("post",url,true);
http_request.setRequestHeader("content-type","application/x-www-form-urlencoded");
//指定一个函数来处理从服务器返回的结果
http_request.onreadystatechange = dealresult; //此函数不要括号
//发送请求
http_request.send(data);
}
//处理返回结果
function dealresult(){
if(http_request.readyState==4){
//等于200表示成功
//alert("aa");
if(http_request.status==200){
if(http_request.responseText=="no"){
$(ul).hide(0);
return;
}
$(ul).show(0);//alert(http_request.responseText);
var res = eval("("+http_request.responseText+")");
//alert(http_request.responseText);
var contents="";
for(var i=0;i<res.length;i++){
var keywords = res[i].keywords;
//alert(skey);
contents=contents+"<li class='suggest_li"+(i+1)+"'>"+keywords+"</li>";
}
//alert(contents);
$(ul).html(contents);
//$("#suggest_ulk").empty();
//$("#suggest_ulk").append(contents);
}
}
}
});
//鼠标
$(function(){
//按下按键后300毫秒显示下拉提示
$(input).keyup(function(){/*$("#suggest_form").submit();*/
setInterval(changehover,300);
function changehover(){
$(ul).delegate('li','hover',function(){
$(this).css("background","#eee");},function(){ $(this).css("background","#D2E9FF");
});
$(ul+" li").click(function(){
$(input).val($(this).html());
var length=$(input).val().length;
$(input).prop('size',length*2);
});
$(ul+" li").click(function(e){
e.stopPropagation();
$(this).parent().fadeOut(0);
});
}
});
});
});
}
W3C：教程实例
if (window.XMLHttpRequest)//如果支持ajax
所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
{// code for IE7+,Firefox,Chrome,Opera,Safari支持
xmlhttp=new XMLHttpRequest();
}
else
老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
{// code for IE6,IE5//支持xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/ajax/gethint.asp?q="+str,true);
xmlhttp.send();
向服务器发送请求
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
GET 还是 POST？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
注释：当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可：
因为： 当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数
服务器响应
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
| 属性 | 描述 |
|---|---|
| 获得字符串形式的响应数据。@H_870_404@ | |
| responseXML@H_870_404@ | 获得 XML 形式的响应数据。@H_870_404@ |
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
ajax for jquery 项目实例：
$(".top ul li:nth-child(4)").delegate('span','click',function(){//事件委托
var FOrderNumber=$(this).parent().parent().prev("h4").text().substring(5);
/*var Rmark=$(this).parent().parent().find("h4").next().find("li").find(input).val();
// var Remark="\'"+$(this).parent().nextAll("dd").eq(7).find("input").val()+"\'";*/
if($(this).text()=="完成"){
var FRemark=$(this).prev().val();
$(this).text("修改");
$(this).prev().attr('disabled','disabled');
$.ajax({
url:"modorder.PHP",
Type:'POST',
dataType:'text',
data:{"FOrderNumber":FOrderNumber,"FRemark":FRemark,"type":4},
success:function(data){
if(data){
alert(data);
}
}
})
}else if($(this).text()=="修改"){
$(this).text("完成");
$(this).prev().removeAttr('disabled');
}
})
//简单，方便，兼容性好
readyStae状态的介绍：
0 －（未初始化）还没有调用send()方法
1 －（载入）已调用send()方法，正在发送请求
2 －（载入完成）send()方法执行完成，已经接收到全部响应内容
3 －（交互）正在解析响应内容
4 －（完成）响应内容解析完成，可以在客户端调用了
对于readyState的这五种状态，其他书中大都语焉不详。像《Foundations of ajax》中，只在书中的表2-2简单地列举了状态的“名称”－－The state of the request. The five possible values are 0 = uninitialized,1 = loading,2 = loaded,3 = interactive,and 4 = complete。而《ajaxin Action》中好像根本就没有提到这5种状态的细节。《Professional ajax》中虽不尽人意，但还是有可取之处：
There are five possible values for readyState:
0 (Uninitialized): The object has been created but the open() method hasn’t beencalled.
1 (Loading): The open() method has been called but the request hasn’t been sent.
2 (Loaded): The request has been sent.
3 (Interactive). A partial response has been received.
4 (Complete): All data has been received and the connection has been closed.
readyState有五种可能的值：
0 (未初始化)： (xmlHttpRequest)对象已经创建，但还没有调用open()方法。
1 (载入)：已经调用open() 方法，但尚未发送请求。
2 (载入完成)： 请求已经发送完成。
3 (交互)：可以接收到部分响应数据。
4 (完成)：已经接收到了全部数据，并且连接已经关闭。
在《Understanding ajax: Using JavaScript to Create Rich Internet Applications》中，则用下表进行了说明：
| readyState Status Code |
Status of thexmlHttpRequestObject |
|---|---|
| (0) UNINITIALIZED 未初始化@H_870_404@ | The object has been created but not initialized. (Theopenmethod has not been called.) （xmlHttpRequest）对象已经创建，但尚未初始化（还没有调用open方法）。@H_870_404@ |
| (1) LOADING 载入@H_870_404@ | The object has been created,but thesendmethod has not been called. （xmlHttpRequest）对象已经创建，但尚未调用send方法。@H_870_404@ |
| (2) LOADED 载入完成@H_870_404@ | Thesendmethod has been called,but the status and headers are not yet available. 已经调用send方法，（HTTP响应）状态及头部还不可用。@H_870_404@ |
| (3) INTERACTIVE 交互@H_870_404@ | Some data has been received. Calling theresponseBodyandresponseTextproperties at this state to obtain partial results will return an error,because status and response headers are not fully available. 已经接收部分数据。但若在此时调用responseBody和responseText属性获取部分结果将会产生错误，因为状态和响应头部还不完全可用。@H_870_404@ |
| (4) COMPLETED 完成@H_870_404@ | All the data has been received,and the complete data is available in theresponseBodyandresponseTextproperties. 已经接收到了全部数据，并且在responseBody和responseText属性中可以提取到完整的数据。@H_870_404@ |
根据以上几本书中的关于readyState五种状态的介绍，我认为还是《Pragmatic ajaxA Web 2.0 Primer 》比较到位，因为它提到了对接收到的数据的解析问题，其他书中都没有提到这一点，而这一点正是“(3)交互”阶段作为一个必要的转换过程存在于“(2)载入完成”到“(4)完成”之间的理由，也就是其任务是什么。归结起来，我觉得比较理想的解释方法应该以“状态：任务（目标）+过程+表现（或特征）”表达模式来对这几个状态进行定义比较准确，而且让人容易理解。现试总结如下：
| readyState 状态 |
状态说明 |
|---|---|
| (0)未初始化 @H_870_404@ | 此阶段确认xmlHttpRequest对象是否创建，并为调用open()方法进行未初始化作好准备。值为0表示对象已经存在，否则浏览器会报错－－对象不存在。 @H_870_404@ |
| (1)载入 @H_870_404@ | 此阶段对xmlHttpRequest对象进行初始化，即调用open()方法，根据参数(method,true)完成对象状态的设置。并调用send()方法开始向服务端发送请求。值为1表示正在向服务端发送请求。 @H_870_404@ |
| (2)载入完成 @H_870_404@ | 此阶段接收服务器端的响应数据。但获得的还只是服务端响应的原始数据，并不能直接在客户端使用。值为2表示已经接收完全部响应数据。并为下一阶段对数据解析作好准备。 @H_870_404@ |
| (3)交互 @H_870_404@ | 此阶段解析接收到的服务器端响应数据。即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody、responseText或responsexml属性存取的格式，为在客户端调用作好准备。状态3表示正在解析数据。 @H_870_404@ |
| (4)完成 @H_870_404@ | 此阶段确认全部数据都已经解析为客户端可用的格式，解析已经完成。值为4表示数据解析完毕，可以通过xmlHttpRequest对象的相应属性取得数据。 @H_870_404@ |
概而括之，整个xmlHttpRequest对象的生命周期应该包含如下阶段：
创建－初始化请求－发送请求－接收数据－解析数据－完成
在具体应用中，明确了readyState的五个状态（xmlHttpRequest对象的生命周期各个阶段）的含义，就可以消除对ajax核心的神秘感（语焉不详的背后要么是故弄玄虚，制造神秘感；要么就是“以其昏昏，使人昭昭”），迅速把握其实质，对减少学习中的挫折感和增强自信心都极其有益。
比如，通过如下示例：
//声明数组 var states ＝ [“正在初始化……”,“正在初始化请求……成功！ 正在发送请求……”,“成功！ 正在接收数据……”,“完成！ 正在解析数据……”,“完成！ ”]; //回调函数内部代码片段 if (xmlHttp.readyState==4) { var span = document.createElement(“span”); span.innerHTML = states[xmlHttp.readyState]; document.body.appendChild(span); if (xmlHttp.status == 200) { var xmldoc = xmlHttp.responsexml; //其他代码 } //别忘记销毁，防止内存泄漏 xmlHttp = null; }else{ var span = document.createElement(“span”); span.innerHTML = states[xmlHttp.readyState]; document.body.appendChild(span); }
结果如下：
正在初始化请求……成功！
正在发送请求……成功！
正在接收数据……完成！
正在解析数据……完成！
我们很容易明白xmlHttpRequest对象在各个阶段都在做什么。因此，也就很容易对ajax的核心部分有一个真正简单明了的理解。
原文链接：https://www.f2er.com/ajax/163396.html