`
starnc
  • 浏览: 145187 次
  • 性别: Icon_minigender_1
  • 来自: 火星
社区版块
存档分类
最新评论

非常完整ajax的例子

阅读更多
//用户名校验的方法
//这个方法使用XMLHTTPRequest对象进行AJAX的异步数据交互
var xmlhttp;
function verify(){
    //1.使用dom的方式获取文本框中的值
    //document.getElementBuId("userName")是dom中获取元素节点的一种方法,一个元素节点对应HTML页面中的一个标签,如果<input>
    //.value可以获取一个元素节点的value属性值
    var userName = document.getElementById("userName").value;


    //2.创建XMLHttpRequest对象
    //这是XMLHttpRequest兑现使用中最为复杂的一步
    //需要这对IE和其他类型浏览器建立这个对象的不方式写不同的代码
    if(window.XMLHttpRequest){
       //针对FireFox,Mozillar,opera,safari,IE7,IE8
         xmlhttp = new XMLHttpRequest();
        //针对某些特定版本的mozillar浏览器的bug修正
         if(xmlhttp.overrideMimeType){
                 xmlhttp.overrideMimeType("text/xml")
         }
    }else if(window.ActiveXObject){
         //针对IE5,IE5.5,IE6(IE7,IE8)
         //两个可以用于创建XMLHTTPRequest对象的控件名称,保存在一个js数组中
        //排在前面的版本较新
        var activexName =["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
       for(var i=0;i<activexName.length;i++){
           try{
             //取出一个控件名进行创建,如果创建成功就终止循环
             //如果创建失败,抛出异常,然后继续循环,继续尝试创建
             xmlhttp = new ActiveXObject(activexName[i]);
               break;
           }   catch(e){
           }
       }
  }
   // 确认XMLHttpRequest对象创建成功
//        if(!xmlhttp){
//             alert("XMLHttpRequest对象创建失败!");
//             return;
//        }else{
//           //alert(xmlhttp);
//            alert(xmlhttp.readyState);
//        } 

    //2 注册回调函数
    //注册回调函数时只需要函数名不要加括号
    //我们需要注册的是函数名称,如果加上括号,就把函数的返回值给注册上了,这是错误的
         xmlhttp.onreadystatechange = callback;

    //3设置连接信息
    //第一个参数表示http的请求方式。支持所有http的请求方式。主要使用get和post
    //第二个参数表示请求的url地址,get方式的参数也在url中
    //第三个参数表示采用异步还是同步方式交互,true表示异步
    //GET方式请求的代码
    //xmlhttp.open("GET","AJAXServer?name="+userName,true);
    
    //POST方式请求的代码
    xmlhttp.open("POST","AJAXServer",true);
    //POST方式需要自己设置http的请求头
    xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    //POST方式发送数据
    xmlhttp.send("name="+userName);
    
    //4 发送数据,开始和服务器端进行交互
    //同步方式下,send这句话会在服务器设置回来后才执行完
    //异步方式,send这句话执行晚会立即完成
    
    //GET方式
    //xmlhttp.send(null);
}

//回调函数
function callback(){
   // alert(xmlhttp.readyState);
   //5接收响应数据
   //判断对象的状态是交互完成
    if(xmlhttp.readyState==4){
    //判断http的交互是否成功、
      if(xmlhttp.status==200){
          //获取服务器端返回的数据
          //获取服务器端输出的纯文本数据
          var responseText = xmlhttp.responseText;
          //将数据显示在页面上
          //通过dom方式找到div标签所对应的元素节点
          var divNode = document.getElementById("result");
          //设置元素节点中的html内容
          divNode.innerHTML=responseText;
      }else
      {
          alert("出错了");
      }
    }

}

 转自http://topic.csdn.net/u/20090217/22/6c66375e-ef6a-46a0-9dfb-7c3d1e853880.html

分享到:
评论

相关推荐

    一个完整的ajax应用例子

    在本示例中,我们看到一个完整的Ajax应用,用于实现一个模拟的注册页面功能,用户输入用户名后,程序会异步地检查该用户名是否已被占用。** **一、Ajax基础** 1. **异步通信**:Ajax的核心特性是异步,即在不打断...

    很简单的一个AJAX例子

    AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。...然而,基础知识始终是构建更复杂应用的基础,所以了解和实践这个基础的AJAX例子是非常有价值的。

    ajax例子ajax例子

    在Ajax的例子中,通常会涉及到以下几个关键步骤: 1. **创建XMLHttpRequest对象**:在JavaScript代码中,首先需要创建一个XMLHttpRequest对象,这是Ajax的基础。虽然名称中含有XML,但实际上它不仅可以处理XML,还...

    JSP使用Ajax 例子

    这个例子展示了如何在JSP中使用Ajax进行异步数据交互,但实际应用中,你可能需要考虑更多的因素,比如错误处理、安全性、性能优化等。了解Ajax的基本原理和使用方式,可以帮助你在开发富客户端Web应用时提高效率和...

    一个简单的Ajax例子

    在这个"一个简单的Ajax例子"中,我们将深入探讨Ajax的核心概念、工作原理以及如何编写基本的Ajax代码。 1. **Ajax核心概念**: - **异步通信**:Ajax允许浏览器与服务器进行非阻塞通信,即用户在请求处理期间仍可...

    ajax最简单例子

    总的来说,这个简单的Ajax例子展示了如何通过JavaScript与服务器进行异步通信,以及如何将返回的数据动态地更新到页面上。对于初学者来说,理解这个基本流程是学习Ajax的关键。随着深入学习,你还可以了解更多的高级...

    易懂asp的ajax例子

    总结,"易懂asp的ajax例子"应该包含如何在ASP中使用Ajax进行异步通信的实例,通过XMLHttpRequest或jQuery的$.ajax()方法,结合客户端和服务器端的脚本编写,实现页面部分数据的动态加载,提高用户体验。文件名...

    jquery+ajax例子

    在这里,我们将深入探讨基于jQuery的Ajax应用,以"jQuery+Ajax例子"为标题,结合项目描述和标签,我们来详细讲解这些技术。 1. **jQuery简介** jQuery由John Resig在2006年创建,旨在使JavaScript编程变得更加简单...

    一个非常简单的ajax例子

    通过学习和实践这个Ajax例子,你可以开始探索更复杂的Ajax应用,比如使用jQuery、axios或fetch等库来简化Ajax操作,或者研究如何在响应式设计中使用Ajax来提高用户体验。记住,理论知识是基础,动手实践才能真正掌握...

    AJAX例子 结合ASP.NET

    AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。结合ASP.NET,我们可以创建动态、交互性更强的Web应用程序。在这个AJAX与ASP.NET的入门案例中,我们将深入...

    Ajax的JSP例子

    **Ajax的JSP例子** Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。这个例子是基于JSP(JavaServer Pages)实现的,展示了如何利用Ajax与服务器进行异步...

    php+ajax例子

    标题中的“php+ajax例子”指的是使用PHP服务器端语言与AJAX(Asynchronous JavaScript and XML)客户端技术结合的示例应用。在Web开发中,PHP通常用于处理服务器端逻辑,而AJAX则允许网页在不刷新整个页面的情况下,...

    Ajax小例子源码

    本Ajax小例子源码提供了对这一技术的基础应用,非常适合初学者学习和理解Ajax的工作原理。下面我们将详细解析Ajax的几个关键知识点: 1. **XMLHttpRequest对象**:这是Ajax的核心,它是JavaScript内置的对象,用于...

    一个完整的jquery+ajax传送请求的实例

    在IT行业中,jQuery和AJAX是两个非常关键的前端技术,它们极大地简化了网页与服务器之间的数据交互。本文将深入探讨一个完整的jQuery+AJAX传输请求的实例,旨在帮助开发者理解如何有效地使用这两种技术实现异步数据...

    struts2+jquery+json+ajax例子

    总结起来,"struts2+jquery+json+ajax"的例子展示了如何利用这些技术协同工作,实现一个无刷新的登录界面,提供流畅的用户体验。通过Struts2处理业务逻辑和数据验证,jQuery和Ajax负责前后端的通信,JSON作为数据...

    一些ajax例子,ajax学习例子

    在本案例中,“一些ajax例子,ajax学习例子”是一个学习和实践Ajax技术的资源集合。 Ajax的核心是JavaScript对象XMLHttpRequest,它允许开发者在后台与服务器进行通信,而不会打断用户的交互。以下是一些关键的Ajax...

    ajax,jQuery 例子大全,json例子

    这个压缩包文件中的例子涵盖了Ajax、jQuery和JSON的基础使用,从简单的GET请求到复杂的异步数据交互,对于初学者来说是非常宝贵的资源。通过学习和实践这些例子,你可以更好地理解和掌握如何使用Ajax和jQuery来创建...

    msajax简单例子jsmsajax简单例子jsmsajax简单例子js

    msajax简单例子msajax简单例子msajax简单例子msajax简单例子msajax简单例子msajax简单例子msajax简单例子msajax简单例子msajax简单例子msajax简单例子msajax简单例子msajax简单例子msajax简单例子

    自己写的最简单Ajax例子

    "AAJAX.rar"则可能是一个压缩包,包含了相关的JavaScript文件、CSS样式文件或者其他的资源,用于支持这两个Ajax例子的完整运行。 学习Ajax的过程中,初学者需要理解HTTP请求的工作原理,掌握JavaScript的基本语法,...

Global site tag (gtag.js) - Google Analytics