Ajax技术特点
一、Ajax的优点
（1）由服务器负担的工作转移到客户端，利用客户端闲置的资源进行处理，减轻服务器和带宽的负担，节约时间成本。
（2）无需刷新页面
（3）可以调用XML等外部数据，进一步促进页面显示和数据的分离
（4）基于标准化的并被广泛支持的技术，不需要下载插件或者小程序，即可轻松实现桌面应用程序的结果。
（5）Ajax没有平台限制。Ajax把服务器的角色由原本传输内容转变为传输数据，而数据格式则可以是纯文本格式和XML格式，这两种格式没有平台限制。
二、Ajax的缺点
（1）大量的JavaScript，不易维护
（2）可视化设计上比较困难
（3）打破“页”的概念
（4）给搜索引擎带来困难
Ajax使用的技术
（1）XMLHttpRequest 对象 （最核心技术），它是一个具有应用程序接口的JavaScript对象，能够使用超文本传输协议（HTTP）连接一个服务器。
（2）XML
在XML文当中，如果元素的文本中包括标记符，可以使用CDATA段将元素中的文本括起来，使用CDATA段括起来的内容都会被XML解析器当做普通文本，所以任何符号都不会被认为是标记符。CDATA的语法格式如下：
<![CDATA[文本内容]]>
CDATA段不能进行嵌套，即CDATA段中不能再包含CDATA段。另外，在字符串“]]>”之间不能有空格或换行符。
在XML文档中，必须有一个根元素，所有其他的元素必须嵌入到根元素中。
XML元素类型的名区分大小写
（3）JavaScript
（4）CSS
（5）DOM
Ajax需要注意的几个问题
一、安全问题
- （1）JavaScript本身的安全性
解决办法：浏览器厂商在一个sandbox（沙箱）中执行JavaScript代码，沙箱是个只能访问很少计算机资源的密闭环境，从而使Ajax应用不能读取或写入本地文件系统。虽然这会给程序开发带来困难，但是它提高了客户端JavaScript的安全性。 - （2）数据在网络上传输的安全问题
解决办法：为了保证HTTP传输数据的安全，可以对传输的数据进行加密，这样即使被看到，危险也是不大的。虽然对传输的数据进行加密，可能对服务器的性能有所降低，但对于敏感数据，以性能换取更高的安全，还是值得的。 - （3）客户端调用远程服务的安全问题
解决办法，在Ajax应用中，应该将所有的Ajax请求都发送到控制器，有控制器负责检查调用者是否有访问资源的权限。
二、性能问题
优化Ajax应用执行速度的方法。
（1）尽量使用局部变量，而不使用全局变量。
（2）优化for循环
（3）尽量少用eval，每使用eval都需要消耗大量的时间。
（4）将DOM节点附加到文档上
（5）尽量减少点“.”号操作符的使用。
解决中文乱码问题
ajax不支持多种字符集，它默认的字符集是UTF-8。
（1）PHP发送中文、Ajax接收，只需在PHP顶部添加如下语句：
header('Content-type:text/html;charset=GB2312'); //指定发送数据的编码格式
XMLHttp会正确解析其中的中文。
（2）Ajax发送中文、PHP接收这个比较复杂，Ajax中先用encodeURIComponent对要提交的中文进行编码。在PHP页添加如下代码：
$GB2312string=iconv('UTF-8','gb2312//IGNORE',$RequestAjaxString);
PHP选择MySQL数据库时，应用如下语句设置数据库的编码类型
mysql_query("set names gb2312");
初始化XMLHttpRequest对象
if(window.XMLHttpRequest){ //非ie浏览器
http_request = new XMLHttpRequest();
}else if(window.ActiveXObject){ //ie浏览器
try{
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e){
try{
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e){ }
}
}
XMLHttpRequest 对象的常用方法
1.创建新请求的方法
open()方法用于设置进行异步请求目标的URL、请求方法以及其他参数信息。具体语法如下：
open("method","URL"[,asyncFlag[,"userName"[,"password"]]])
参数说明
method：用于指定请求的类型，一般为GET或者POST
URL：用于指定请求地址，可以使用绝对地址或者相对地址，并且可以传递查询字符串
asyncFlag：为可选参数，用于指定请求方式，异步请求为true，同步请求为false，默认情况下为true
userName：为可选参数，用于指定请求用户名，没有时可省略
password：为可选参数，用于指定请求密码，没有时可省略
例如，设置异步请求目标为deal.jsp，请求方法为GET，请求方式为异步的代码如下
http_request.open("GET","deal.jsp",true)
2.向服务器发送请求的方法
send()方法用于向服务器发送请求。如果请求声明为异步，该方法将立即返回，否则将等到接收到响应为止。send()方法的语法格式如下：
send(content)
参数说明：
content：用于指定发送的数据，可以是DOM对象的实例、输入流或者字符串。如果没有参数需要传递可以设置为null。
例如，向服务器发送发送一个不包含任何参数的请求，可以使用下面的代码：
http_request.send(null);
3.设置请求的HTTP头的方法
setRequestHeader()方法用于请求的HTTP头设置值。具体语法格式如下：
setRequestHeader("header","value")
参数说明：
header：用于指定HTTP头。
value：用于为指定的HTTP头设置值。
注意：setRequestHeader()方法必须在调用open()方法之后才能调用。
例如，在发送POST请求时，需要设置Content-Type 请求头的值为“application/x-www-form-urlencoded”，这时就可以通过setRequestHeader()方法进行设置。代码如下：
http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
4.停止或放弃当前异步请求的方法
abort()方法用于停止或放弃当前异步请求。其语法格式如下：
abort()
例如，要停止当前异步可以使用下面的语句：
http_request.abort()
5.返回HTTP头信息的方法
- getResponseHeader()方法
该方法用于以字符形式返回指定的HTTP头信息。其语法格式如下：
getResponseHeader("headerLabel")
参数说明：
headerLabel：用于指定HTTP头，包括Server、Content-Type和Date等。
例如，要获取HTTP头Content-Type的值，可以使用以下代码：
http_request.getResponseHeader("Content-Type")
上面的代码将获取到以下内容：
text/html;charset=GBk
- getAllResponseHeaders()方法
该方法用于以字符串形式返回完整的HTTP头信息，其中，包括Server、Date、Content-Type和Content-Length。该方法的语法格式如下：
getAllResponseHeaders()
例如，应用下面的代码调用getAllResponseHeaders()方法，将弹出显示完整的HTTP头信息。
alert(http_request.getAllResponseHeaders());
XMLHttpRequest对象的常用属性
（1）指定状态改变时所触发的事件处理器的属性。
XMLHttpRequest对象提供了用于指定状态改变时所触发的事件处理器的属性 onreadystatechange。在Ajax中，每个状态改变时都会触发这个事件处理器，通常会调用一个JavaScript函数。
例如，通过下面的代码可以实现当指定状态改变时所要触发的JavaScript函数，这里为getResult()。
http_request.onreadystatechange = getResult;
注意：
在指定所触发的事件处理器时，所调用的JavaScript函数不能添加小括号及指定参数名。不过这里可以使用匿名函数。例如，要调用带参数的函数getResult()，可以使用下面的代码：
http_resquest.onreadystatechange = function(){
getResult('"添加的参数")； //调用带参数的函数
} //通过匿名函数指定要带参数的函数
2、获取请求状态的属性
XMLHttpRequest 对象提供了用于获取请求状态的属性 readyState，该属性共包括5个属性值
0 未初始化
1 正在加载
2 已加载
3 交互中
4 完成
在实际应用中，该属性经常用于判断请求状态，当请求状态等于4，也就是完成时，再判断请求是否成功，如果成功将开始处理返回
3.获取服务器的字符串响应的属性
XMLHttpRequest 对象提供了用于获取服务器响应的属性 responseText，表示为字符串。
例如，获取服务器返回的字符串响应，并赋值给变量h可以用下面的代码：
var h = http_request.reponseText;
4.获取服务器的XML响应的属性
XMLHttpRequest 对象提供了用于获取服务器响应的属性 reponseXML，表示为XML。这个对象可以解析为一个DOM对象。
例如，获取服务器返回的XML响应，并赋值给变量xmldoc可以使用下面的代码：
var xmldoc = http_request.reponseXML;
5.返回服务器的HTTP状态码的属性
XMLHttpRequest 对象提供了用于返回服务器的HTTP状态码的属性status。该属性的语法格式如下：
http_request.status
参数说明：
http_request：XMLHttpRequest 对象
返回值：长整型的数值，代表服务器的HTTP状态码。常用的状态码如下：
100 继续发送请求
200 请求已成功
202 请求被接受，但尚未成功
400 错误的请求
404 文件未找到
408 请求超时
500 内部服务器错误
501 服务器不支持当前请求所需要的某个功能
注意：status 属性只能在 send()方法返回成功时才有效。
该属性常用于当请求状态为完成时，判断当前的服务器状态是否成功。
例如：当请求完成时，判断请求是否成功的代码如下：
if( http_request.readyState == 4 ){ //请求状态为完成时
if( http_request.status == 200 ){ //请求成功，开始处理返回结果
alert("请求成功！");
}else{ //请求未成功
alert("请求失败！");
}
}
