AJAX的初步介绍以及XMLHttpRequest对象的五步使用法

最新推荐文章于 2022-07-29 03:19:10 发布

肖红

最新推荐文章于 2022-07-29 03:19:10 发布

阅读量1.3k

点赞数

分类专栏： B/S

本文链接：https://blog.csdn.net/xh921/article/details/38581337

版权

B/S 专栏收录该内容

40 篇文章 2 订阅

订阅专栏

首次接触AJAX，顿时体会到了它的强大，这篇博客中我只是肤浅的介绍一下关于AJAX的基础知识，深入的理解还需要继续学习。

一、什么是？

AJAX（Asynchronous JavaScript and XML）异步JavaScript + XML的缩写，从全称中就可以理解这不是一种新的技术，它是将现在广为流行的几种技术的结合，它支持多浏览器的实现异步通信，和无刷新页面或者局部刷新页面。

二、工作？

相对于传统Web应用模式，我们用一张图形象的表示AJAX的工作原理，以及两者的对比关系

在传统方式下，客户端将请求数据直接发送到服务器端，服务器端将页面地址返回，说白了在这里返回的是整个页面。

在AJAX方式下，客户端将请求的数据通过一个AJAX引擎传送到服务器端，从服务器端返回的是数据，在这个传输过程中页面没有进行刷新，只是数据的传

递。这就实现了页面的无刷新操作，拥有更好的用户体验度，同时提高了客户端和服务器端的交互效率。

通过AJAX的核心XMLHttpRequest对象，实现异步通信下面用一个常见的例子解释同步和异步的区别。

我们去图书馆借书，如果我们需要的那本书现在没有，那么我们就有两种方式借到我们需要的书，我们待在图书馆里面等着有人来还那本书，一直到有人来还

我们拿到书才离开图书馆，另一种方式就是我们和管理员约定好了如果有人来还书就立刻通知我们，我们可以继续做我们自己的事情，等到通知后我们再去图书馆

拿书，很明显第二种方式是我们赞同的，图书馆就好比服务器端，我们就是客户端，我们有了一个请求，将请求通过一个AJAX引擎发送给了服务器端，我们不用

管服务器端什么时候给我们结果，可以继续我们的操作，服务器此时根据我们的请求查询数据，然后同样通过AJAX引擎返回到服务器端，内部的工作过程通过一

个回调机制将我们的结果显示出来，此时才完成了我们一次请求的完整响应，在这个响应过程中完全不影响我们的继续操作，如果是同步通信的话，我们只能等到

服务器端返回数据之后才能继续下面的操作，这无疑就浪费了我们的很多时间，图书馆借书的过程就是同步和异步的最好体现，在这个例子中也告诉了我们为什么

要采用异步通信。

三、优缺点？

优点：1、最大的一点是页面无刷新，在页面内与服务器通信过程中，给用户的体验非常好。

　 2、使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。

　 3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务

器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。

4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

缺点：1、破坏了浏览器的后退机制

2、导致了数据的安全问题

3、搜索引擎支持较弱

4、破坏了程序的异常机制

对于这些缺点我也不明白，下面只是我的个人的理解：

1、所谓浏览器的后退机制：在一个常见的Web浏览器中都会有这样一个后退按钮，当单机后退按钮之后用于访问历史记录，就是在这个方面没有和JS很好的结合。

2、引入了数据安全问题，就是应用了AJAX使得用户与数据形成了一个直接的通道，开发者无意识的就暴露了企业数据和服务器的逻辑，AJAX只是在客户端上的安全扫描隐藏起来，无法进一步保护服务器。

3、ajax.dll，ajaxpro.dll这些ajax框架是会破坏程序的异常机制的，（深入学习）

四：核心？

AJAX的核心内容就是XMLHttpRequest对象的使用，前面提到的异步通信和页面无刷新都和这个对象的使用分不开。

下面就是这个对象的一些常见的属性和方法：

open:指定和服务器交互的HTTP方法，url地址和其他请求信息。

send：向服务器发送请求，如果采用异步方式，该方法会立即返回。

abort:停止http请求，将XMLHttpRequest对象复位到未初始化状态。

readyState:5种状态表示，0表示对象以创建，但没有初始化，1表示方法成功调用，2表示已经调用但没有接收数据，3表示正在接收数据，但没有接收完成，4表示响应数据成功接收完成。

status:服务器返回的状态码，200表示成功，404表示未找到文件，500表示服务器内部错误。

详细的属性和方法参考博客（http://blog.csdn.net/senior_lee/article/details/38351747）

五：应用？

下面我们就通过一个用户验证的Demo对这个对象的五步使用做一个详细的讲解：

XMLHttpRequest对象的五步使用方法：

1、建立对象

2、注册回调函数

3、使用open方法设置和服务器端交互的基本信息

4、发送数据开始和服务器端交互

5、在回调函数中判读交互是否结束，响应是否正确，并根据从服务器端返回的数据进行更新页面。

下面是结合Demo分别讲解这几步的具体操作：

1、对象创建：由于浏览器之间存在的差异，XMLHttpRequest对象的创建也有不同的方法：

 var xmlhttp;
function submit(){           
    //alert("test");
    // 1、创建XMLHttpRequest对象
    if(window.XMLHttpRequest){
       //IE7,IE8，firfox
       xmlhttp = new XMLHttpRequest();
    if(xmlhttp.overrideMimeType){
          xmlhttp.overrideMimeType("text/xml");                       
      <span style="white-space:pre"></span>}
      }else if(window.ActiveXObject){
          //IE6，IE5
        var activexName=["MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0",
                   "MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP",
                   "Miscrosoft.XMLHTTP"];
        for(var i=0;i<activexName.length;i++){
        try{
              xmlhttp=new ActiveXObject(activexName[i]);

             <span style="white-space:pre">	</span> break;
           } catch(e){

           }
 }
<span style="white-space:pre">	</span><span style="white-space:pre">	</span>}
      if(xmlhttp===undefined||xmlhttp===null){
           // alert("当前浏览器不支持创建XMLHttpRequest对象，请更换浏览器");
           return;
      }

2、注册回调函数：

//注册

<span style="white-space:pre">	</span>xmlhttp.onreadystatechange=callback;

//从文本框中获取用户输入的内容
<span style="white-space:pre">	</span>var userName=document.getElementById("UserName").value; userName=encodeURI(encodeURI(userName)); 
<span style="white-space:pre">	</span>var url="http://192.168.24.155:8080/AJAX/AJAXServer?name=" + userName; if(url.indexOf("http://")===0){
<span style="white-space:pre">	</span>//url="http://192.168.24.155/AJAX/AJAXServer?name=123" url=url.replace("?","&"); //url="http://192.168.24.155/AJAX/AJAXServer&name=123" url="Proxy?url="+url; //Proxy?url="http://192.168.24.155/AJAX/AJAXServer&name=123" }

//使用的是get提交方式 
//3使用open方法设置和服务器端交互的相应参数 
<span style="white-space:pre">	</span>xmlhttp.open("GET",url,true);

//4设置向服务器发送数据，启动和服务器的交互
 <span style="white-space:pre">	</span>xmlhttp.send(null);

//使用的是post提交方式
//3、设置和服务器端交互的相应参数 
<span style="white-space:pre">	</span>xmlhttp.open("POST",url,true);
 //post方式需要增加的代码,设置头信息

<span style="white-space:pre">	</span>xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
 //4设置向服务器发送数据，启动和服务器的交互 
<span style="white-space:pre">	</span>xmlhttp.send("name=" + userName);

//回调函数中

function callback(){
 //5.判断和服务器端的交互是否完成，还要判断服务器端是否正确返回了数据

<span style="white-space:pre">	</span>if(xmlhttp.readyState===4){
 //表示和服务器端的交互已经完成
 <span style="white-space:pre">	</span>if(xmlhttp.status===200){ 
//表示服务器的响应代码是200，正确的返回了数据 
//纯文本数据的接受方法 
<span style="white-space:pre">	</span>var message=xmlhttp.responseText;

//XML数据对应的DOM对象的接受方法 //使用的前提是，服务器端需要设置content-type为text/xml

（这里的含义就是：

//向div标签中填充文本内容的方法
<span style="white-space:pre">	</span>var div=document.getElementById("message"); 
<span style="white-space:pre">	</span>div.innerHTML=message; } }; }

在上面的代码中我们可以看到open方法中的三个参数含义为：设置提交到服务器的方式，URL地址以及是否采取异步方式。

不同的提交方式，发送到服务器的send方法中的参数有些不同。

在回调函数中首先判断数据和服务器端的交互是否完成，响应代码为200表示正确返回了数据，同时利用DOM对象向标签中添加文本内容。

对于AJAX中核心XMLHttpRequest对象的使用总结到这里，纵观整个应用AJAX技术在Web模式开发中的思路就是通过JavaScript创建XMLHttpRequest对象，再

由JavaScript调用XMLHttpRequest对象完成异步通信，然后JS通过DOM的属性和方法，完成页面的无刷新或者局部刷新。

当然在Servlet中的关于get和post的两种方式，涉及的两个方法doGet和doPost，这里不做详细的介绍，关于AJAX深入的学习会在后面的博客中讲解。