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传表单数据还有一种写法,但是这里就不演示了,若感兴趣的朋友可以自行上网查查,欢迎与我讨论!!!