Ajax技术原理随笔

1.1Ajax简介
AJAX 即Asynchronous JavaScript and XML (异步的JavaScript 和 XML)。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX是与服务器交换数据并更新部分网页的技术，在不重新加载整个页面的情况下。
1.2Ajax所包含的技术
大家都知道ajax并非一种新的技术，而是几种原有技术的结合体。它由下列技术组合而成。
1.使用CSS和HTML来表示。
2.使用DOM模型来交互和动态显示。
3.使用XMLHttpRequest来和服务器进行异步通信。
4.使用javascript来绑定和调用/。
AJAX 的核心是 XMLHttpRequest 对象
不同的浏览器创建XMLHttpRequest对象的方法是由差异的。
IE浏览器使用ActiveXObject,而其他的浏览器使用名为XMLHttpRequest的JavaScript内建对象
1.3Ajax的工作原理
Ajax的工作原理相当于在用户和服务器之间加了一个中间层（AJAX引擎），使用户操作与服务响应异步化。并不是所有的用户都提交给服务器。像一些数据验证和数据处理等都交给Ajax引擎自己来做，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
传统WEB应用模型
客户端浏览器
------------------>HTTP请求HTTP（s）传输
-------------->web服务器
-------------->数据存储和逻辑处理
-------------->web服务器
-------------->HTTP(s)传输
-------------->HTML+CSS数据
-------------->客户端浏览器
Ajax Web应用模型
客户端浏览器
用户接口
-----javaScript调用-------->
AJAX引擎
-----HTTP请求---------->
HTTP（s）传输
---------------------->
Web/XML服务器
--------------------->
数据存储和逻辑处理
--------------------->
Web/XML服器
-------------------->
HTTP(S)传输
------------------>
XML数据
----------------->
AJAX引擎
----HTML+CSS数据----------->
用户接口（页面1）
浏览器传统的交互方式
用户<客户端浏览器>------浏览器发出请求------>
请求消息————————>
------服务器处理------->
__服务器端处理结果>
浏览器接收结果（页面2）
———浏览器发出请求—————>
---------------请求信息------------------>
服务器处理
--------服务器处理结果------------>
浏览器接收结果（页面3）
.。。。。。
。
浏览器的Ajax交互方式
用户（页面1）
------JavaScript代码发出请求-------->
客户端浏览器（XMLHTTPRequest）
------------请求信息---------------->
服务器处理1
用户（页面1）
------JavaScript代码发出请求2-------->
客户端浏览器（XMLHTTPRequest）
------------请求信息2---------------->
---------服务器端处理结果1-------->
服务器处理2
—>
客户端浏览器（XMLHTTPRequest）
--------->
用户（页面1JavaScript）接收请求结果1的响应
---------服务器处理的请求结果2---------->
客户端浏览器（XMLHTTPRequest）
---------------->
用户接收（接收服务端响应结果2 Javascript）
。。
。。。
再创建Web站点时，在客户端执行屏幕更新为用户提供了很大的灵活性。
eg:
动态更新购物车的物品总数，无需用户单机Update并等待服务器重新发送整个页面。
提升站点的性能，这是通过减少从服务器下载的数量而实现的。例如，Amazon的 购物车页面，当更新篮子中的一项物品的数量时，会重新载入整个页面，这必须下载32K的数据。如果使用Ajax计算机新的总量，服务器只会返回新的总量值，因此所需的宽带仅为原来的百分之一。
消除了每次用户输入时的页面刷新。例如，在Ajax中，如果用户在分页列表上单击Next,则服务器数据只刷新列表而不是整个页面。
直接编辑表格数据，而不是要求用户导航到新页面来编辑数据。对于Ajax，当用户单击Edit时，可以将静态表格刷新为内容可编辑的表格。用户单机Done之后，就可以发出一个Ajax请求来更新服务器，并刷新表格，使其包含静态，只读数据。
服务器接收浏览器端传来的用户操作，然后再把用户的操作分发到其他浏览器端。
浏览器端用户接收由服务器分发下来的用户动作，并进行相应的处理。
1.4XMLHttpRequest对象的三个常用属性
1.onreadystatechange属性
onreadystatechange 属性存有处理服务器响应的函数。
下面的代码定义一个空的函数，可同时对onreadystatechange属性进行设置：
1.xmlHttp.onreadystatechange = function(){

//我们需要在这写一些代码
}
2。readyState属性
readyState 属性存有服务器响应的状态信息。每当readyState改变时，onreadystatechange 函数就会被执行。
readyState 属性可能的值：
0 请求未初始化（在调用open之前）
1 请求已提出（调用send之前）
2 请求已发送（这里通常可以响应得到类容头部）
3 请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）
4 请求以完成（可以访问服务器并使用它）
我们要向这个onreadystatechange函数添加一条If语句，来测试我们的响应是否已经完成（意味着可获得数据）：
1.xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4){
//从服务器的response获得数据

}

}
3。responseText属性
可以通过responseText属性来取回由服务器返回的数据。
在我们的代码中，我们将把时间文本框的值设置为等于responseText:
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState = =4){
document.myForm.time.value= xmlHttp.responseText;

}

}
其他属性如下：
onreadystatechangge 状态改变的事件触发器，每个状态改变时都会这个事件处理器，通常会调用一个JavaScript函数
readyState 请求状态。有5个可取值：0 =未初始化，1=正在加载，2=以加载，3=交互中，4=完成
responseText 服务器的响应，返回数据的文本。
responseXML 服务器的响应，返回数据的兼容DOM的XML文档对象，这个对象可以解析为一个DOM对象。
responseBody 服务器返回的主题（非文本格式）
responseStream 服务器返回的数据流
status 服务器的HTTP状态码（如：404=“文件未找到“，200=”成功”，等等 ）
statusText服务器返回的状态文本信息，HTTP状态码的相应文本（OK或Not Found(未找到）等等）
1.5xmlhttprequest的方法
1.open()方法
open()有三个参数。第一个参数定义发送请求所使用的方法，第二个参数规定服务器端脚本的URL，第三个参数规定应当对请求进行异步地处理。
xmlHttp.open(“GET”,“test.php”,true);
2.send()方法
send()方法将将请求送往服务器。如果我们假设HTML文件和PHP文件位于相同的目录：
xmlHttp.send(null)
其他方法如下：
abort() 停止当前请求
getAllResponseHeaders() 把HTTP请求的所有响应首部作为键/值对返回
getResponseHeader(“header”)返回指定首部的串值
open(“method”,“URL”,[asyncFlg],[“sername”],[“password”]
建立对服务器的调用。method参数可以是GET,POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数，是否异步，用户名 ，密码
send(content) 向服务器发送请求
setRequestHeader(“header”,“value”)把指定首部设置为所提供的值。在设置任何首部之前必须调用open().设置header并和请求一起发送（‘post’方法一定要）