×

Ajax - Ajax的基本实现

作者:Terry2016.09.25来源:Web前端之家浏览:10877评论:0

600.png

Ajax是Asynchronous JavaScript And XML的简写,它是一种能够向服务器请求额外数据而不需要卸载页面的技术。通俗来说,Ajax是一种可以使客户端和服务器进行异步交互,在不刷新整个页面的情况下,对页面进行局部更新的技术。

Ajax最早是在2005年2月,由Adaptive Path公司的Jesse James Garrett提出的概念,它出现在Garrett的文章"Ajax:A new approach to Web Applications"中。在这篇文章描述了混合使用XHTML,CSS,javascript,DOM,XMLHttpRequst进行Web开发将会成为一种新的趋势。

Ajax并不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入,它是一种支持异步请求的技术。之后,Ajax被Google发扬光大,成为WEB前端最热门的技术之一。

一个完整的Ajax请求的过程应该分为以下3个步骤:

  • 1、创建XMLHttpRequest对象

  • 2、检测XMLHttpRequest对象的状态,在合适的时候处理

  • 3、发送请求

XMLHttpRequest对象

Ajax的核心是JavaScript的XmlHttpRequest对象。不同的浏览器创建XMLHttpRequest对象的方法是不一样的。这一区别主要体现在IE5和IE6浏览器和其它浏览器上。在其它的现代浏览器中,创建XMLHttpRequest对象的方法是使用JavaScript的内置对象XMLHttpRequest

// 非IE5和IE6浏览器
xhr = new XMLHttpRequest();

对于IE6浏览器,要使用ActiveXObject("Msxml2.XMLHTTP")来获取。

// IE6+浏览器
xhr = new XMLHttpRequest(ActiveXObject("Msxml2.XMLHTTP"));

对于IE5浏览器,要使用ActiveXObject("Microsoft.XMLHTTP")来获取。

// IE5+浏览器
xhr = new XMLHttpRequest(ActiveXObject("Microsoft.XMLHTTP"));

为了屏蔽浏览器之间的差异,我们可以使用工厂方法来创建XMLHttpRequest对象。

function createXMLHttpRequest(){
  var xhr;
  //IE5和IE6
  if(window.ActiveXObject){
    try{
      xhr = new ActiveXObject(Microsoft.XMLHTTP)
    }catch(e){
      xhr = new ActiveXObject("Msxml2.XMLHTTP");
    }
  }else if(window.XMLHttpRequest){
    //其它主流浏览器
    xhr = new XMLHttpRequest();
  }else{
    alert("你使用的浏览器不支持XMLHttpRequest!");
    return false;
  }
  return xhr;
}

然后可以通过下面的方法来获取XMLHttpRequest对象。

var xhr = createXMLHttpRequest();
检测XMLHttpRequest对象的状态

在获取了XMLHttpRequest对象之后向服务器发送信息之前,我们需要了解一下XMLHttpRequest对象的三个重要属性。

1、onreadystatechange 属性

onreadystatechange属性存有处理服务器响应的函数,我们可以在onreadystatechange事件中处理请求。例如下面是一个空的onreadystatechange函数。

xhr.onreadystatechange=function(){
  // 我们需要在这里写一些代码
}

2、readyState 属性

readyState属性存有服务器响应的状态信息。每当readyState改变时,onreadystatechange函数就会被执行。readyState的可能取值有:

readyState的状态 描述
0 请求未初始化(在调用open()之前)
1 请求已提出(调用send()之前)
2 请求已发送(这里通常可以从响应得到内容头部)
3 请求处理中(响应中通常有部分数据可用,但是服务器还没有完成响应)
4 请求已完成(可以访问服务器响应并使用它)

例如下面的代码:

xhr.onreadystatechange = function(){
  if(xhr.readyState == 4 && xhr.status == 200){
    // 进行相应的处理
  }
}

onreadystatechange会在每一个步骤都进行响应,一般我们仅仅只在状态为4(请求结束)并且status=200(请求没有出错)时才进行处理。

3、responseText 属性

我们可以通过responseText属性来取回由服务器返回的数据。例如下面的代码:

xhr.onreadystatechange = function(){
  if(xhr.readyState == 4 && xhr.status == 200){
    //获取相应的文本:通过xhr的responseText可以获取文本信息,包括xml的标签
    alert(xhr.responseText);
  }
}

如果需要获取XML的信息,可以使用responseXML方法。

向服务器发送请求

在完成上的工作之后,我们就可以向服务器发送AJAX请求了。要想把请求发送到服务器,我们就需要使用open()方法和send()方法。

open()方法有三个参数。它的语法如下:

open(method,url,async)

三个参数的含义如下:

  • method:请求的类型,可以是GET或POST。

  • url:文件在服务器上的位置。

  • async:true(异步)或false(同步)。

例如我们向服务器发出一个AJAX请求可以如下书写代码:

xhr.open("GET","test1.html",true);

send()方法是向服务器发送请求。

完整的Ajax请求代码

一个完整的Ajax请求的代码如下所示:下面的代码是在服务器的同一个文件夹中有a.html和b.html两个文件。下面是a.html中执行的JavaScript脚本文件。它通过Ajax请求获取b.html的文本内容(包括HTML标签)。

/***** a.html文件中的JavaScript脚本 ******/

// 获取XMLHttpRequest对象
function createXMLHttpRequest(){
  var xhr;
  //IE5和IE6
  if(window.ActiveXObject){
    try{
      xhr = new ActiveXObject(Microsoft.XMLHTTP)
    }catch(e){
      xhr = new ActiveXObject("Msxml2.XMLHTTP");
    }
  }else if(window.XMLHttpRequest){
    //其它主流浏览器
    xhr = new XMLHttpRequest();
  }else{
    alert("你使用的浏览器不支持XMLHttpRequest!");
    return false;
  }
  return xhr;
}

// 创建XMLHttpRequest对象
var xhr = createXMLHttpRequest(); 

// 处理Ajax请求
xhr.onreadystatechange = function(){
  if(xhr.readyState == 4 && xhr.status == 200){
    //获取相应的文本:通过xhr的responseText可以获取文本信息,包括xml的标签
    alert(xhr.responseText);
  }
}
// 发送Ajax请求
xhr.open("GET","b.html",true);
xhr.send();

返回javascript教程主目录>>

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/js1474732800756.html

网友评论文明上网理性发言 已有0人参与

发表评论: