Ajax---(Asynchronous JavaScript + XML)

1 篇文章 0 订阅

在我们初识JSP时,刷新页面只能靠一个函数或者其他方法使整个页面刷新,这种网路连线其实是個很耗资源的,程式必须序列化、通讯协定沟通、实体路由传送等动作,这些动作都很耗时间和资源,所有透过网路必需的额外操作,常能拖慢一個系统,就Web应用程式而言,通常只能透过表单進行资料提交,在同步的情況下,使用者送出表单之后,就只能等待远端伺服器回,在这段时间內,使用者无法作进一步的操作。这种就是同步的请求方式。

 而Ajax技术可以发出非同步请求操作,Ajax使用的是javascipt和Xml技术,在Mozilla/Firefox/Safari中,用XMLHttpRequest来发出请求,而在IE6 或IE先前版本,是使用ActiveXObject來发出非同步请求

所以在使用Ajax时,通常要先进行测试浏览器的版本,代码如下:

var xmlHttp;
function createXMLHttpRequest() 
{ 
    if (window.XMLHttpRequest) { // 如果可以取得
       XMLHttpRequest xmlHttp = new XMLHttpRequest(); // Mozilla、Firefox、Safari 
     } else if (window.ActiveXObject) { // 如果可以取得
       ActiveXObject xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); // Internet Explorer 
      }
}
这样就获得了xmlHttp 对象。那么如何使用它来发出非同步的请求呢?一个基本的请求可以是以下片段:
这是使用get方法向服务器发送的请求:(如果要向下一个页面传递参数,则要再请求头中传递)
function startRequest() {
    createXMLHttpRequest(); // 建立非同步请求物件
    xmlHttp.onreadystatechange = handleStateChange; // 设定callback函式 
    xmlHttp.open("GET", "url"); // 开启连接
    xmlHttp.send(null); // 傳送請求
}
//这是回调函数,建立非同步请求成功后执行下列逻辑代码
 function handleStateChange() { 
     if (xmlHttp.readyState == 4) { // 是否請求完成
     if (xmlHttp.status == 200) { // 如果服务端回应OK
         //进行业务操作
     }
   }
 }
这是使用post方法向服务器发送的请求:(直接用xmlHttp.send()传递参数)
function startRequest() {
    createXMLHttpRequest(); // 建立非同步请求物件
    xmlHttp.onreadystatechange = handleStateChange; // 设定callback函式 
    <span style="FONT-WEIGHT: bold">xmlHttp.open("POST", url);</span>
<span style="FONT-WEIGHT: bold">    xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");</span>//必须包含的部分
<span style="FONT-WEIGHT: bold">    xmlHttp.send("参数");</span>

}
//这是回调函数,建立非同步请求成功后执行下列逻辑代码
 function handleStateChange() { 
    if (xmlHttp.readyState == 4) { // 是否請求完成
     if (xmlHttp.status == 200) { // 如果服务端回应OK
          alert("服务端回应" + xmlHttp.responseText);  // 这边取得回应文字
     }
   }
 }
这就是Ajax的基础啦,应用就比如用户注册时在表单中提示用户名是否重复(在文本框失去焦点时触发函数查询数据库),就是一个基本的Ajax应用案例。
Ajax很灵活,需要开发者灵活运用它。


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值