• Ajax基础入门


    1.什么是ajax

    全称:Asynchronous JavaScript and XML(用异步的形式的JavaScript去操作XML) 用来传输进行数据交互==其实就是拿数据发数据。

    2.应用

    Ajax就是做到当页面内容发生改变的时候能不刷新页面,就能把改变告知我们。比如,我们注册的时候信息填写错误,是不是没刷新页面就能直接看到信息提示,比如我们玩QQ的时候,有什么消息都会提醒你,丝毫没有刷新页面,丝毫没有影响你干别的事情,这就是Ajax做的事情。

    3.具体步骤

    (1)创建ajax对象

    var xhr = new XMLHttpRequest(); 

    (2)设置请求信息

    xhr.open(method,url,async);
    method:请求的类型;GET 或 POST
    url:文件在服务器上的位置
    async:true(异步)或 false(同步)

    (3)提交请求

    xhr.send();

    (4)等待服务器返回内容

    xhr.onreadystatechange = function() {
      //弹出内容
    } 

    4.具体例子

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>TestAjax</title>
     6 <script type="text/javascript">
     7     function loadXMLDoc()
     8     {
     9         var xhr;
    10         if (window.XMLHttpRequest)
    11         {// code for IE7+, Firefox, Chrome, Opera, Safari
    12             xhr=new XMLHttpRequest();
    13         }
    14         else
    15         {// code for IE6, IE5
    16             xhr=new ActiveXObject("Microsoft.XMLHTTP");
    17         }
    18         xhr.open("GET","hello.txt",true);
    19         xhr.send();
    20         xhr.onreadystatechange=function()
    21         {
    22             if (xhr.readyState==4 && xhr.status==200)
    23             {
    24                 document.getElementById("myDiv").innerHTML=xhr.responseText;
    25             }
    26         }
    27     }
    28 </script>
    29 </head>
    30 <body>
    31 <h2>AJAX</h2>
    32 <button type="button" onclick="loadXMLDoc()">请求数据</button>
    33 <div id="myDiv"></div>
    34 </body>
    35 </html>                                                                        
    点击按钮"请求数据" 会在
    id="myDiv"的div下显示出hello.txt的内容(不会刷新整个页面)
    说明:
    1.html和txt文件在同一个目录下
    2.
    创建的ajax对象实际是存在兼容问题的,IE6以下没有这个对象的,所以是获取不到数据的,IE6以下用的实际是一个插件的方式:

    ActiveXObject(‘Microsoft.XMLHTTP') //ActiveXObject: IE6下插件的总称,包含很多插件
    //Microsoft.XMLHTTP:具体某个插件的名字
    
    

      所以我们需要对上面做一个兼容性的处理:

    
    
    var xhr = null;
    if(window.XMLHttpRequest){ //加window是因为如果直接判断IE下不存在的东西会报错,加了window,就是在判断一个属性是否存在,这样就不会报错了(当然我们都知道所有的东西都在window对象下,所以这样判断是有效的)
    xhr = new XMLHttpRequest();
    }else{
    xhr = new ActiveXObject(‘Microsoft.XMLHTTP');
    }

    3.在上面的代码中xhr.send()提交请求是需要时间的,所以必须要等到一定时间提交成功后,我们后面的才能正确获取到内容,所以这就是后面的代码正确执行,依赖于前面,但是如果用同步的话,
    我们后面那些不依赖这些前面代码的代码也没办法执行,体验就不好了,所以我们选择用异步,而对于这些依赖前面代码执行的代码,我们就进行判断

      if (xhr.readyState==4 && xhr.status==200)

      就是判断如果数据响应到了,收到了,再弹出内容。(如果我们不判断,按照异步的原理,就会立马弹出来,获取数据需要时间,因为实际还没获取到数据,所以会弹出空,怕误解,所以这里我     再强调下).

  • 相关阅读:
    给RArray和CArray加上自己的泛型算法(转)
    由电话号码得到姓名(转)
    在Eclipse中用TODO标签管理任务(转)
    Symbian_C++:Multipart/formdata(转)
    Symbian源代码还原之一,二,三,四,五(转)
    使用Carbide C++进行ODD(On Device Debugging)(转)
    S60_Platform_and_device_identification_codes(转)
    S60 3rd中怎么设置字体类型与字体大小!!!!!(转)
    诺基亚10.22变革影响的分析(转)
    MeeGo软件架构综述(转)
  • 原文地址:https://www.cnblogs.com/wyf2017start/p/6880285.html
Copyright © 2020-2023  润新知