Ajax 入门

Ajax 入门简单介绍

Ajax简介

Aiax是一种逐渐流行的Web编程方式，一种用于创建更好更快以及交互性更强的Web应用程序的技术，是基于JavaScript,XML,HTML,css的新用法。

• 基于标准的表示技术
• 动态显示和交互技术
• 数据交换和操作技术
• 异步数据获取技术

编码步骤

• 创建XmlHsttpRequest对象
• 注册状态监控回调函数
• 建立于服务器的异步连接
• 发出异步请求

window.onload  =function(){
       document.getlementById("bt1").onclick=function(){
              var xhr=createXmlHttpRequest();
              xhr.onreadystatechange=function(){
                          if(xhr.readyState==4{
                               if(xhr.status==200){
                                     alert("服务器已经执行");
                                }
                           }
                 }
                 xhr.open("GET","${pageContext.request.contextPath}/servlet/ServletDemo1?time="+new Date().getTime());
                 xhr.send(null);
     }

不同的浏览器支持的不同

new XMLHttpRequest()          //All browsers except IE 5 and IE 6
new ActiveXObject("Msxml12.XNLHTTP")          //IE
new ActiveXObject("Microsoft.XMLHTTP")         //IE with older system libraries

w3csxhool文档中截取

function ajaxFunction(){
{
   var xmlHttp;
   try
   {
       xmlHttp=new XMLHttpRequest();
   }
   catch(e)
   {
         try
         {
                xmlHttp=new ActiveXObject("Msxml12.XNLHTTP");
          }
          catch(e)
          {
               try
               {
                     xmlHttp=new new ActiveXObject("Microsoft.XMLHTTP") ;
                }
                catch(e)
                {  
                      alert("浏览器不支持Ajax!");
                      return false;
                  }
             }
       }
  }

基本属性

• readyState:类型short； 只读
• responseText:类型 String；只读
• responseXML:类型Document；只读

方法

• open()
• send(）
• setRequestHeader()

事件处理器

• onreadystatechange

将状态触发器绑定一个函数

var xmlHttp;
createXMLHttpRequest()
… 
xmlHttp.onreadystatechange = processor;
//这里的processor是回调函数的方法名
function processor (){
… …
}

使用open方法建立连接

• open(method,url, asynch)

   其中method表示HTTP调用方法，一般使用"GET"，"POST"
   url表示调用的服务器的地址
   asynch表示是否采用异步方式，true表示异步，一般这个参数不写
  

• 范例代码

   xmlHttp.open("POST", "url");
   xmlHttp.open("GET", "url?name=xxx&pwd=xxx");
  

向服务器端发送数据

• GET方式提交

    数据在URL上
    xmlHttp.send(null);
  

• POST方式提交

   xmlHttp.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");
   xmlHttp.send("name=xxx&pwd=xxx");
  

在回调函数中对数据进行处理

function 回调函数(){
	if(xmlHttp.readyState == 4) { //如果响应完成
	        if(xmlHttp.status == 200) {//如果返回成功
                … 
	        }
	}
}

• 常用的服务器返回数据格式

•  HTML片段
   JSON格式的数据
   XML格式的数据