所谓AJAX就是指:页面在不刷新,不跳转的情况下,利用XMLHttpRequest对象像服务器发送HTTP请求.也就是JS的网络化.

早些年是通过HTTP发送204<例:header('http/1.1 204 No-Content');>,ifram框架,src加载等方法也达到页面在不刷新,不跳转的情况下向服务器请求.

AJAX的核心就是 XMLHttpRequest对象 ,一个专门发送HTTP请求工具.

 

如何使用XMLHttpRequest对象做AJAX请求?

要解答这个这个问题要先分析以下三点.

分析一 :  XMLHttpRequest是个对象 ,那么如何创建这个对象?

             答:  按标准,new XMLHttpRequest() 即可得到对象.

                   但在低版本的IE中,需要用  new ActiveXObject(Mircrosoft.XMLHTTP) 得到对象.

分析二 :  如何发送HTTP请求?

            答:  var xhr = new XMLHttpRequest();

                  要发送HTTP请求,首先要建立连接.用open方法建立

                  xhr.open('get','./1.php',true);  // 参数1   请求的方式(常用的GET/POST)   参数2 请求路径   参数3 true是异步模式  false是同步模式

                  xhr.send(null);  //发送HTTP请求 .如果是GET请求,参数传NULL即可,如果是POST,里面传一个josn参数 如:{name:'lijian',age='23'}

分析三 : 返回结果如何得到?

            答: xhr.responseText

                 服务器接收到的响应内容(不包括头部),也就是请求的那个页面输出的内容

                 如果请求状态小于3,则responseText就是个空字符串,如果是3,则返回目前

                 接收到的内容,当4时保存完整的响应内容

                 xhr.responseXML

                 响应内容解析为XML并作为document对象返回

 

XMLHttpRequest对象的属性 

 1  readyState                            HTTP请求的状态,从0-4. 4代表完成

                                                XMLHttpRequest对象被实例后  readyState  = 0

                                                当open建立连接 readyState  = 1

                                                返回完header头信息后  readyState  = 2

                                                接收完 主体信息  readyState  = 3

                                                连接关闭,完成请求  readyState  = 4

 

 2  onreadystatechange              这是个事件属性(如同onclick,onmouseover等),当HTTP请求的状态(state)发生改变时,它会自动触发.

                                                例子:  xhr.onreadystatechange = function(){

                                                              if(xhr.readyState == 4){

                                                                      alert( xhr.responseText);

                                                               }

                                                        }

                                                 注: 每当请求的状态发生改变就触发onreadystatechange事件.当HTTP请求结束(值等于4)后.返回结果.

3  state                                      HTTP请求完成后,返回的状态码.

4  statusText                              状态代码对应的文字说明

 

XMLHttpRequest对象的方法

open()                                       初始化请求参数

send()                                       发送请求

abort()                                       取消当前响应,当请求时间太长,而且请求不再必要的时候,这个方法会将XMLHttpRequest对象重置为readyState为0的状态

getResponseHeader()                  HTTP请求完成后,取得指定头信息.例: xhr.getResponseHeader('content-type')  返回头信息content-type的值(内容的类型).

getAllResponseHeaders()              取得全部头信息. xhr.getAllResponseHeaders();

setResponseHeader()                   发送HTTP请求前(send()方法之前),设置请求的头部信息.

 

AJAX返回值的类型

注: AJAX返回值的基本类型只有2种.text类型,xml类型.还有两种html类型,json类型 是text类型衍生出来的.

text类型 纯文本.应用场景: 一般返回较短,具有标志的字符串,如,0/1, succ/fail, 已注册,未注册等.

例子:

 

 

输出:

 

XML类型

例子:

 

 

 

1.php的内容

 

 

 输出:

 

 

JSON格式(应用场景: 返回数组或对象等格式化数据)

1.php的内容

<script type="text/javascript">

     var xhr = new XMLHttpRequest();

     xhr.open('get','./1.php');

     xhr.send(null);

     xhr.onreadystatechange = function(){

        if(xhr.readyState == 4){

            var json = xhr.responseText;  //实质传来的还是text格式.只是内容上和json格式一样.通过json来转成真正的json对象

            var json = eval('('+json+')');

            console.log(json);

        }

     }  

</script>

输出:

 

AJAX上传

从原理上讲AJAX是无法上传文件的. 从HTTP协议的角度讲,上传文件.则需要把文件的内容上传给服务器.既然要上传给服务器那么XMLHttpRequest对象就要

获得文件的内容.但出于安全考虑JS是无法读取文件内容.所以AJAX上传从原理上讲是无法实现的.

但是网上一些AJAX上传插件是怎么实现上传的呢?

1 . 用 iframe 实现伪AJAX

2 . 用flash实现. 如swfupload

3.  用HTML5 .HTML5已经添加了文件读取API,使AJAX上传有了可能.

 

利用 iframe 实现"AJAX"上传

HTML文件

1  2  3  4     
       5      6  7 25 26      
27      
      
       28          档案 : 
       
       
29          
       
       
30      
      
31      32 33 

PHP文件

1 
      ';10         $str .= 'var msg = window.parent.document.getElementById("msg");';11         $str .= 'msg.appendChild(document.createTextNode("上传成功"));';12         $str .= '';13         echo $str;14      }15    }16     17 ?>

 

前瞻 :　HTML5的 FormData (表单数据对象)

前言 :　还记得XMLHttpRequest对象发送请求的send方法吗?

当GET请求时,参数都会直接写在URL中.所以send方法只传了一个NULL.  如: xhr.send(null);

但是POST请求中.参数就必须要写进send方法里了.如xhr.send('name=lijian&age=23') 或者用JSON格式  xhr.send({name:'lijian',age:23})

这样拼接参数略显麻烦. 此时用HTML5的 FormData 就可以省去麻烦.

 

简介 : FormData是表单数据对象.这是HTML5新增的API,它能以表单对象(form元素的节点对象)为参数,自动把表单数据打包.

当然AJAX发送数据时只要传入ForData对象就行了,它会自动发送表单各个数据.

例子:

HTML文件

1  2  3  4     
       5      6  7 27 28      
      
       29          姓名 : 
       30                 
       
       
31          年龄 : 
       32                 
       
       
 33          
       34      
      
35 36 

PHP文件

1 
     

输出:

 

如果没有form表单,能不能传数据进去呢?

可以的, FormData有个append方法可以传入数据.

例子

1  var formData = new FormData();2      formData.append('say','hello');3      formData.append('play','game');

 

前瞻 :　HTML5的 FILES (文件对象)

files对象能获得上传文件的对象.文件对象里包含着文件相关信息.

     
     
              上传文件 
              
      
        
           
     

输出:

上面输出的是文件列表对象.而第0个单元 .则是文件对象.

var input = document.getElementsByTagName('input')[0].files[0];

输出:

这个就是文件对象了.里面包含了很多有用的信息.

 

获得了文件对象.就可以将文件对象传到FormData对象里,用AJAX进行上传.这就是之前提到的"用HTML5 .HTML5已经添加了文件读取API,使AJAX上传有了可能.".

例子:

HTML

1  2  3  4     
       5      6  7 30 31      
      
       32         上传文件 
       33         
       
34         
       35      
      
36 37 

PHP

 输出:

 

前瞻: 带进度条的AJAX上传

HTML5中XMLHttpRequest对长传过程还添加了一个上传过程事件onprogress.

想要上传时有进度条必须要有两个基本的信息.

1   文件总大小

2   当前上传的大小

在onprogress事件中,就可以得到这两个信息.

具体思路 ,上传过程中不断onprogress事件函数,获取当前上传大小/文件总大小,更新页面的进度条.

 

下面看一下onprogress事件.如何写.

1 var xhr = new XMLHttpRequest();2 xhr.upload.onprogress = function (ev) {3    console.log(ev); //打印下这个对象.4 }

 

 

上面说到 onprogress事件可以获得文件的相关信息.比如文件大小.当前上传的大小 等等.那如何得到这些信息?

答: 通过事件对象.事件对象是系统自动传的.下面看下如何得到事件对象.

var xhr = new XMLHttpRequest();xhr.upload.onprogress = function (ev) {   console.log(ev); //ev就是事件对象.是系统自动传入.我们只管调用就行.}

输出: 可以看到事件对象里的信息很多.暂时只看红线部分.这两个参数就是 "loaded 当前上传的大小"  和 total 文件总大小.

 

下面看下 AJAX上传进度条 具体是如何实现的?

PHP文件

 

1 
     

 

HTML文件

1  2  3  4     
       5      6  7 47 60 61      
      
       62         上传文件 
       63         
       
64         
       65      
      
66      
      
       67        
       
68        
       0%69      
      
70 71 

 

输出: