细说Ajax--异步请求

Posted 2020-08-09

    随着浏览器的发展,由原来的WEB1.0，到现在的WEB2.0，以及以后的WEB3.0，ajax-异步请求数据技术都是我们要学习的主流技术。通过ajax的这种特点，我们不仅可以节省我们的上网流量，同时也可以做到多项操作的同时运行。那么什么是ajax？他的主要方法是什么？这或许是我们所要讲述的重点了。

（一）什么是AJAX

     ajax：全称是Asynchronous javascript And XML，是指一种创建交互式网页应用的网页开发技术。我们称之为异步交互技术。

    Ajax 的核心是 JavaScript 对象 XMLHttpRequest。该对象在 Internet Explorer 5 中首次引入，它是一种支持异步请求的技术。简而言之，XMLHttpRequest使您可以使用 JavaScript 向服务器提出请求并处理响应，而不阻塞用户。

   ajax的优势：

    AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

    使用Javascript向服务器提出请求并处理响应而不阻塞用户！核心对象XMLHTTPRequest。通过这个对象，您的 JavaScript 可在不重载页  面的情况与Web服务器交换数据，即在不需要刷新页面的情况下，就可以产生局部刷新的效果。

 

   AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。

 

   AJAX 可使因特网应用程序更小、更快，更友好。

 

  AJAX 是一种独立于 Web 服务器软件的浏览器技术。

 

  AJAX 基于下列 Web 标准：

    JavaScript Xhtml CSS在 AJAX 中使用的 Web 标准已被良好定义，并被所有的主流浏览器支持。AJAX 应用程序独立于浏览器和平台。

  Web 应用程序较桌面应用程序有诸多优势；它们能够涉及广大的用户，它们更易安装及维护，也更易开发。不过，因特网应用程序并不像传统     的桌面应用程序那样完善且友好。通过 AJAX，因特网应用程序可以变得更完善，更友好。

     《以上来自百度百科》

 

  工作原理：

   用户通过浏览器发送请求，通过ajax引擎中的XMLHttRequest对象向服务器端发送请求，服务器接受请求之后，通过调用数据库中的数据，返回我们所需要的数据，然后通过前台工程师将数据呈现在我们的网页上，这样就是我们从网页获取信息的主要的过程了。

AJAX 工作原理 

 （二）细说Ajax

      首先我们应该理解最基本的ajax四步走的编程格式；

         1.创建ajax对象,发送http请求;（因为XMLHttpRequest是内置对象，我们无法直接调用，需要创建一个普通对象）

           

   var  xhr= new XMLHttpRequest(); //驼峰命名法；

         2. 监听readystate的状态改变情况（onreadystatechange函数同来监听readystate的状态改变）   

  xhr.onreadtstetachange=function(){
  
       if(xhr.readystate==4)
          {选中的对象.HTML=xhr.responseText };
}

         3.使用open函数开始发送请求

 xhr.open("get","a.txt",true);

         open函数有三个参数，第一个参数代表发送的方式，第二参数代表发送的目的地，第三个参数是请求的类型，true代表异步请求，false代表同步请求。

       4.用send函数传递参数;（根据请求方式不同，传递参数的格式也不尽相同）   

  xhr.send(null);

     以上就是最简单的，最基础的，也是最容易理解的。

   4步请求中各个函数的意义：

      1.XMLHttpRequest

        这个函数在上面已经详细说明了，就不在多言了；

     2.onreadystatechange

       是XMLHttpRequest对象的一个方法，用来监听readystate的状态改变量；

     3.readystate

       http请求状态,总共有0，1，2，3，4五中状态。同事也是XMLHttpRequest的属性

                        状态              意义

                         0          open()函数没有被调用

                         1          send()函数被调用

                         2          头部文件已被服务器接受

                         3          开始接受服务器返回的东西，并没有接受完全

                         4          完成

   从代码中可以看出我们仅仅关心的是 4 的这种情况;说到头部文件，我要提一嘴的是，http请求不是一下子传过去的，他也需要包装一下，包装成一个个文件的形式，发送给服务器的，他的包装分为头部文件和主体文件。

    4.status http状态码（不同的状态码，有不同的含义）

         200     ok      代表请求数据成功；

         304    Not Modified 请求路径没有变化

         404  Not  Found   未找到文件

         503  service   服务器错误

    5. open()

        open方法表示让XMLHttpRequest对象配置一个请求，open之后并没有真正的发送请求的，而是用用send发送      

        

   6.send()

      send方法就是发送请求，里面的参数表示Http request 报头里所携带的内容。

  GET和POST 请求的异同

      1. get请求多用于向服务器获取数据;post则多用于向服务器传输数据;

      2.get请求一般接受或传递的内容数据较小，post对内容的大小不限制;

      3.post在提交数据是，必须要使用表单封装，而get则不需要；

      4.传递参数时，get的参数在报文头部传输，post参数在报文主体内传输；

  我们来看下面的例子：

   get请求的格式：

     

// get 请求 
  var xhr=XMLTttpRquest();

xhr.onreadtstetachange=function(){
  
       if(xhr.readystate==4)
          {选中的对象.HTML=xhr.responseText };
}

xhr.open("get?a=2&b=4","a.txt",true);//get的参数传递方式

xhr.send(null);

 post的请求格式：

 

var xhr=XMLTttpRquest();

xhr.onreadtstetachange=function(){
  
       if(xhr.readystate==4)
          {选中的对象.HTML=xhr.responseText };
}

xhr.open("post","a.txt",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencode");//创建虚拟表单；

xhr.send(a=1&b=2);//post的参数传递方式

  能力检测，也就是兼容问题

      对于高级浏览器来说，XMLHttpRequest肯定是没有问题的了，但是对于IE6来说，人家也不认识它啊！IE6认识这个new ActiveXObject（“Microsoft.XMLHTTP”）;

      所以就有了兼容的写法了：

   var  xhr;
  if(window.XMLHttpRequest){
        xhr= new XMLHttpRequest(); 
}
else if(window.ActiveXObject){
 
   xhr= new ActiveXObject("Microsoft.XMLHTTP");

}

   所以说，一个好的ajax请求必须把兼容问题考虑在内，虽然IE6已经迟暮。

   以上这些仅仅是对ajax基础的简单理解，它里面的一些高级的特性，还没有提到，比如说跨域的实现，等等。我想看了这篇文章，你对ajax的理解是不是会更加清晰了那！！哈哈。。。。希望对你有所帮助！！x谢谢！！