ajax初步搭建及示例代码

来源：互联网发布：守望先锋左上角数据编辑：程序博客网时间：2024/04/30 17:04

AJAX(Asynchronous JavaScript and XML):基于XML的异步JavaScript，简称AJAX,是多种技术的综合.
   一种客户端技术 ,为互联网用户提供更加友善的交互界面,更加流畅的用户体验.也就是所谓的胖客户端,使网页的效果能够像安装在计算机上的应用软件或系统一样友好华丽.
它由如下四种技术组成:CSS + DOM + XMLHttpRequest+ JavaScript .
       各部分功能如下:
       CSS : 控制页面的显示。
       DOM : 控制文档结构。
       XMLHttpRequest: 负责与服务器进行异步通信。
       JAVAScript : 调用，控制其他三个组成部分。
如果去掉XMLHttpRequest则为DHTML技术.

==========================================================
基本流程如下:
   1) 事件触发通信过程
   2)
     2.1 创建XMLHttpRequest对象 createXHR()
     2.2 准备要发送到服务器的参数 .
     2.3 指定用于处理应答的函数 . xhr.onreadystatechange = fn [ 回调函数 ] ;
     2.4 open() , send() ;

   3) 编写回调函数 .
      3.1
        通信过程结束： xhr.readyState == 4
        服务器执行    ： xhr.status == 200
      3.2 对服务器的应答结果进行处理 :
          复杂的用xhr.responseXML (DOM方式)
   简单的用xhr.responseText(返回的字符串)


==========================================================
XMLHttpRequest与服务器之间数据交换的方式有get和post两种.
使用POST方式提交:
      url = "/ajax/test.jsp" ;
      XMLHttpRequest.open( "POST" , url );
      XMLHttpRequest.setRequestHeader( "Content-Type" , "application/x-www-form-urlencoded" );//如果是POST,那么必须指定请求头.
      XMLHttpRequest.send( "name=zhangsan&age=12&email=xxxxx" ) ;
==========================================================
使用GET方式提交
      url = "/ajax/test.jsp" ;
      XMLHttpRequest.open( "GET" , url?a=1&b=2 ) ;
      XMLHttpRequest.send(null);

==========================================================
以下给出简单示例代码,以供参考:
**************************************
test.html
**************************************
<html>
<head>
  <script type="text/javascript">
   var xhr ;

   //初始化 XMLHttpRequest 对象
   // return value : 1 : IE , 2 , Mozila , 0 : create XMLHttpRequest's object error ;
   function createXHR(){
    //创建XMLHttpRequest对象xhr .
    if( window.ActiveXObject ){
    /*对window.ActiveXObject的调用会返回一个对象，也可能返回null，
    if语句会把返回的结果看作是true或false,如果返回对象则为true，返回null则为false,
    以此指示浏览器是否支持ActiveX控件，相应的得知浏览器是不是Internet Explorer.
    以下类同.*/
     xhr = new ActiveXObject( "Microsoft.XMLHTTP" ) ;
     return 1 ;
    }else if( window.XMLHttpRequest ){//此句是支持XMLHttpRequest则进行如下操作
     xhr = new XMLHttpRequest();
     return 2 ;
    }else{//不支持XMLHttpRequest则返回0
     return 0 ;
    }
   }

   //将用户填写的用户名发送给服务器端验证
   function checkUserName(){
    var ret = createXHR();//
    if( ret == 0 ){
      alert( "create xhr error" ) ;
    }else{
     //在xhr中注册用于处理应答的函数(callBack)

     xhr.onreadystatechange = callBack ;
     //此处回调后面没有加括号是因为如果javascript将函数复给变量时在后边加了(),那么就会立刻执行了.此处需特别注意
     /**/
     //使用Get方式向服务器发送请求 .
     var url = makeQueryString( "/ajax/check.jsp" );
     xhr.open( "get" , url ) ;
     xhr.send( null );//
     //
      /*
     //通过Post 形式向服务器发送数据 .
     var url = "/ajax/check.jsp" ;
     xhr.open( "post" , url ) ;
     xhr.setRequestHeader( "Content-Type" , "application/x-www-form-urlencoded" ) ;//关于此处请参见后面附带的相关文档
     xhr.send( makeQueryString( null ) ) ;
     */
    }
   }

   //在指定的URL上添加参数
   function makeQueryString( url ){
    var name = document.getElementById( "nameId" ).value ;
    var queryString ;
    if( url == null ){//为null时是使用POST进行发送
     return "name=" + name ;
    }else{//使用GET进行发送
     return url + "?name=" + name ;
    }
   }

   function callBack(){ 
     //通信过程结束 .
     //readyState :0:未初始化(uninitialized) 1: 初始化阶段(loading)
     //2 ：连接建立阶段(loaded) 3 : 通信中阶段(interactive)
     //4 ：通信结束(complete)
     if( xhr.readyState == 4 ){
     //status==200,表示服务器运行正常,其他值代表错误
     if( xhr.status == 200 ){
       processResult();
     }else{
       alert( "error!" ) ;
     }
     }
   }

   function processResult(){
    //获得应答内容 ,把应答内容显示在网页上
    var span = document.getElementById( "msgId" ) ;
    span.innerHTML = xhr.responseText ;
   }
  </script>
</head>
<body>
  <table>
   <tbody>
    <tr>
     <td>User Name</td>
     <td><input type="text" id="nameId" onblur="checkUserName();"/>
      <span id="msgId"></span>
     </td>
    </tr>
    <tr>
     <td>Password</td>
     <td><input type="password" /></td>
    </tr>

    <tr>
     <td colspan="2">
      <input type="button" value="user register" />
     </td>
    </tr>
   </tbody>
  </table>
</body>
</html>
***********************************************************************
check.jsp
***********************************************************************
<%@page contentType="text/html;charset=utf-8" isELIgnored="false"%>
<%@page pageEncoding="GBK"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<%
   Thread.sleep( 2000 ) ;
%>
<c:if test="${ empty param.name}">
<font color="red"><b>必须填写用户名</b></font>
</c:if>
<c:if test="${ ! empty param.name}">
<c:if test="${ param.name == 'ajax'}">
  <font color="red"><b>用户名已存在</b></font>
</c:if>
<c:if test="${ param.name != 'ajax'}">
  <font color="green"><b>用户名可以使用</b></font>
</c:if>
</c:if>
以上代码只作为简单演示,列出了基本的调用创建等方式等.
==========================================================
以下为附加内容:
********************************************************************
关于application/x-www-form-urlencoded等字符编码的解释说明

在Form元素的语法中，EncType表明提交数据的格式用 Enctype 属性指定将数据回发到服务器时浏览器使用的编码类型。下边是说明： application/x-www-form-urlencoded：

窗体数据被编码为名称/值对。这是标准的编码格式。 multipart/form-data：窗体数据被编码为一条消息，页上的每个控件对应消息中的一个部分。 text/plain：窗体数据以

纯文本形式进行编码，其中不含任何控件或格式字符。
补充
form的enctype属性为编码方式，常用有两种：application/x-www-form-urlencoded和multipart/form-data，默认为application/x-www-form-urlencoded。当action为get时候

，浏览器用x-www-form-urlencoded的编码方式把form数据转换成一个字串（name1=value1&name2=value2...），然后把这个字串append到url后面，用?分割，加载这个新的url。

当action为post时候，浏览器把form数据封装到http body中，然后发送到server。如果没有type=file的控件，用默认的application/x-www-form-urlencoded就可以了。但是如

果有type=file的话，就要用到multipart/form-data了。浏览器会把整个表单以控件为单位分割，并为每个部分加上Content-Disposition(form-data或者file),Content-Type(默

认为text/plain),name(控件name)等信息，并加上分割符(boundary)。
********************************************************************
注意:
javascript将函数复给变量一定不能写后边的(),如果写了就执行了.
********************************************************************
使用xhr.responseXML时 dom的一些解析方法: .
            getElementById( "id" ) ;
            getElementsByTagNames( "tr" ) ;
            appendChild( childNode ) ;
            removeChild( childNode ) ;
============================================================