PHP假期复习（五）---AJAX

来源：互联网发布：石头纸知乎编辑：程序博客网时间：2024/04/25 08:45

                                               AJAX
AJAX所包含的技术：
AJAX（Asynchronous JavaScript And XML）涉及到7项技术，其中Javascript、XMLHttpRequest、Dom、XML是最为重要；
XMLHttpRequest对象：
XMLHttpRequest是XMLHTTP组件的对象，通过这个对象，AJAX可以像桌面应用程序一样只同服务器进行数据交换，却不用每次都刷新界面，也不用每次将数据处理的工作都交给服务器来做；这样既可减轻服务器负担又加快了响应速度、缩短了用户等待时间。
IE5.0开始，开发人员可以在Web页面内部使用XMLHTTPActiveX组件扩展自身的功能，不用从当前Web页面导航就可以直接传输数据到服务器或者从服务器接收数据。Mozilla1.0以及NetScape7则是创建继承XML代理类XMLHttpRequest；对应大多数情况，XMLHttpRequest对象和XMLHTTP组件很相似，方法和属性类似，只是部分属性不同；
IE和非IE实例化XMLHttpRequestrian对象：
<script language=“javascript”>
       var xmlHttp = false;
       if (window.ActiveXObject) {
                             xmlHttp=newActiveXObject("Microsoft.XMLHTTP");
            }
            else if (window.XMLHttpRequest) {
                xmlHttp = new XMLHttpRequest();
            }
</script>
  XMLHttpRequest对象的方法：
Abort（）   停止当前请求；
             getAllResponseHeaders（）作为字符串完整的返回headers；
      getResponseheader(“hederLabel”) 作为字符串返回单个的header标签；
     Open(“method”,“URL”[,asyncFlag[,”userName”[,”password”]]]) 设置                                         未决的请求的目标URL方法和其他参数；
        open的第一个参数是HTTP请求的方法，GET、Post或者Head
  open的第二个参数是目标URL。基于安全考虑，这个URL只能是同网域的，否则会提示“没有权限”的错误。这个URL可以是任何的URL，包括需要服务器解释执行的页面，而不仅仅是静态页面。目标URL处理XMLHttpRequest请求跟处理普通的HTTP请求一样，比如JSP可以用request.getParameter(“”)或者request.getAttribute(“”)来取得URL参数值。
open的第三个参数只是指定在等待服务器返回信息时，是否继续执行下面的代码。如果为true，则不会，直到服务器返回信息，默认为true；
Send(content)   发送请求；
setRequestHeader(“label”,”value”)   设置header并和请求一起发送；
     跟form一样，如果要传文件或者Post内容给服务器，必须先调用   setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);
这时，资料则以查询字符串的形式列出，作为send的参数，例如：name=value&so=on；

XMLHttpRequest对象属性：
onreadystatechange 状态改变的事件触发器；
readyState     对象状态(integer):0=未初始化，1=读取中，2=已读取，3=交互中，4=完成；
responseText    服务器进程返回数据的文本；
responseXML   服务器进程返回数据的兼容DOM的XML文档对象；
status           服务器返回的状态码，如404=“文件未找到”、200=“成功”
statusText       服务器返回的状态文本信息；
AJAX开发步骤：
1. 创建AJAX对象 ——— XMLHttpRequest；
var xmlhttp = false;
if(window.ActiveXObject){
xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);
}else if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else{
alert(“您的浏览器不支持AJAX!”);
return false;
}
2. 使用请求时状态改变的事件触发器 ———— onreadystatechange
     Xmlhttp.onreadystatechange = function( ){
     //数据成功接收并返回时
if(xmlhttp.readystate==4){
  if(xmlhttp.state==200 ){
var info = xmlhttp.responseText;
}
}else{
//没有成功返回数据时
var errinfo = stateText；
return false；
}
}
3. 组装请求 ———— open（）；
   xmlhttp.open(“get”,”xxx.html”,true);
4. 发送请求 ————send（）；
xmlhttp.open(null);
发送过后就可以触发状态改变事件，在把整个过程用作某个事件发生时，最后返回对应的responseText或者stateText；

1 0