初识Ajax

Posted zhouyeqin

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了初识Ajax相关的知识,希望对你有一定的参考价值。

本节要点:

  • 什么是Ajax
  • XMLHttpRequest对象
  • 创建Ajax的过程

 

1         什么是AJAX

AJAX是Asynchronous JavaScript  And XML的缩写,但是,很多被认为是“Ajax”的页面并没有使用javascript或xml,所以把Ajax定义为一种构建Web页面的方法,使页面像桌面应用一样具有响应性和交互性,这种说法更合适。AJAX的主要用途是使用JavaScript从服务器获取数据而不必刷新整个页面。其中AJAX拆分开来解释:

  • Asynchronous:发送请求后不等返回结果,由回调函数处理结果
  • JavaScript:向服务器发起请求,获得返回结果,更新页面
  • XML:封装数据

2         XMLHttpRequest对象

XMLHttpRequest是整个Ajax技术的灵魂。可以说没有XMLHttpRequest,就没有Ajax。Ajax技术的核心是异步发送请求,而XMLHttpRequest则是异步发送请求的对象。

XMLHttpRequest对象不是一个国际标准。在不同浏览器中有不同的实现。要实现能够跨越浏览器运行的Ajax应用,必须考虑所有的使用场合。使用时必须根据浏览器采用不同的语法进行创建。但对每一个都进行判断不合实际,可以利用JavaScript的异常处理机制实现跨浏览器的XMLHttpRequest对象创建脚本。

示例:

var xmlhttp;

//IE浏览器

try{

     xmlhttp= new ActiveXObject(‘Msxml2.XMLHTTP‘);

}catch(e){

      try{

                        xmlhttp= new ActiveXObject(‘Microsoft.XMLHTTP‘);

      }catch(e){

              try{

                       //DOM 2浏览器

                       xmlhttp= new XMLHttpRequest();

              }catch(e){}

      }

 

3         创建Ajax的过程

3.1       构建Ajax应用

利用XMLHttpRequest(XHR)对象,每次构建Ajax应用必须遵循以下步骤:

  • 创建XMLHttpRequest对象
  • 创建Ajax请求
  • 发送Ajax请求
  • 处理服务器响应

创建完XMLHttpRequest对象后就可 以开始使用它了。首先介绍open()方法,它创建一个请求,并准备向服务器发送,open方法语法如下:

open(method , url , asynchronous , user , password);

其中的参数含义如下:

  • method:指定请求的类型,一般为get或post;
  • url:指定请求的地址,可以使用绝对地址或相对地址,可以附带查询字符串
  • asynchronous:可选参数,标识请求是同步还是异步,异步请求为true,同步请求为false,默认情况下该参数为true;
  • user:可选参数,指定请求的用户名,没有则省略;
  • password:可选参数, 指定请求的密码,没有则省略;

示例:创建一个请求,利用get方式发送,服务器url为“my.do”

xmlhttp.open(“get”, “my.do”);

 

3.2       发送Ajax请求

在创建一个请求以后,可以使用send()方法向服务器发送这个请求,同时发送数据。其原型如下:

send(body);

该方法仅有一个body参数,它标识要向服务器发送的数据,其格式为查询字符串的形式。

示例:

var body = “userName=qiyi&sex=male&age=25”;

xmlhttp.send(body);

3.3       捕获请求的状态变化

在发送请求后,往往无法知道请求什么时候完成,所以必须利用事件机制捕获请求的状态,XMLHttpRequest对象提供了onreadystatechange事件实现这一功能。 onreadystatechange事件可以指定一个事件处理函数来处理XMLHttpRequest对象的执行结果。 在调用open方法与send方法时都会触发onreadystatechange事件。

示例:

xmlhttp.onreadystatechange=function(){  

//事件处理代码

}

3.4       readyState状态值

onreadystatechange事件是在readyState属性方法改变时触发,readyState的值表示了当前请求的状态,在事件处理程序中可以根据这个值进行不同的处理,下表介绍了每个值的含义。

readyState

含义

0

表示对象已经建立,但还未初始化。

1

当调用open()方法后,readyState=1,表示XMLHttpRequest对象已经被初始化

2

当调用send()方法后,XHR在向服务器发送请求的这段时间内,readyState =2

3

当调用send()方法后,服务器成功接收到所有请求后,readyState = 3

4

表示已经成功接收到来自服务器的响应数据。

使用readyState属性判断请求状态

在整个请求过程中,onreadystatechange事件在每一次readyState值发生改变时都会被触发。通常在事件中判断readyState的值是在请求完成时才做处理。

xmlhttp.onreadystatechange=function(){

         if(xmlhttp.readState ==4){

         //对服务器响应数据进行处理

         }

}

3.5       使用status属性判断请求的结果

status存储服务器端返回的HTTP响应代码,它代表请求的处理结果,下表列出了常见的响应代码的含义:

Http状态码

含义

200

请求成功

202

请求被接收,但处理未完成

400

错误的请求

404

请求资源未找到

500

内部服务器错误

在请求已经完成的情况下,可以使用status判断请求的结果,其中,404错误是最常见的错误代码,代表“请求资源未找到”。在Ajax的开发中,最常用的是200这个响应代码,例如在浏览器成功打开了一个网页,这时HTTP相应代码就是200,但这个代码一般不会显示。

xmlhttp.onreadystatechange=function(){

         if(xmlhttp.readState ==4){

                   if(xmlhttp.status ==200){

                            //请求成功完成

                   }

                   else{

                            //网络失败或者服务器错误

                   }

         }

}

XHR对象可以接收服务器返回的文本片段和XML文档,分别保存在responseText与responseXML属性中。

3.6       获得返回文本

1)        使用responseText获得返回的文本

当服务器端处理了请求并返回后,可以利用XMLHttpRequest对象的responseText属性获取返回的文本片段。

//定义XMLHttpRequest对象的事件处理程序

xmlhttp.onreadystatechange=function(){      

         if(xmlhttp.readyState==4){

                   if(xmlhttp.status==200){

                            //捕捉文本                                                              alert(xmlhttp.responseText);

                   }else{

                            alert(xmlhttp.status);

                   }

         }

}

2)        使用responseXML捕捉XML文档

除responseText属性外,还可以用responseXML属性来获取服务器返回的XML文档。在使用responseText属性获取返回的纯文本时,服务器端无需特殊的操作。

如果服务器返回的是XML文档,必须要求响应体的HTTP头信息中“content-type”属性为“text/xml”。

假如服务器返回以下XML文档

<?xml version="1.0" encoding="UTF-8">

<root>

<title>这是服务器返回的XML数据</title>

</root>

 

//将服务器返回的XML打印在屏幕上。

xmlhttp.onreadystatechange=function(){

     if(xmlhttp.readyState==4){

         if(xmlhttp.status==200){

         //获取xml对象

         var xmlObj=xmlhttp.responseXML;

         //获取第一个title标记内容

         var title=xmlObj.getElementsByTagName("title")[0].text;

         //输出信息

         alert("XML:\n" + xmlObj.xml + "\n" + "第一个title标记内容为:" + title);

          }else{

         alert(xmlhttp.status);

          }

      }

}

 

以上是关于初识Ajax的主要内容,如果未能解决你的问题,请参考以下文章

ajax技术初识与应用

初识Ajax

AJAX初识

AJAX初识

1-1初识ajax

初识Ajax