ajax专题

ajax简介：

　　ajax = 异步 JavaScript 和 XML。
　　ajax是一种在无需从新加载整个网页的状况下，可以更新部分网页的技术。咱们知道，传统的网页（不使用ajax）若是须要更新内容，必须从新加载整个网页。Ajax的出现，使得使网能够实现异步更新，这意味着能够在不从新加载整个网页的状况下，对网页的某部分进行更新。

工做原理：

　　ajax技术的核心或者说负责ajax进行同步或者异步服务器请求是XMLHttpRequest对象。在用使用ajax技术时，其实就是操做XMLHttpRequest进行相应的业务。

关于XMLHttpRequest对象：

建立XMLHttpRequest对象：

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

　　经过一行简单的 JavaScript 代码，咱们就能够建立 XMLHttpRequest 对象。

建立 XMLHttpRequest 对象的语法：

xml =new XMLHttpRequest();

XMLHttpRequest对象的属性和方法

属性

　　readyState属性

　　当XMLHttpRequest对象把一个HTTP请求发送到服务器时将经历若干种状态：一直等待直到请求被处理；而后，它才接收一个响应。这样以来，脚本才正确响应各类状态-XMLHttpRequest对象暴露一个描述对象的当前状态的readyState属性，如表格1所示。

　　表格1.XMLHttpRequest对象的ReadyState属性值列表。

ReadyState取值	描述
0	描述一种"未初始化"状态；此时，已经建立一个XMLHttpRequest对象，可是尚未初始化。
1	描述一种"发送"状态；此时，代码已经调用了XMLHttpRequest open()方法而且XMLHttpRequest已经准备好把一个请求发送到服务器。
2	描述一种"发送"状态；此时，已经经过send()方法把一个请求发送到服务器端，可是尚未收到一个响应。
3	描述一种"正在接收"状态；此时，已经接收到HTTP响应头部信息，可是消息体部分尚未彻底接收结束。
4	描述一种"已加载"状态；此时，响应已经被彻底接收。

　　responseText属性

　　这个responseText属性包含客户端接收到的HTTP响应的文本内容。当readyState值为0、1或2时，responseText包含一个空字符串。当readyState值为3(正在接收)时，响应中包含客户端还未完成的响应信息。当readyState为4(已加载)时，该responseText包含完整的响应信息。

　　responseXML属性

　　此responseXML属性用于当接收到完整的HTTP响应时(readyState为4)描述XML响应；此时，Content-Type头部指定MIME(媒体)类型为text/xml，application/xml或以+xml结尾。若是Content-Type头部并不包含这些媒体类型之一，那么responseXML的值为null。不管什么时候，只要readyState值不为4，那么该responseXML的值也为null。

　　其实，这个responseXML属性值是一个文档接口类型的对象，用来描述被分析的文档。若是文档不能被分析(例如，若是文档不是良构的或不支持文档相应的字符编码)，那么responseXML的值将为null。

　　status属性

　　这个status属性描述了HTTP状态代码，并且其类型为short。并且，仅当readyState值为3(正在接收中)或4(已加载)时，这个status属性才可用。当readyState的值小于3时试图存取status的值将引起一个异常。

　　statusText属性

　　这个statusText属性描述了HTTP状态代码文本；而且仅当readyState值为3或4才可用。当readyState为其它值时试图存取statusText属性将引起一个异常。

方法（用于初始化和处理HTTP请求）

　　abort()方法

　　你可使用这个abort()方法来暂停与一个XMLHttpRequest对象相联系的HTTP请求，从而把该对象复位到未初始化状态。

　　open()方法

　　你须要调用open(DOMString method，DOMString uri，boolean async，DOMString username，DOMString password)方法初始化一个XMLHttpRequest对象。其中，method参数是必须提供的-用于指定你想用来发送请求的HTTP方法(GET，POST，PUT，DELETE或HEAD)。为了把数据发送到服务器，应该使用POST方法；为了从服务器端检索数据，应该使用GET方法。另外，uri参数用于指定XMLHttpRequest对象把请求发送到的服务器相应的URI。借助于window.document.baseURI属性，该uri被解析为一个绝对的URI-换句话说，你可使用相对的URI-它将使用与浏览器解析相对的URI同样的方式被解析。async参数指定是否请求是异步的-缺省值为true。为了发送一个同步请求，须要把这个参数设置为false。对于要求认证的服务器，你能够提供可选的用户名和口令参数。在调用open()方法后，XMLHttpRequest对象把它的readyState属性设置为1(打开)而且把responseText、responseXML、status和statusText属性复位到它们的初始值。另外，它还复位请求头部。注意，若是你调用open()方法而且此时readyState为4，则XMLHttpRequest对象将复位这些值。

　　send()方法

　　在经过调用open()方法准备好一个请求以后，你须要把该请求发送到服务器。仅当readyState值为1时，你才能够调用send()方法；不然的话，XMLHttpRequest对象将引起一个异常。该请求被使用提供给open()方法的参数发送到服务器。当async参数为true时，send()方法当即返回，从而容许其它客户端脚本处理继续。在调用send()方法后，XMLHttpRequest对象把readyState的值设置为2(发送)。当服务器响应时，在接收消息体以前，若是存在任何消息体的话，XMLHttpRequest对象将把readyState设置为3(正在接收中)。当请求完成加载时，它把readyState设置为4(已加载)。对于一个HEAD类型的请求，它将在把readyState值设置为3后再当即把它设置为4。

　　send()方法使用一个可选的参数-该参数能够包含可变类型的数据。典型地，你使用它并经过POST方法把数据发送到服务器。另外，你能够显式地使用null参数调用send()方法，这与不用参数调用它同样。对于大多数其它的数据类型，在调用send()方法以前，应该使用setRequestHeader()方法(见后面的解释)先设置Content-Type头部。若是在send(data)方法中的data参数的类型为DOMString，那么，数据将被编码为UTF-8。若是数据是Document类型，那么将使用由data.xmlEncoding指定的编码串行化该数据。

　　setRequestHeader()方法

　　该setRequestHeader(DOMString header，DOMString value)方法用来设置请求的头部信息。当readyState值为1时，你能够在调用open()方法后调用这个方法；不然，你将获得一个异常。

　　getResponseHeader()方法

　　getResponseHeader(DOMString header，value)方法用于检索响应的头部值。仅当readyState值是3或4(换句话说，在响应头部可用之后)时，才能够调用这个方法；不然，该方法返回一个空字符串。

　　getAllResponseHeaders()方法

　　该getAllResponseHeaders()方法以一个字符串形式返回全部的响应头部（每个头部占单独的一行）。若是readyState的值不是3或4，则该方法返回null。

 

AJAX的用法

　　

function to_store(){
    $.ajax({
                        type: "post",
                        url : "${basePath}user/updateDetails",
                        data: "field="+field+"&content="+content+"&username="+username,
                        success: function(i){
                            if (i==1){
                                contentElement.text(content);
                            }else{
                                alert("修改失败");
                                contentElement.text(oldContent);
                                
                            }

                        }
                        
                    }); 

}

上述是最基本的用法，post请求进入这个url的路径，携带着data里面的几个参数，对返回结果进行判断！

固然，ajax里面不可能只有这几个参数，其他的参数在这就不说了，感兴趣的同窗能够本身研究下！

ajax中还存在同步和异步的问题，固然自己默认是异步的，所谓同步：能够理解成单线程工做，一旦写成同步，那么用户都必须等这个请求完成以后才能进行其余的操做！ 

　　 async：false即变成同步

ajax提交表单

众所周知，form表单提交会影响整个页面刷新，可是若是即提交了表单，又可让页面不刷新，而刷新页面的一部分，因此，咱们的前辈想出了一个绝妙的主意，那就是利用ajax来提交表单，来达到这一举双得的目标。具体事例以下：

不带文件流的提交数据

我的认为利用ajax提交表单须要注意两点：1，将须要提交的表单附上ID，2:，提交的表单上不须要再写action的路径了

 function login() {
            $.ajax({
            //几个参数须要注意一下
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "/users/login" ,//url
                data: $('#form1').serialize(),
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    if (result.resultCode == 200) {
                        alert("SUCCESS");
                    }
                    ;
                },
                error : function() {
                    alert("异常！");
                }
            });
        }

带文件流的提交数据

function login() {
                var data=new FormData($( "#addForm" )[0]);
            $.ajax({
            //几个参数须要注意一下
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "/users/add" ,//url
                cache: false,    //上传文件不需缓存
                processData: false, //需设置为false。由于data值是FormData对象，不须要对数据作处理
                contentType: false, //需设置为false。由于是FormData对象，且已经声明了属性enctype="multipart/form-data"
                data: data,
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    if (result.resultCode == 200) {
                        alert("SUCCESS");
                    }
                    ;
                },
                error : function() {
                    alert("异常！");
                }
            });
        }       

 

其实ajax传表单数据还有一种写法，可是这里就不演示了，若感兴趣的朋友能够自行上网查查，欢迎与我讨论！！！