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 ("您可以使用此用户名！");

        }

}

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