当前位置:编程学习 > XML/UML >>

Java乔晓松-ajax开发框架和XMLhttpRequest、responseText、responseXml和JSON的应用

AJAX开发框架
AJAX实质上也是遵循Request/Server模式,所以这个框架基本的流程是:
对象初始化
发送请求
服务器接收
服务器返回
客户端接收
修改客户端页面内容。
只不过这个过程是异步的。
A  初始化XMLHttpRequest对象
function   createXmlHttpRequest(){
   var xmlHttp;
   try{    //Firefox, Opera 8.0+, Safari
           xmlHttp=new XMLHttpRequest();
    }catch (e){
           try{    //Internet Explorer
                  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
            }catch (e){
                  try{
                          xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                  }catch (e){} 
           }
    }
   return xmlHttp;
B、 指定响应处理函数
指定当服务器返回信息时客户端的处理方式。只要将相应的处理函数名称赋给XMLHttpRequest对象的onreadystatechange属性就可以了.比如:
        XMLHttpReq.onreadystatechange = processResponse;
注意:这个函数名称不加括号,不指定参数。也可以用Javascript函数直接量方式定义响应函数。比如:
       XMLHttpReq.onreadystatechange = function() { };
// 处理返回信息的函数
function   processResponse() {
 
}
C、发出HTTP请求
向服务器发出HTTP请求了。这一步调用XMLHttpRequest对象的open和send方法。
     http_request.open('GET', 'http://www.example.org/some.file', true);
     http_request.send(null)
按照顺序,open调用完毕之后要调用send方法。send的参数如果是以Post方式发出的话,可以是任何想传给服务器的内容。
注意:如果要传文件或者Post内容给服务器,必须先调用setRequestHeader方法,修改MIME类别。如下:
http_request.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);
    这时资料则以查询字符串的形式列出,作为send的参数,例如:
    name=value&anothername=othervalue&so=on
 
代码
//发送请求
function sendRequest(){
//获取文本框的值
var chatMsg=input.value;
var url="chatServlet.do?charMsg="+chatMsg;
//建立对服务器的调用
XMLHttpReq.open("POST",url,true);
//设置MiME类别,如果用 POST 请求向服务器发送数据,
//需要将"Content-type" 的首部设置为 "application/x-www-form-urlencoded".
//它会告知服务器正在发送数据,并且数据已经符合URL编码了。
XMLHttpReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//状态改变的事件触发器,客户端的状态改变会触发readystatechange事件,
//onreadystatechange会调用相应的事件处理函数
XMLHttpReq.onreadystatechange=processResponse;
//发送数据
XMLHttpReq.send(null);
}
//发送请求
function sendRequest(){
//获取文本框的值
var chatMsg=input.value;
var url="chatServlet.do?charMsg="+chatMsg;
//建立对服务器的调用
XMLHttpReq.open("POST",url,true);
//设置MiME类别,如果用 POST 请求向服务器发送数据,
//需要将"Content-type" 的首部设置为 "application/x-www-form-urlencoded".
//它会告知服务器正在发送数据,并且数据已经符合URL编码了。
XMLHttpReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//状态改变的事件触发器,客户端的状态改变会触发readystatechange事件,
//onreadystatechange会调用相应的事件处理函数
XMLHttpReq.onreadystatechange=processResponse;
//发送数据
XMLHttpReq.send(null);
}
处理响应处理函数都应该做什么。
  首先,它要检查XMLHttpRequest对象的readyState值,判断请求目前的状态。参照前文的属性表可以知道,readyState值为4的时候,代表服务器已经传回所有的信息,可以开始处理信息并更新页面内容了。如下:
if (http_request.readyState == 4) {
    // 信息已经返回,可以开始处理
} else {
    // 信息还没有返回,等待
}
  服务器返回信息后,还需要判断返回的HTTP状态码,确定返回的页面没有错误。所有的状态码都可以在W3C的官方网站上查到。其中,200代表页面正常。
if (http_request.status == 200) {
      // 页面正常,可以开始处理信息
} else {
    // 页面有问题
}
D、处理服务器返回的信息
XMLHttpRequest对成功返回的信息有两种处理方式:
responseText:将传回的信息当字符串使用;
responseXML:将传回的信息当XML文档使用,可以用DOM处理。
代码
//处理返回信息的函数
function processResponse(){
   if(XMLHttpReq.readyState==4){ //判断对象状态 4代表完成
           if(XMLHttpReq.status==200){ //信息已经成功返回,开始处理信息
                  document.getElementById("chatArea").value=XMLHttpReq.responseText;
          }
   }
      }
数据格式提要
在服务器端 AJAX 是一门与语言无关的技术。在业务逻辑层使用何种服务器端语言都可以。
从服务器端接收数据的时候,那些数据必须以浏览器能够理解的格式来发送。服务器端的编程语言只能以如下 3 种格式返回数据:
XML
JSON
HTML
XML
优点:
XML 是一种通用的数据格式。
不必把数据强加到已定义好的格式中,而是要为数据自定义合适的标记。
利用 DOM 可以完全掌控文档。
缺点:
如果文档来自于服务器,就必须得保证文档含有正确的首部信息。若文档类型不正确,那么 responseXML 的值将是空的。
当浏览器接收到长的 XML 文件后, DOM 解析可能会很复杂
JSON
JSON(JavaScript Object  Notation)一种简单的数据格式,比xml更轻巧。JSON是JavaScript原生格式,这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。
JSON的规则很简单:对象是一个无序的“‘名称/值’对”集合。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值’对”之间使用“,”(逗号)分隔。
   规则如下:
       1)映射用冒号(“:”)表示。名称:值
       2)并列的数据之间用逗号(“,”)分隔。名称1:值1,名称2:值2
       3) 映射的集合(对象)用大括号(“{}”)表示。{名称1:值1,名称2:值2}
       4) 并列数据的集合(数组)用方括号(“[]”)表示。
         [
           {名称1:值,名称2:值2},
           {名称1:值,名称2:值2}
         ]
      5  元素值可具有的类型:string, number, object, array, true, false, null
JSON 示例
补充:Web开发 , 其他 ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,