ajax 第二阶段项目实例

发布时间：2020-12-16 02:00:26 所属栏目：百科来源：网络整理

导读：项目实例： function mode(input,ul){ $(function(){ //载入时隐藏下拉li $(ul).hide(0); }); //Ajax 动态获取关键字 $(function(){ //监听文本框输入变化 $(input).bind('input propertychange',function(){//解决iphone端的事件触发问题 //创建ajax对象函

项目实例：

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 请求：

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：

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 属性。 
 
  
   
    属性 
    描述 
   
   
    responseText 
    获得字符串形式的响应数据。 
   
   
    responseXML 
    获得 XML 形式的响应数据。 
   
  
 
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
 未初始化 
   The object has been created but not initialized. (Theopenmethod has not been called.)
 （xmlHttpRequest）对象已经创建，但尚未初始化（还没有调用open方法）。 
   
   
   (1) LOADING
 载入 
   The object has been created,but thesendmethod has not been called.
 （xmlHttpRequest）对象已经创建，但尚未调用send方法。 
   
   
   (2) LOADED
 载入完成 
   Thesendmethod has been called,but the status and headers are not yet available.
 已经调用send方法，（HTTP响应）状态及头部还不可用。 
   
   
   (3) INTERACTIVE
 交互 
   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属性获取部分结果将会产生错误，因为状态和响应头部还不完全可用。 
   
   
   (4) COMPLETED
 完成 
   All the data has been received,and the complete data is available in theresponseBodyandresponseTextproperties.
 已经接收到了全部数据，并且在responseBody和responseText属性中可以提取到完整的数据。 
   
  
 
 根据以上几本书中的关于readyState五种状态的介绍，我认为还是《Pragmatic ajaxA Web 2.0 Primer 》比较到位，因为它提到了对接收到的数据的解析问题，其他书中都没有提到这一点，而这一点正是“(3)交互”阶段作为一个必要的转换过程存在于“(2)载入完成”到“(4)完成”之间的理由，也就是其任务是什么。归结起来，我觉得比较理想的解释方法应该以“状态：任务（目标）+过程+表现（或特征）”表达模式来对这几个状态进行定义比较准确，而且让人容易理解。现试总结如下： 
 
  
   
    readyState 状态
  
    状态说明
  
   
   
    (0)未初始化
  
    此阶段确认xmlHttpRequest对象是否创建，并为调用open()方法进行未初始化作好准备。值为0表示对象已经存在，否则浏览器会报错－－对象不存在。
  
   
   
    (1)载入
  
    此阶段对xmlHttpRequest对象进行初始化，即调用open()方法，根据参数(method,true)完成对象状态的设置。并调用send()方法开始向服务端发送请求。值为1表示正在向服务端发送请求。
  
   
   
    (2)载入完成
  
    此阶段接收服务器端的响应数据。但获得的还只是服务端响应的原始数据，并不能直接在客户端使用。值为2表示已经接收完全部响应数据。并为下一阶段对数据解析作好准备。
  
   
   
    (3)交互
  
    此阶段解析接收到的服务器端响应数据。即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody、responseText或responsexml属性存取的格式，为在客户端调用作好准备。状态3表示正在解析数据。
  
   
   
    (4)完成
  
    此阶段确认全部数据都已经解析为客户端可用的格式，解析已经完成。值为4表示数据解析完毕，可以通过xmlHttpRequest对象的相应属性取得数据。
  
   
  
 
 概而括之，整个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的核心部分有一个真正简单明了的理解。
                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!