加载中...
AJAX
发表于:2011-08-02 | 分类: web前端 HTML CSS JS
字数统计: 1.7k | 阅读时长: 6分钟 | 阅读量:

 

AJAX

AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。 AJAX全称为“Asynchronoous JavaScript and XML” AJAX = 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。 传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。 有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图、开心网等等。 如名字所示,AJAX的概念中最重要而最易被忽视的是它也是一种JavaScript编程语言。JavaScript是一种粘合剂使AJAX应用的各部分集成在一起。在大部分时间,JavaScript通常被服务端开发人员认为是一种企业级应用不需要使用的东西应该尽力避免。这种观点来自以前编写JavaScript代码的经历:繁杂而又易出错的语言。类似的,它也被认为将应用逻辑任意地散布在服务端和客户端中,这使得问题很难被发现而且代码很难重用。在AJAX中JavaScript主要被用来传递用户界面上的数据到服务端并返回结果。XMLHttpRequest对象用来响应通过HTTP传递的数据,一旦数据返回到客户端就可以立刻使用DOM将数据放到网面上。

XMLHttpRequest对象

Ajax的核心就是XMLHttpRequest对象。

XMLHttpRequest对象的属性

readyState

表示XMLHttpRequest对象的当前状态,可取值为0-4,共5个状态。

  • 0 :”未初始化”状态;此时,已经创建一个XMLHttpRequest对象,但是还没有初始化。
  • 1 :”发送”状态;此时,代码已经调用了XMLHttpRequest open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。
  • 2 :”发送”状态;此时,已经通过send()方法把一个请求发送到服务器端,但是还没有收到一个响应。
  • 3 :”正在接收”状态;此时,已经接收到HTTP响应头部信息,但是消息体部分还没有完全接收结束。
  • 4 :”已加载”状态;此时,响应已经被完全接收。

onreadystatechange

当readyState属性变化的时候会调用的函数。

responseText

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

responseXML

XML响应;Content-Type头部指定MIME(媒体)类型为text/xml,application/xml或以+xml结尾。如果Content-Type头部并不包含这些媒体类型之一,那么responseXML的值为null。

status

HTTP状态代码。仅当readyState值为3(正在接收中)或4(已加载)时,该属性才可用。当readyState的值小于3时试图存取status的值将引发一个异常。

statusText

HTTP状态的文本;并且仅当readyState值为3或4才可用。当readyState为其它值时试图存取statusText属性将引发一个异常。

XMLHttpRequest对象的方法

abort()

取消当前请求。把XMLHttpRequest对象复位到未初始化状态。

open()

open(method,url,async,username,password) 方法初始化一个XMLHttpRequest对象。 method参数是必须提供的-用于指定你想用来发送请求的HTTP方法 (GET,POST,PUT,DELETE或HEAD)。 url参数用于指定XMLHttpRequest对象把请求发送到的服务器相应的URL。 async参数为布尔值,指定请求是否异步,默认值为true,即异步。 该方法把XMLHttpRequest对象的readyState属性设置为1。

setRequestHeader()

setRequestHeader(header,value) 设置请求的头部信息。必须在调用open()方法后调用这个方法(当readyState值为1时)。

send()

send([content]) 把请求发送到服务器。 content函数可选,是要发送到服务器的内容,通常在POST方法的时候使用。 该方法把XMLHttpRequest对象的readyState属性的值设置为2。

getResponseHeader()

getResponseHeader(header,value)方法用于检索响应的头部值。仅当readyState值是3或4

getAllResponseHeaders()

该getAllResponseHeaders()方法以一个字符串形式返回所有的响应头部。

Ajax请求参数,get与post

使用Ajax向服务器发送请求参数就可以向服务器“索取”不同的信息了,同一般的表格提交一样,用Ajax提交请求同样有GET与POST之分。

使用GET方法

使用GET方法想服务器传递参数的方法比较直接,就是将构建好的请求字符串添加到url后面。例如下面的示意代码:

var name = document.getElementById(‘username’).value;
var gender = document.getElementById(‘gender’).value;
url = ‘process.php’;
query = ‘?name=’ + name + ‘&gender=’ + gender;
url+=query;

最后构成的字符串形如:process.php?name=xxx&gender=yyy。

POST方法

使用POST方法提交的时候,url不需要改变,而请求的参数要作为send的参数。

var name = document.getElementById(‘username’).value;
var gender = document.getElementById(‘gender’).value;
query = ‘name=’ + name + ‘&gender=’ + gender;
//……构建XMLHttpRequest请求的代码……
request.send(query);

除了差一个问好之外query字符串就没有什么其它的区别了。

ajax里xmlHttp.open()方法post与get的区别

POST:用”POST”方式发送数据,可以大到4MB,在接收页面使用Request.Form[“…”]获取 GET:用”GET”方式发送数据,只能256KB,在接收页面使用Request.QueryString[“…”]获取 /////////////////////////////////////////////////////////////////////////////////////////////////////////// 一般情况下,使用Ajax提交的参数多是些简单的字符串,可以直接使用GET方法将要提交的参数写到open方法的url参数中,此时send方法的参数为null。 例如 : var url = “login.jsp?user=XXX&pwd=XXX”; xmlHttp.open(“GET”,url,true); xmlHttp.send(null); 此外,也可以使用send方法传递参数。使用send方法传递参数使用的是POST方法,需要设定Content-Type头信息,模拟HTTP POST方法发送一个表单,这样服务器才会知道如何处理上传的内容。参数的提交格式和GET方法中url的写法一样。设置头信息前必须先调用open方法。 例如: xmlHttp.open(“POST”,”login.jsp”,true); xmlHttp.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded;charset=UTF-8”); xmlHttp.send(“user=”+username+”&pwd=”+password); 需要注意的是根据提交方式的不同,两种提交方式分别调用后台的doGet方法和doPost方法。

上一篇:
电子数据是否会放坏
下一篇:
堆栈深度
本文目录
本文目录