龙吟浅笑

导航

ajax实现

      AJAX是为了实现异步通信,提高用户体验度。JavaScript本身并不具有向服务器发送请求的功能(不使用NodeJs),要么使用window.open()方法重新打开一个页面向服务器发送请求,要么使用XMLHttpRequest对象发送请求。不同的是前者是普通的同步交互模式,而后者是异步交互方式。

      XMLHttpRequest提供了一系列的属性和方法,来向服务器发送异步的http请求;在服务器处理用户请求的过程中,XMLHttpRequest通过属性的状态值来反应http请求所处的状态,并根据这些状态来指示JavaScript做出相应的处理。当服务器顺利完成响应用户行为的动作,并将响应数据返回时,XMLHttpRequest提供了response系列的方法,将响应数据以文本、XML DOcument对象等方式组装起来,以供给JavaScript处理。

属性

说明

readyState

表示XMLHttpRequest对象的状态:0:未初始化。对象已创建,未调用open

1open方法成功调用,但Sendf方法未调用;

2send方法已经调用,尚未开始接受数据;

3:正在接受数据。Http响应头信息已经接受,但尚未接收完成;

4:完成,即响应数据接受完成。

Onreadystatechange

请求状态改变的事件触发器(readyState变化时会调用这个属性上注册的javascript函数)。

responseText

服务器响应的文本内容

responseXML

服务器响应的XML内容对应的DOM对象

Status

服务器返回的http状态码。200表示“成功”,404表示“未找到”,500表示“服务器内部错误”等。

statusText

服务器返回状态的文本信息。

方法

说明

Open(string method,string url,boolean asynch,

String username,string password)

指定和服务器端交互的HTTP方法,URL地址,即其他请求信息;

Method:表示http请求方法,一般使用"GET","POST".

url:表示请求的服务器的地址;

asynch:表示是否采用异步方法,true为异步,false为同步;

后边两个可以不指定,usernamepassword分别表示用户名和密码,提供http认证机制需要的用户名和密码。

Send(content)

向服务器发出请求,如果采用异步方式,该方法会立即返回。

content可以指定为null表示不发送数据,其内容可以是DOM对象,输入流或字符串。

SetRequestHeader(String header,String Value)

设置HTTP请求中的指定头部header的值为value.

此方法需在open方法以后调用,一般在post方式中使用。

getAllResponseHeaders()

返回包含Http的所有响应头信息,其中相应头包括Content-length,date,uri等内容。

返回值是一个字符串,包含所有头信息,其中每个键名和键值用冒号分开,每一组键之间用CRLF(回车加换行符)来分隔!

getResponseHeader(String header)

返回HTTP响应头中指定的键名header对应的值

Abort()

停止当前http请求。对应的XMLHttpRequest对象会复位到未初始化的状态。

知道了XMLHttpRequest的属性和方法就看看怎么使用它吧
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax的使用</title>
</head>
<body>
    <div>
        <label>请输入员工编号</label> <input type="text" id="number"></input>
        <button id="search" value="查询"></button>
        <div id="searchResult"></div>
    </div>
    <div>
        <label>请输入员工姓名</label> <input type="text" id="staffName"></input><br>
        <label>请输入员工编号</label> <input type="text" id="staffNumber"></input><br>
        <label>请输入员工年龄</label> <input type="text" id="staffAge"></input><br>
        <label>请输入员工职位</label> <input type="text" id="staffJob"></input><br>
        <button id="save" value="保存"></button>
        <br>
        <div id="saveResult"></div>
    </div>
    <script type="text/javascript" src="../../lib/jquery.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
       $("#search").bind("click",function(){
           var request=new XMLHttpRequest();
           request.open("GET","url?number="+$("#number").val());
           request.send();
           request.onreadystatechange=function(){
               if(request.readyState===4 && request.status===200){
                   $("#searchResult").html(request.responseText);
               }else{
                   console.log("响应出错");
               }
           }
           
       })
      $("#save").bind("click",function(){
           var request=new XMLHttpRequest();
           request.open("POST",url);
           request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
           var data="name="+$("#staffName").val()+"&number="+$("#staffNumber").val()
                     +"&age="+$("#staffAge").val()+"&job="+$("#staffJob").val();
           request.send(data);
           request.onreadystatechange=function(){
               if(request.readyState===4 && request.status===200){
                   $("#saveResult").html(request.responseText);
               }else{
                   console.log("响应出错");
               }  
           }
           
       })
  })
  
  
  
  
  
  
  </script>

</body>
</html>

以上代码是使用XMLHttpRequest对象实现异步通信,实现了GET和POST的2种请求方式,尤其要注意POST的方式里要加上request.setRequestHeader()。有了JQuery以后,异步通信就简单许多,Jquery里有一个专门的.ajax()的方法实现异步通信。对以上的代码中的GET进行改造,如下:

 $(document).ready(function(){
           $("#search").bind("click",function(){
               $.ajax({
                   type:"GET",
                   url:url,
                   data:{number:$("#number").val()},
                   dataType:"json",
                   success:function(data){
                       if(data.success){
                           $("#searchResult").html(data.msg);
                       }
                   }
                   error:function(jQxhr){
                       console.log("响应出错");
                   }
               })
           })
           
       })

比较一下,是不是简化了许多?YES




posted on 2016-01-06 10:14  龙吟浅笑  阅读(151)  评论(0编辑  收藏  举报