AJAX - 基本知识

Ajax 前端之家
前端之家收集整理的这篇文章主要介绍了AJAX - 基本知识，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
Ajax=异步的JavaScript和XML
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

一、AJAX - 创建 XMLHttpRequest 对象

1.什么是XMLHttpRequest对象

所有现代浏览器（IE7、Chrome、Firefox、Safari、Opera）均支持XMLHttpRequest对象，XMLHttpRequest对象用来在后台与服务器交换数据，实现页面局部刷新。

2.如何创建XMLHttpRequest对象

@H_404_77@ 一般浏览器都支持XMLHttpRequest对象，但部分IE浏览器支持的是ActiveXObject。 
 
 

   var xmlhttp; 
 
 
 
if (window.XMLHttpRequest)
       {// code for IE7+,Firefox,Chrome,Opera,Safari
            xmlhttp=new XMLHttpRequest();
       }
else
       {// code for IE6,IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
       }

 
 
 
  
  
 
 
 
 
  3.XMLHttpRequest对象如何与服务器交换数据 
 
 
 
 
  
  
 
 
 
 
  3.1 向服务器发送请求 
 
 
 
 
  
  
 
 
 
 
     
  我们使用XMLHttpRequest的Open和Send方法： 
 
 
 
 
  
xmlhttp.open("GET","text.txt",true);

 
 
 
 
 
  
xmlhttp.send();

 
 
 
 
 
   
     @H_301_136@ 方法
 
    
    
 
      描述 
    
 
    
 
      open(method,url,async) 
      @H_301_151@ 规定请求的类型、URL 以及是否异步处理请求。
 
      
     
       
  • method：请求的类型；GET 或 POST
    •  
       
  • url：文件在服务器上的位置
    •  
       
  • async：true（异步）或 false（同步）
    •  
      
 		 
    
 
    
 
      send(string) 
      @H_301_151@ 将请求发送到服务器。
 
      
     
       
  • string：仅用于 POST 请求
    •  
      
 		 
    
 
    
  
 
  
  
 
 
 
 
  3.1.1 使用GET请求 
 
 
 

    
 
 
 

     
  一个简单的GET请求： 
 
 
 
 
  
xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();

 
 
 
 
 
     
  为了避免每次获得的是缓存中的内容，为了避免，可以在url中加一个唯一的时间ID： 
 
 
 
 
  
xmlhttp.open("GET","demo_get.asp?t="+Math.random(),true);
xmlhttp.send();

 
 
 
 @H_404_77@
     通过GET向服务器发送数据Demo： 
 
 
 
 
  
 
 
 
 
 
  
  
 
 
 
 
  3.1.3 使用POST请求： 
 
 
 
 
  
  
 
 
 
 
     
  一个简单的POST请求： 
 
 
 
 
  
xmlhttp.open("POST",true);
xmlhttp.send();

 
 
 
 
 
     
  如果像html表单那样POST数据，在setRequestHeader来添加HTTP头，使用send方法中规定要发送的数据： 
 
 
 
 
  
 
 
 
 
 
  
  
  向请求添加 HTTP 头：setRequestHeader(header,value) 
  
 
  header: 规定头的名称 
  
 
  value: 规定头的值 
 
 
 
 
  
 
 
 
 
 
  3.1.3关于异步True或False: 
 
 
 
 
  
  
 
 
 
 
    
  对于web开发来说，发送异步请求是一个巨大的进步，因为很多在服务器执行的任务都相当费时，在Ajax出现前，这可能会引起应用程序挂起或停止。 
 
 
 @H_404_77@
     通过Ajax,JavaScript无需等待服务器响应，而是： 
 
 
 @H_404_77@
        1.在等待服务器响应期间执行其它脚本 
 
 
 @H_404_77@
        2.当响应就绪后对响应进行处理 
 
 
 @H_404_77@ 
  
 
 
 
 @H_404_77@
   当Async=True时，应设置onreadystatechange事件中处于就绪状态时的执行函数： 
 
 
 
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

 
 
 
  
 
 
 
 @H_404_77@
   当Async=False时，处于同步状态，此时JavaScript会等到服务器就绪时才执行，无需写onreadystatechange监控函数： 
 
 
 
 
  
 
 
 
 
 
  
  
 
 
 
 
  3.2 服务器的响应 
 
 
 

      
 
 
 @H_404_77@
   如果要获得来自服务器的响应，使用XMLHttpRequest中的responseText或responseXML。 
  
 
 
  
 
    
    
 
      responseText 
      获得字符串形式的响应数据。 
    
 
    
 
      responseXML 
      获得 XML 形式的响应数据。 
    
 
    
  
 
 
 
 
 
  
 
 
 
 
 
  3.2.1 使用responseText 
 
 
 
 
  
 responseText 属性返回字符串形式的响应，因此您可以这样使用：
 
  
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

 
 
 
 
 
  
 
 
 
 
 
  3.2.2 使用responseXML 
 
 
 
 
  
 
 
 
 

      
  如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性： 
 
 
 
 请求books.xml文件，并解析响应：
 
 
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
  {
  txt=txt + x[i].childNodes[0].nodeValue + "<br />";
  }
document.getElementById("myDiv").innerHTML=txt;

 
 
 
  
 
 
 
 
 
  3.3 Ajax 的 onreadystatechange事件 
 
 
 
 
  
 
 
 
 
 
    
  当请求发送到服务器的整个过程中，我们需要执行一些基于响应的任务，即每当readyState改变时都会触发onreadystatechange事件，readyState属性存有XMLHttpRequest的状态信息。 
 
 
 @H_404_77@ 
  
 
  
 @H_404_77@
   下面是XMLHttpRequest对象的三个重要属性： 
  
 
 
  属性
  
     
 onreadystatechange 
      存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 
    
 
    
 
      readyState 
      @H_301_151@ 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
 
      
     
       
  • 0: 请求未初始化
    •  
       
  • 1: 服务器连接已建立
    •  
       
  • 2: 请求已接收
    •  
       
  • 3: 请求处理中
    •  
       
  • 4: 请求已完成，且响应已就绪
    •  
      
 		 
    
 
    
 
      status 
      @H_301_151@ 200: "OK"
 
 404: 未找到页面
 		 
    
 
    
  
 
  
 
 
 
 
 
  当readyState=4且status=200时，表示响应已就绪： 
 
 
 
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

 
 
 
  
 
 
 
 
 
  3.4 使用callback回调函数 
 
 
 
 
  
 
 
 
 
 
    
  callback函数是一种以参数的形式传递给另一个函数的函数，我们在处理Ajax任务时，一般都会写一个处理Ajax请求的 
  标准 
  函数，这个标准函数包括请求的url和发生onreadystatechange时间所执行的任务： 
 
 
 

      
 
 
 
 
  
 
   < 
   html 
   > 
  
 
  

       
   < 
   head 
   > 
  
 
  

       
   < 
   script 
    
   type 
   = 
   "text/javascript" 
   > 
  
 
  

       
   var 
   xmlhttp; 
  
 
  

       
   function 
   loadXMLDoc(url,cfunc) 
   { 
  
 
  

       
   if 
   (window.XMLHttpRequest) 
   { 
    
  
 
  

       
   // code for IE7+,Safar 
   i 
  
 
  

       
    xmlhttp= 
   new 
   XMLHttpRequest(); 
  
 
  
 
      
   } 
   else 
   { 
    
  
 
  

       
   // code for IE6,IE 
   5 
  
 
  

       
    xmlhttp= 
   new 
   ActiveXObject( 
   "Microsoft.XMLHTTP" 
   ); 
  
 
  
 
      
   } 
  
 
  

       
   xmlhttp.onreadystatechange=cfunc; 
  
 
  

       
   xmlhttp.open( 
   "GET" 
   ,url, 
   true 
   ); 
  
 
  

       
   xmlhttp.send(); 
  
 
  

         
   } 
  
 
  

         
   function 
   myFunction() 
   { 
  
 
  

       
   loadXMLDoc( 
   "/ajax/test1.txt" 
   , 
   function 
   () 
   { 
  
 
  
 
      
   if 
   (xmlhttp.readyState==4 && xmlhttp.status==200) 
   { 
  
 
  
 
       
   document.getElementById( 
   "myDiv" 
   ).innerHTML=xmlhttp.responseText; 
  
 
  
 
       
   } 
  
 
  
 
      
   }); 
  
 
  

       
   } 
  
 
  

       
   </ 
   script 
   > 
  
 
  

       
   </ 
   head 
   > 
  
 
  
 
   < 
   body 
   > 
  
 
  
 
    
   <divid="myDiv"> 
  
 
  
 
    
   < 
   h2 
   > 
   Let AJAX change this text 
   </ 
   h2 
   > 
  
 
  
 
    
   </ 
   div 
   > 
  
 
  
 
    
   <buttontype="button"onclick="myFunction()">通过 AJAX 改变内容</button> 
  
 
  
 
   
  
  
 
  

       
   </ 
   body 
   > 
  
 
  
 
   </ 
   html 
   > 
  
 
 
                                          

      

      
                 
              
            
          
          
          
          

            

              




            

          


          

            

              

                  
    
猜你在找的Ajax相关文章



                                    
网页的异步请求（Ajax）

                                
JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表...

                                
                                
                            



                                    
手动实现AJAX

                                
AJAX 每日更新前端基础，如果觉得不错，点个star吧 &#128515; https://github.com/Win...

                                
                                
                            



                                    
axios异步提交表单数据的不同形式

                                
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使...

                                
                                
                            



                                    
php的ajax简单实例

                                
很早就听闻ajax的名声，但是却一直不知道怎么用，今天自己捣鼓了一下，竟然会用了，哈哈哈...

                                
                                
                            



                                    
Json与Ajax(注册实例）

                                
需要在服务器上进行哈 jquery的ajax方法： // jquery请求 $.ajax({ url: &quot;./serv...

                                
                                
                            







                                    
jSon和Ajax登录功能，ajax数据交互案例

                                
ajax实例，检测用户与注册 检测用户名是否被占用： 在用户填写完用户名之后，ajax会异步向...

                                
                                
                            



                                    
关于AjaxControlToolkit的样式问题

                                
网(LieHuo.Net)教程 技术文章一直都是转载的,从来没有自创过.终于遇到AjaxControlToolkit,...

                                
                                
                            



                                    
一个简单的AJAX实现(HELLO AJAX)

                                
客户端部分： <html> <head> <meta http-equiv="Content-Type" ...

                                
                                
                            



                                    
AJAX中文乱码的两类问题及解决之策

                                
1）发送路径中的参数有中文，在服务器段接收参数值是乱码 例如： var url=”a.jsp?na...

                                
                                
                            



                                    
实例：AJAX返回xml代码如何在网页中显示

                                
建站学院（LieHuo.Net）文档 今天来学习一篇实例代码教程：AJAX返回xml代码如何在网页中显...

                                
                                
                            







            

          

        
        
        
        
        

          
          

            

              

                
                
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号

                

              

            

          

          
         
          

            

              
 



              

            

          

          
          
          
          

            

              

                
                
              

            

          

          


          
          

            

              

                
                
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作