zoukankan      html  css  js  c++  java
  • Ajax日记

    简要讲Ajax 的内容归纳为博客。

    AJAX能且仅能从服务器上读取文件,我们使用ajax的时候分为以下几个步骤:

    1、  创建ajax对象

    2、  链接服务器

    3、  发送请求

    4、  接收返回值

    下面是详细实现过程

     1 <!DOCTYPE>
     2 <html>
     3     <head>
     4         <meta charset = "utf-8" />
     5         <title>ajax</title>
     6         <script type="text/javascript">
     7         window.onload = function(){
     8             var obtn1 = document.getElementById('btn1');
     9             obtn1.onclick = function(){
    10                 //1、创建ajax对象
    11                 //var oAjax = new XMLHttpRequest();//非IE6
    12                 //var oAjax = new ActiveXObject("Microsoft.XMLHTTP");//IE6
    13                 //兼容写法
    14                 var oAjax = null;
    15                 if(window.XMLHttpRequest){
    16                     oAjax = new XMLHttpRequest();
    17                 }
    18                 else{
    19                     oAjax = new ActiveXObject("Microsoft.XMLHTTP");
    20                 }
    21                 //2、链接服务器
    22                 //open(方法,url,是否异步)
    23                 //同步:一件件事情做。异步:多件事情一起做。
    24                 oAjax.open("GET","like.txt",true);
    25                 //3、发送请求
    26                 oAjax.send();
    27                 //4、接收请求 onreadystatechange 查看进度的事件 当oAjax.readyState == 4表示已经完成,而当oAjax.status == 200时,表示接收数据成功 
    28                 oAjax.onreadystatechange = function(){
    29                     if(oAjax.readyState == 4){
    30                         if(oAjax.status == 200){
    31                             alert("成功"+oAjax.responseText);
    32                         }
    33                         else{
    34                             alert("失败");
    35                         }
    36                     }
    37                 }
    38             }
    39         }
    40         </script>
    41     </head>
    42     <body>
    43         <input id="btn1" type="button" value="读取文件" />
    44     </body>
    45 </html>

    以上过程分四步在服务器上读取了like.txt中的文件

    同样的方法可以读取josn文件和XML文件

    下面是将以上内容封装为函数的代码,可以直接用

     1 function ajax(url,fnSucess,fnFaild){
     2                 //1、创建ajax对象
     3                 //var oAjax = new XMLHttpRequest();//非IE6
     4                 //var oAjax = new ActiveXObject("Microsoft.XMLHTTP");//IE6
     5                 //兼容写法
     6                 var oAjax = null;
     7                 if(window.XMLHttpRequest){
     8                     oAjax = new XMLHttpRequest();
     9                 }
    10                 else{
    11                     oAjax = new ActiveXObject("Microsoft.XMLHTTP");
    12                 }
    13                 //2、链接服务器
    14                 //open(方法,url,是否异步)
    15                 //同步:一件件事情做。异步:多件事情一起做。
    16                 oAjax.open("GET",url,true);
    17                 //3、发送请求
    18                 oAjax.send();
    19                 //4、接收请求 onreadystatechange 查看进度的事件 当oAjax.readyState == 4表示已经完成,而当oAjax.status == 200时,表示接收数据成功 
    20                 oAjax.onreadystatechange = function(){
    21                     if(oAjax.readyState == 4){
    22                         if(oAjax.status == 200){
    23                             alert("成功"+oAjax.responseText);
    24                             fnSucess(oAjax.responseText);
    25                         }
    26                         else{
    27                             fnFaild();
    28                         }
    29                     }
    30                 }
    31             }

    函数接收三个参数 :第一个参数为url,请求的服务器地址。第二个参数为fnSucess函数,当请求并接收数据成功的时候执行该函数,该函数接收一个参数,该参数为接收的文件字符串。第三个参数为fnFaild()函数,当请求数据失败的时候,执行该函数。

    整个Ajax说的神神叨叨,其实也就用这么点东西。

  • 相关阅读:
    Windows下MemCache多端口安装配置
    PL/SQL Developer 9.x 注册码
    SQL Server 表变量和临时表的区别
    SQL 存储过程入门(事务)
    把存储过程结果集SELECT INTO到临时表
    在T-SQL语句中访问远程数据库(openrowset/opendatasource/openquery)
    解决SQL Server 阻止了对组件 'Ad Hoc Distributed Queries' 的 STATEMENT'OpenRowset/OpenDatasource' 的访问的方法
    C#性能优化实践
    sql server 存储过程中使用变量表,临时表的分析(续)
    Request.Url.Port 获取不到正确的端口号
  • 原文地址:https://www.cnblogs.com/bianbiangege/p/3407357.html
Copyright © 2011-2022 走看看