XMLHttpRequest和 FormData实现Ajax

#创建 XMLHttpRequest 对象

所有现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象。

通过一行简单的 JavaScript 代码，我们就可以创建 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法：

xmlhttp = new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

  
  

   
   兼容所有浏览器的创建XMLHttpRequest 对象的代码：
   
   
var xmlhttp;
if (window.XMLHttpRequest) {
    // code for IE7+,Firefox,Chrome,Opera,Safari
    xmlhttp = new XMLHttpRequest();
} else {
    // code for IE6,IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
   
   
  
  

    
    

     
     

    
    
    
    

     
     #XMLHttpRequest对象有多个属性和方法，还有一个事件句柄。
     
     

     
     
 
      

        XMLHttpRequest 
       对象属性和方法 
      
 
      
 
       
 
        
属性
 
        
说明
 
       
 
       
 
        
readyState
 
        
HTTP 请求的状态。当一个 XMLHttpRequest 初次创建时，这个属性的值从 0 开始，直到接收到完整的 HTTP 响应，这个值增加到 4。
 
         
 
          
 
           
 
            
取值
 
            
描述
 
           
 
           
 
            
 
             
 
              0 
             
 
            
描述一种"未初始化"状态；此时，已经创建一个XMLHttpRequest对象，但是还没有初始化。
 
           
 
           
 
            
 
             
 
              1 
             
 
            
描述一种"发送"状态；此时，代码已经调用了XMLHttpRequest open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。
 
           
 
           
 
            
 
             
 
              2 
             
 
            
描述一种"发送"状态；此时，已经通过send()方法把一个请求发送到服务器端，但是还没有收到一个响应。
 
           
 
           
 
            
 
             
 
              3 
             
 
            
描述一种"正在接收"状态；此时，已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收结束。
 
           
 
           
 
            
 
             
 
              4 
             
 
            
描述一种"已加载"状态；此时，响应已经被完全接收。
 
           
 
          
 
         
 
       
 
       
 
        
responseText
 
        
从服务器接收到的数据（不包括头部）（解析为一个字符串）。
 
       
 
       
 
        
responseXML
 
        
从服务器接收到的数据（不包括头部）（解析为 XML 并作为 Document 对象返回）。
 
       
 
       
 
        
status
 
        
由服务器返回的 HTTP 状态代码。如 200 表示成功，404 表示 "Not Found" 错误。
 
       
 
       
 
        
statusText
 
        
这个属性用名称而不是数字指定了请求的 HTTP 的状态代码。也就是说，当状态为 200 的时候它是 "OK"，当状态为 404 的时候它是 "Not Found"。
 
       
 
       
 
        
事件句柄
 
        
onreadystatechange 
        
每次 readyState 属性改变的时候调用的事件句柄函数。
 
       
 
       
 
        
方法
 
        
abort() 
        
取消当前响应，关闭连接并且结束任何未完成的网络活动。
 
       
 
       
 
        
getAllResponseHeaders()
 
        
把 HTTP 响应头部（所有头部）作为一个字符串返回。
 
       
 
       
 
        
getResponseHeader()
 
        
返回指定的 HTTP 响应头部的值，其参数是要返回的 HTTP 响应头部的名称。可以使用任何大小写来制定这个头部名字，和响应头部的比较是不区分大小写的。
 
       
 
       
 
        
open()
 
        
初始化 HTTP 请求参数，例如 URL 和 HTTP 方法，但是并不发送请求。
open(method,url,async,username,password)
 
         
 
          
method 参数是用于请求的 HTTP 方法。值包括 GET、POST 、HEAD、PUT、DELETE。
 
          
url 参数是请求的主体。大多数浏览器实施了一个同源安全策略，并且要求这个 URL 与包含脚本的文本具有相同的主机名和端口。
 
          
async 参数指示请求使用应该异步地执行。如果这个参数是 false，请求是同步的，后续对 send() 的调用将阻塞，直到响应完全接收。如果这个参数是 true 或省略，请求是异步的，且通常需要一个 onreadystatechange 事件句柄。
 
          
username 和 password 参数是可选的，为 url 所需的授权提供认证资格。如果指定了，它们会覆盖 url 自己指定的任何资格。
 
         
 
       
 
       
 
        
send()
 
        
发送 HTTP 请求，使用传递给 open() 方法的参数，以及传递给该方法的可选请求体。
send(body)
 
         
 
          
如果通过调用 open() 指定的 HTTP 方法是 POST 或 PUT，body 参数指定了请求体，作为一个字符串或者Document 对象。
 
          
如果请求体不是必须的话，这个参数就为 null。对于任何其他方法，这个参数是不可用的，应该为 null（有些实现不允许省略该参数）。
 
         
 
         
 
          在XHR 2之中，send方法可以发送许多类型的数据。 
         
 
         
 
          
 
           
void send();
 
           
void send(ArrayBuffer data);
 
           
void send(Blob data);
 
           
void send(Document data);
 
           
void send(DOMString data);
 
           
void send(FormData data);
 
          
 
          
 
           Blob类型可以用来发送二进制数据，这使得通过Ajax上传文件成为可能。 
          
 
         
 
       
 
       
 
        
setRequestHeader()
 
        
向一个打开但未发送的请求设置或添加一个 HTTP 请求。
setRequestHeader(name,value)
 
         
 
          
name 参数是要设置的头部的名称。这个参数不应该包括空白、冒号或换行。
 
          
value 参数是头部的值。这个参数不应该包括换行。
 
         
 
       
 
      
 
     
     
     

    
    
    
    

     
     XMLHttpRequest对象用于从JavaScript发出HTTP请求
    
    
    
    

     
     典型用法： 
    
    
    
    

     
     
     
     
// 新建一个XMLHttpRequest实例对象
var xhr = new XMLHttpRequest();
// 指定通信过程中状态改变时的回调函数
xhr.onreadystatechange = function() {
    // 通信成功时，状态值为4
    var completed = 4;
    if (xhr.readyState === completed) {
        if (xhr.status === 200) {
            // 处理服务器发送过来的数据
        } else {
            // 处理错误
        }
    }
};
// open方式用于指定HTTP动词、请求的网址、是否异步
xhr.open('GET','__MODULE__/Xhr/index',true);
// 发送HTTP请求
xhr.send(null)
     
     
在Thinkphp框架下的示例：

    
    
    
    

     
     IndexController.class.php
     
     

     
     
<?php 
namespace HomeController;
use ThinkController;
class IndexController extends Controller {
    public function index() {
        $this - >display();
    }
}
    
    
    
    

     
     

       View/Index/index.html 
      
 
      
<!DOCTYPE html>
<html>
 <head> 
  <title>Xml_Http_request</title> 
  <meta http-equiv="Content-Type" content="text/html;charset=utf8" /> 
 </head> 
 <body>
   Xml_Http_request测试页面
 </body>
</html>
<script>
// 新建一个XMLHttpRequest实例对象
var xhr = new XMLHttpRequest();
// 指定通信过程中状态改变时的回调函数
xhr.onreadystatechange = function() {
    var completed = 4; // 通信成功时，状态值为4
    if (xhr.readyState === completed) {
        // 处理服务器发送过来的数据
        if (xhr.status === 200) {
            alert(xhr.responseText);
        }
        // 处理错误
        else {
            alert(xhr.statusText);
        }
    }
};
// open方式用于指定HTTP动词、请求的网址、是否异步
xhr.open('GET',true);
// 发送HTTP请求
xhr.send(null); 
</script>
 
     
    
    

new FormData(optional HTMLFormelement form)