AJAX经典示例

<html>
 <head>
  <title>AJAX示例</title>
  <script>
   var http=null;   //定义全局变量
   
   function doLoad(){
    
    //1.创建一个浏览器请求对象xmlhttprequest
    try{
     //尝试创建一个非IE(5.5;6.0)浏览器的请求对象
     http = new XMLHttpRequest();
     
    }catch(e){

     try{
      //创建一个IE浏览器的请求对象(ie5.5 ie6.0)
      http= new ActiveXObject("Microsoft.XMLHTTP");
     }catch(re){
      alert("浏览器不支持AJAX!");
      return;
     }
    }
             
    //=============================进入第二步
    
    
     http.onreadystatechange=fun;   //设置回调函数,第三步的时候写函数
    
     http.open("GET","2.php",true); //采用get方法启动异步方式
    
     http.send(null);  //因为采用get方式提交,可以用null作为参数调用
    
 
     //============================进入第三步
     
      //开始写回调函数
      function fun(){
      
         //0:请求未初始化,还没有调用 open()。
      //1:请求已经建立,但是还没有发送,还没有调用 send()。
      //2:请求已发送,正在处理中(通常现在可以从响应中获取内容头)。
      //3:请求在处理中;通常响应中已有部分数据可用了,没有全部完成。
      //4:响应已完成;您可以获取并使用服务器的响应了。

 
       if(http.readyState == 4){   //判断readyState值是否请求完成。
         
          if(http.status == 200){  //判断http状态是否响应成功,HTTP状态值是200的时候,说明成功响应
         
           document.getElementById("sid").innerHTML=http.responseText;    //将responseText值赋予给ID为sid的元素
          
           }
       
          }
        
       }
       
       }
   
  </script>
 </head>
 <body>
  <h2>AJAX示例</h2>
  <button onClick="doLoad()">加载</button>
  <h1 id="sid"></h1>
 </body>
</html>

posted on 2011-11-08 22:20 xiaolugoo 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/jianker/archive/2011/11/08/2241756.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
很高兴为您解答,以下是一些经典AJAX 实例: 1. 异步加载 HTML 文件 可以使用 AJAX 来异步加载 HTML 文件,这样可以避免整个页面的重新加载。 示例代码: ```javascript function loadHtml(url, callback) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { callback(xhr.responseText); } }; xhr.open('GET', url, true); xhr.send(); } ``` 2. 异步获取 JSON 数据 使用 AJAX 可以轻松地异步获取 JSON 数据,然后在页面中使用它们。 示例代码: ```javascript function loadJson(url, callback) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var data = JSON.parse(xhr.responseText); callback(data); } }; xhr.open('GET', url, true); xhr.send(); } ``` 3. 异步提交表单数据 使用 AJAX 可以在不刷新整个页面的情况下异步提交表单数据。 示例代码: ```javascript function submitForm(form, callback) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var data = JSON.parse(xhr.responseText); callback(data); } }; xhr.open('POST', form.action, true); xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8'); xhr.send(JSON.stringify(getFormData(form))); } function getFormData(form) { var data = {}; var inputs = form.getElementsByTagName('input'); for (var i = 0; i < inputs.length; i++) { var input = inputs[i]; data[input.name] = input.value; } return data; } ``` 希望这些实例对您有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值