Ajax的基本用法

一、Ajax的技术的产生
Ajax被认为是（Asynchronous JavaScript and XML的缩写）。现在，允许浏览器与服务器通信而无须刷新页面的技术都被叫做Ajax.

一个HTTP请求一般由四部分组成
1、HTTP请求的方法或动作，比如是GET还是POST请求
2、正在请求的URL
3、请求头，包含一些客户端环境信息、身份要验证信息等
4、请求体，也就是请求正文，请求正文中可以包含客户提交的查询字符串信息，表单信息等等

GET:一般用于信息获取（默认的请求方式）
使用URL传递参数
对所发送信息的数量也有限制，一般在2000个字符
POST：一般用于修改服务器上的资源
对所发送信息的数量无限制

二、Ajax 工具包
Ajax 并不是一项新技术，它实际上是几种技术，每种技术，各尽其职，并以一种全新的方式聚合在一起。
–服务端语言：服务器需要具备向浏览器发送特定信息的能力，Ajax与服务器端语言无关。
–XML(extensible Markup language，可扩展标记语言）是一种描述数据的格式。Ajax程序需要某种格式化的格式来在服务器和客户端之间传递信息，XML是其中一种选择。
–HTML(Hypertext Markup Language,超文本标记语言)和CSS(Cascading Style Sheet,层叠样式表)
–DOM(Document Object Model,文档对象模型）,实现动态显示和交互
–使用XMLHTTP组件XMLHttpRequest对象进行异步数据读取
–使用JavaScript绑定和处理所有数据
三、Ajax的不足
.Ajax不是完美的技术。使用Ajax,它的一些缺陷不得不权衡一下：
-由Javascript和Ajax引擎导致的浏览器的兼容
-页面局部刷新，导致后退等功能失效
-对流媒体的支持没有Flash,JavaApplet好
-一些手持设备（手机，平板）支持性差。
XMLHttpRequest的概述
.XMLHttpRequest最早是在IE5中以Active组件的形式实现的额，非W3C标准，
创建XMLHttpRequest对象（由于非标准，所以实现的方法不统一））
–Internet Explorer把XMLHttpRequest实现作为一个Active对象
–其他浏览器（Firefox,safari,Opera..)把他实现为一个本地的JavaScript对象。
-XMLHttpRequest在不同的浏览器上的实现是兼容的，所以可以用同样的方式访问XMLHttpRequest实例的属性和方法，而不论这个实例创建的方法是什么。
创建XMLHttpRequest对象
xhr=new XMLHttpRequest
原生js要考虑浏览器兼容性，IE6,7,以后开发一般用jquery

XMLHttpRequest的方法,属性

属性说明
readyState
表示XMLHttpRequest对象的状态：
0：未初始化。对象已创建，未调用open；
1：open方法成功调用，但Send方法未调用；
2：send方法已经调用，尚未开始接受数据；
3：正在接受数据。Http响应头信息已经接受，但尚未接收完成；
4：完成，即响应数据接受完成。
Onreadystatechange
请求状态改变的事件触发器（readyState变化时会调用这个属性上注册的javascript函数）。
responseText
服务器响应的文本内容
responseXML
服务器响应的XML内容对应的DOM对象
status
服务器返回的http状态码。200表示“成功”，404表示“未找到”，500表示“服务器内部错误”等。
statusText
服务器返回状态的文本信息。

方法说明
Open(string method,string url,boolean asynch,
String username,string password)
指定和服务器端交互的HTTP方法，URL地址，即其他请求信息；
Method:表示http请求方法，一般使用”GET”,”POST”.
url：表示请求的服务器的地址；
asynch：表示是否采用异步方法，true为异步，false为同步；
后边两个可以不指定，username和password分别表示用户名和密码，提供http认证机制需要的用户名和密码。
Send(content)
向服务器发出请求，如果采用异步方式，该方法会立即返回。
content可以指定为null表示不发送数据，其内容可以是DOM对象，输入流或字符串。
SetRequestHeader(String header,String Value)
设置HTTP请求中的指定头部header的值为value.
此方法需在open方法以后调用，一般在post方式中使用。
getAllResponseHeaders()
返回包含Http的所有响应头信息，其中相应头包括Content-length,date,uri等内容。
返回值是一个字符串，包含所有头信息，其中每个键名和键值用冒号分开，每一组键之间用CR和LF（回车加换行符）来分隔！
getResponseHeader(String header)
返回HTTP响应头中指定的键名header对应的值
Abort()
停止当前http请求。对应的XMLHttpRequest对象会复位到未初始化的状态。

发送请求
–利用XMLHttpRequest实例与服务器进行通信包含以下3个关键部分
–onreadystatechange时间处理函数
–open方法
–send方法
onreadystatechange:
–该事件处理函数由服务器触发，而不是用户
–在Ajax执行过程中，服务器会通知客户端当前的通信状态，这依靠更新XMLHttRequest对象的readyState来实现，改变readyState属性是服务器对客户端连接操作的一种方式，每次readyState属性的改变都会触发readystatechange事件。

Open(method,url,asynch)
–XMLHttpRequest对象的open方法允许程序员用一个Ajax调用向服务器发送请求
–method，请求类型，类似”GET”或”POST”的字符串，若只想从服务器检索一个文件，而不需要发送任何数据，使用GET（可以在GET请求里通话附加在URL上的查询字符串来发送数据，不过数据大小限制为2000字符),若要向服务器发送数据，则用POST.
–在某些情况，有些浏览器会把多个XMLHttpRequest请求的结果缓存在同一个URL中。如果对每个请求的响应不同，就会带来不好的结果。在此将时间戳追加到URL的最后，就能保证URL的唯一性，从而避免浏览器缓存结果。
–url，路径字符串，指向你所请求的服务器上的那个文件，可以使绝对路径或相对路径。
–asynch,表示请求是否要异步传输，默认值为true。

接收响应
用XMLHttpRequest的方法可向服务器发送请求。在Ajax处理过程中，XMLHttpRequest的如下属性可被服务器更改
–readyState
–status
–responseText
–responseXML

readyState
-readyState表示Ajax请求的当前的状态。它的值用数字代表。
0代表未初始化，还没有调用open方法
1代表正在加载，open方法已被调用，但send方法还没有被调用
2代表已经加载完毕，send已被调用，请求已经开始
3代表交互中，服务器正在发送响应
4代表完成，响应发送完毕
–每次readyState值的改变，都会触发readystatechange事件，如果把onreadystatechange事件处理函数赋给一个函数，那么每次readyState值的改变都会引发该函数的执行。
–readyState值的变化会因浏览器的不同而有所差异。但是，当请求结束的时候，每个浏览器都会把readyState的值统一设为4.

Status
–服务器发送的每一个响应也都带有首部信息。三位数的状态码是服务器发送的响应中最重要的头部信息，并且属于超文本传输协议中的一部分。
–常用状态码及其含义
404 没找到页面（not found)
403 禁止访问(forbidden)
500 内部服务器出错( internal service error)
200 一切正常(ok)
304 没有被修改(not modiffied)
在XMLHttpRequest对象中，服务器发送的状态码都保存在status属性里。通过吧这个值和200或304比较，可以确保服务器是否已发送了一个成功的响应。
responseText
–XMLHttpRequest的responseText属性包含了从服务器发送的数据。它是一个HTML,XML或普通文本，这取决于服务器发送的内容。
–当readyState属性值变成4时，ResponseText属性才可用，表明Ajax请求已经结束。
function dosomeThing(){
If(request.readyState==4){
If(request.status==200||request.status==304){
alert(response.responseText);
}
}
}

数据格式提要
在服务器端AJAX是一门与语言无关的技术。在业务逻辑层使用何种服务器端语言都可以
从服务器端接收数据的时候，那些数据必须以浏览器能够理解的格式来发送，服务器端的
编程语言只能够以如下三种格式返回数据：
–XML
–JSON
–HTML

解析HTML
HTML由一些普通文本组成。如果服务器通过XMLHttpRequest发送HTML,文本将存储在responseText属性中。
不必从responseText属性中读取数据，它已经是希望的格式，可以直接将它插入到页面中。
插入HTML代码最简单的办法是更新这个元素的innerHTML属性。
HTML小结
优点：
–从服务器端发送的HTML代码在浏览器端不需要用JavaScript进行解析
–HTML的可读性好
–HTML代码块与innerHTML属性搭配，效率高
缺点：
–若需要通过AJAX更新一篇文档的多个部分，HTML不合适
–innerHTML并非DOM标准

XML
优点:
–XML是一种通用的数据格式
–不必把数据强加到已定义好的格式中，而是要为数据自定义合适的标记
–利用DOM可以完全掌控文档
缺点：
–如果文档来自于服务器，就必须得保证文档含有正确的首部信息，若文档类型不正确，那么responseXML的值将是空的。
–当浏览器接收到长的XML文件后，DOM解析可能会很复杂。

JSON
JSON(javaScript Object Notation)一种简单的数据格式，比XML更轻巧。JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。
JSON 的规则很简单：对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“：”（冒号）：“‘名称/值’“对之间使用”，“(逗号）分隔。

解析Json
JSON只是一种文本字符串，它被存储在responseText属性中
为了读取存储在responseText属性中的JSON数据，函数eval会把一个字符串当做他的参数，然后这个字符串会被当做Javascript代码来执行，因为JSON的字符串就是由Javascript代码构成的，所以它本身是可以运行的。

JSON小结
优点：
–作为一种数据传输格式，JSON与XML很相似，但是它更加灵活
–JSON不需要从服务器端发送含有特定内容类型的首部信息
缺点：
–语法过于严谨
–代码不易读
–eval函数存在风险
ajax大多数使用json传输数据占90%