Ajax之初体验

概念：Ajax是英文Asynchronous JavaScript And Xml的字母缩写,第一个单词表示异步。

Ajax是一种在网络应用中实现异步通讯和数据交换的技术。其实是多种技术的一个综合。包括了：JavaScript,XTHML,
CSS,xML,DOM,XSLT和XMLHttpRquest等。。

功能：1.无刷新更新页面。

         2.按需求获取数据,减轻对服务器的负担。

         3.实现福客户端。

         4.实现按照一定的标准和广泛使用的技术。

         5.实现页面和逻辑分离。

         6.获取用户数据,并连续的,动态交互。

核心：其中XMLHttpRequest对象就是Ajax用来实现异步互交的核心技术。XMLHttprequest对象支持Internet Explorer 5.0,Safari 1.2,Mozilla 1.0 Firefox, Openera8+ 以及  Netscape 7。通过使用 XMLHttpRequest 对象，web 开发者可以做到在页面已加载后从服务器更新页面。不同的浏览器所创建的XMLHttpRequest对象方法也有不一样。IE 浏览器使用:ActiveXobject对象,其他浏览器使用的是 XMLHttpRequest对象。

初始化XMLHttpRequest对象的几种方案。

<script language="javascript">
   var  myRequest; //生命一个变量用来引用XMLHttpRequest对象
       //IE 1
       myRequest = new ActiveXObject("Msxm12.XMLHTTP");//在初始化XMLHttpRequest对象。
       //IE 2
       myRequest   = new ActiveXObect("Microsoft.XMLHTTP");
          //其他的浏览器
       myRequest   = new XMLHttpRequest();
</script>
//不过建议不要这样写,因为你无法确定客户端的浏览器,有可能对Ajax的不支持,你可以对其进行Try Catch。异常捕获。
修改后
<script language="javascript">
  
   var  myRequest; //生命一个变量用来引用XMLHttpRequest对象
    try{
            //IE 1
               myRequest = new ActiveXObject("Msxm12.XMLHTTP");//在初始化XMLHttpRequest对象。
     }catch(e){
     
           try{
           //IE 2
            myRequest   = new ActiveXObect("Microsoft.XMLHTTP");
                //其他的浏览器
       }catch(e){
            try{
            //其他的浏览器
        myRequest   = new XMLHttpRequest();
             }catch(e){
              
                    alert("你的浏览器不支持Ajax！");
             }

           }



       }
</script>

 XMLHttpRequest对象的属性

属性	描述
onreadystatechange	状态改变的事件触发器
redyState	对象状态0=未初始化             1=读取中             2=以读取             3=交互中             4=完成
responseTest	服务器进程返回数据的文本版本
responseXML	服务器进程返回数据的兼容DOM的XML文档对象
status	服务器返回的状态码如：404资源找不到200成功
statusText	服务器返回状态的文本信息

XMLHttpRequest对象的方法;

 

方法	描述
abort()	停止当前请求
getAllResponseHeaders()	作为字符串返回完整的Headers
getResponseHeader("headerLabel")	作为字符串返回单个的Headers
open("method","URL"[,asyncFlag[,"username"[,"password"]]])	设置请求目标URL方法和其他参数
send(content)	发送请求
setRequestHeader("label","value")	设置header并和请求一起发送

指定响应处理函数(回调函数)

myRequest.onreadystatechange = t2 ;

function t2(){

...............

}

发出Http请求,这里会用到open()函数。

myRequest.open("GET","b.jsp?id="+userId,true);

myRequest.send(null);发送请求。

open第一个参数:是HTTP请求,可以是GET,POST或Head

        第二个参数:是目标URL,注意:只能是内部的URL

        第三个参数:是指定等待服务器返回信息的时间内,是否继续执行下面的代码,如果是true则不会执行。默认是true。

调用玩open之后,直接嗲用send方法,提交数据。如需要传送文件,需要调用setRequestHeader方法,修改MIME类别。

如：myRequest.setRequestHeader("Context-Type","applicaction/msexcel").

对服务器返回的信息进行处理。

首先根据XMLHttpRequest的readyState的值进行判断,如果对象状态是完成的话。就通过responseText;

方法进行处理。

if(myRequest.readyState == 4){

 

    var backret = myRequest.responseText;

}

for ensample 

创建一个web项目。代码如下。

 

<script language="javascript">
   var req;
   function test(){
     var id = document.all("id").value;
     var name= document.all("name").value;


     //初始化XMLHttpRequst
	 req = new ActiveXObject("Microsoft.XMLHTTP");
     req.onreadystatechange = myDeal;//需要另一个function  //服务器处理之后调用的一个方法
	 req.open("GET","b.jsp?id="+id+"&name="+name);
     req.send(null);//没有内容,因为传递的数据在open中
   }
   function myDeal(){
     if(req.readyState==4){
	    var ret = req.responseText;
		document.all("myDiv").innerHTML = ret;
	 }
   }
</script>
<center>用户注册</center>
用户名：<input type="text" name="id" onblur="test();">*<div id="myDiv" name="myDiv"></div>
密  码：<input teype="text" name="name">
<input type="button" value="注册" onclick="test()">
<% 
String id = request.getParameter("id");
String name = request.getParameter("name");
if(id==null||id.trim().length()==0){
   out.println("Id can't be null or empty");
}else if(id!=null&&id.equals("javass")){
  out.println("ID REPEATED");
}else{
  out.print("ok registry");
}

%>

  学习总结：Ajax就是一个异步互交技术。用JavaScript技术负责前台准备数据,可以直接在DOM中获取提交的数据,然后组成程序合法的请求格式。当从后台返回数据后,也是由JavaScript负责解析数据,并把数据重新设置成Html的组建上进行显示。传递回来的数据可以是普通文本,也可以是XML,一般都是用文本。速度快,处理方便。