Ajax技术

Ajax技术特点 一、Ajax的优点
(1)由服务器负担的工作转移到客户端,利用客户端闲置的资源进行处理,减轻服务器和带宽的负担,节约时间成本。
(2)无需刷新页面
(3)可以调用XML等外部数据,进一步促进页面显示和数据的分离
(4)基于标准化的并被广泛支持的技术,不需要下载插件或者小程序,即可轻松实现桌面应用程序的结果。
(5)Ajax没有平台限制。Ajax把服务器的角色由原本传输内容转变为传输数据,而数据格式则可以是纯文本格式和XML格式,这两种格式没有平台限制。
二、Ajax的缺点
(1)大量的JavaScript,不易维护
(2)可视化设计上比较困难
(3)打破“页”的概念
(4)给搜索引擎带来困难
Ajax使用的技术 【Ajax技术】(1)XMLHttpRequest 对象 (最核心技术),它是一个具有应用程序接口的JavaScript对象,能够使用超文本传输协议(HTTP)连接一个服务器。
(2)XML
在XML文当中,如果元素的文本中包括标记符,可以使用CDATA段将元素中的文本括起来,使用CDATA段括起来的内容都会被XML解析器当做普通文本,所以任何符号都不会被认为是标记符。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("请求失败!"); } }

    推荐阅读