首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Ajax >

Ajax 初始学习总结

2013-09-16 
Ajax 初步学习总结Ajax是什么Ajax是(Asynchronous JavaScript And XML)是异步的JavaScript和xml。也就是异

Ajax 初步学习总结
Ajax是什么

         Ajax是(Asynchronous JavaScript And XML)是异步的JavaScript和xml。也就是异步请求更新技术。Ajax是一种对现有技术的一种新的应用,不是一门新语言。它是用JavaScript编写。与xml的关系就是可以读取和返回xml文件。

 

Ajax的核心对象

        通过不必把Web页面寄送到服务器而实现数据传送,XMLHttpRequest对象为客户端与服务器之间提供了一种动态的交互能力。

 

方法:

xmlHttpRequst对象利用send()和open()方法与服务器进行交互。

open(method,url,async)

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

    send(string)

    • string:仅用于 POST 请求

      如果是post请求,必须使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中设置发送的数据:


      xmlhttp.open("POST","ajax_test.asp",true);xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");xmlhttp.send("fname=Bill&lname=Gates");


      如何实现异步操作呢?

       

              ajax通过xmlhttpRequest对象执行操作,其中xmlhttpRequest对象是在浏览器中内置的一个对象

      其运行原理就相当于创建了一个请求代理,通过代理去完成与服务器的交互,交互的过程中客户不需要等待,还可以进行其它的工作,交互完成以后,代理再将交互的结果返回给客户页面。

      第一步:创建xmlHttpRequest对象,每个浏览器的创建不是都相同。


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

      通常情况下为了兼容所有浏览器,每个都要写上。

       

      第二步:设置open()方法和setRequestHeader()方法参数。

          将请求方式,请求目的地址,和请求类型设置到open方法中,如果是post请求,则需要设置setRequestHeader()参数

       

      第三步:发送执行

          利用send方法,与服务器真正的交互执行

      第四步:获得执行结果

          首先判断执行是否完成,然后通过js操作dom元素,将返回的responseText返回到页面

      xmlhttp.onreadystatechange=function()  {//判断是否发送成功,是否找到请求页面等  if (xmlhttp.readyState==4 && xmlhttp.status==200)    {//操作页面元素    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;    }  }

      用jQuery来进行Ajax开发(实例)


       
      1、请求页面AJax.aspx
       
      HTML代码

      <div>        <input id="txtName" type="text" /><input type="button" value="查看用户名是否存在" id="btn" onclick="JudgeUserName();" />        <div id="showResult" style="float:left">div>    div>


      JS代码<script type="text/javascript" src="CSS/jquery-1.3.2.js"></script>     <script type="text/javascript">        function JudgeUserName()        {            $.ajax({            type:"GET",            url:"AjaxUserInfoModify.aspx",            dataType:"html",            data:"userName="+$("#txtName").val(),            beforeSend:function(XMLHttpRequest)                {                    $("#showResult").text("正在查询");                    //Pause(this,100000);                },            success:function(msg)                {                       $("#showResult").html(msg);                    $("#showResult").css("color","red");                },           complete:function(XMLHttpRequest,textStatus)                {                    //隐藏正在查询图片                },          error:function()               {                    //错误处理               }            });        }     </script>


      2 、页面AjaxUserInfoModify.aspx
       
      后台代码

      protected void Page_Load(object sender, EventArgs e)    {        string userName = Request.QueryString["userName"].ToString ();        if (userName == "James Hao")        {            Response.Write ("用户名已经存在!");        }        else        {            Response.Write ("您可以使用此用户名!");        }}

      现在是简单的初步认识,后面深入的实践加深理解。



      1楼wangyajin333昨天 21:23
      理论用于实践,期待后续文章。

热点排行