【济南中心】如何实现BS系统的异步请求

        首先需要明白异步请求和同步请求的区别，具体可以参考下面的图：

       同步请求时，用户发送请求需要将当期页面整个刷新并请求后台数据，等后台数据返回到前端时才会展示出相应的结果，对用户来说这中间有一个时间段是中断的。异步请求时，只需要将部分数据提交到后台，并不刷新前端页面的数据，等响应过来数据时也只会刷新局部页面，对应用户的体验是不中断的，所以现在使用异步提交请求非常普遍。

       理解了这两个概念后我们就来看一下怎么样实现异步的请求。这里我们采用的即使是ajax这个技术。ajax需要使用一个核心对象：xmlhttp对象，这个对象的创建不同的浏览器有不同的方式，我们只需要把下面的创建xmlhttp对象的方法拷贝到对应的js文件中引用即可:

function createXmlHttp(){

  var xmlHttp;

  try{ // Firefox, Opera 8.0+, Safari

       xmlHttp=new XMLHttpRequest();

    }

   catch (e){

            try{// Internet Explorer

                  xmlHttp=newActiveXObject("Msxml2.XMLHTTP");

               }

             catch (e){

               try{

                  xmlHttp=newActiveXObject("Microsoft.XMLHTTP");

               }

               catch (e){}

               }

    }

         returnxmlHttp;

}

       打开ajax的API，我们需要使用xmlhttp对象的下面几个属性和方法。

    ajax的编写步骤如下：

       * 第一步：创建一个异步对象

       * 第二步：设置对象状态改变触发一个函数

       * 第三步：设置向后台提交的路径

       * 第四步：发送请求.

代码如下（创建异步对象的方法前面已经提供）：

get方式如下：

function ajax_get() {

         //1.创建异步对象

         varxhr = createXMLHttp();

         //2.设置状态改变的监听回调函数.

         xhr.onreadystatechange= function(){

                   if(xhr.readyState== 4){ // 请求发送成功

                            if(xhr.status== 200){ // 响应也成功

                                     //获得响应的数据:

                                     vardata = xhr.responseText;

                                     alert(data);

                            }

                   }

         }

         //3.设置请求路径

         xhr.open("GET","/test/ServletDemo1?name=aaa&pass=123",true);

         //4.发送请求

         xhr.send(null);

}

post方式如下：

function ajax_post(){

         //创建异步对象:

         varxhr = createXMLHttp();

         //设置监听:

         xhr.onreadystatechange= function(){

                   if(xhr.readyState== 4){

                            if(xhr.status== 200){

                                     //获得响应的数据:

                                     vardata = xhr.responseText;

                                     alert(data);

                            }

                   }

         }

         

         //打开路径:

         xhr.open("POST","/test /ServletDemo1",true);

         xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

         //发送请求:

         xhr.send("name=张三&pass=123");

}

       其中下面这几个属性具有这些意义：

       ①xhr. readyState这个属性有五个状态，我们只需要关心状态为4的时候表示数据接收完毕。②xhr.status的属性是用来获得相应的状态码，如200表示ok，404表示找不到资源等等，这里我们只关心200这个状态。③xhr.responseText表示获得响应的数据格式是普通文本格式，如果是responseXML则表示响应的数据格式是xml的格式。

       两个方法分别具有这些意义：

       ①xhr.open方法，表示异步去向服务器发送请求，有三个参数分别表示：请求方式、请求路径、是否异步。请求方式一般是get或者post，这样需要强调的是post这种方式还需要设置一个头：xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");，这个头用来处理POST请求方式的中文问题。请求路径就是请求的数据最终提交的地址。是否异步只需要设置为true即可。

        ②xhr.send方法里面是请求参数，如果是get方式提交直接设置为null，post方式提交设置的参数格式为：参数名=参数值，如果有多个中间用&隔开。如果是get方式传递参数，需要在open方法中的url后面手动进行拼接。

哈哈哈~~~~~~~~~~

666，已收藏

很深奥的样子