ajax详解

      AJAX是Asynchronous JavaScript And XML的缩写。在2005年，Google通过其Google Suggest使AJAX变得流行起来。

      AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

       XMLHttpRequest是AJAX的基础。所有现代浏览器均支持XMLHttpRequest对象（IE5 和 IE6 使用 ActiveXObject）。

AJAX应用的步骤：

   第一步:创建XMLHttpRequest对象，XMLHttpRequest 对象用于和服务器交换数据。

                  variable=new XMLHttpRequest();

                 variable=new ActiveXObject("Microsoft.XMLHTTP");//在IE5，IE6中使用

        在实际中我们考虑使用下面这种兼容的方式获取XMLHttpRequest对象

                 var xmlhttp;

                 if (window.XMLHttpRequest)        //除IE外的其他浏览器实现

                 {

                      xmlhttp=new XMLHttpRequest();  // code for IE7+, Firefox, Chrome, Opera, Safari

                 }

                else if (window. ActiveXObject)      // IE浏览器实现

               {

                 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");// code for IE5, IE6

              }

   第二步:注册回调函数

             xmlhttp.onreadystatechange=function()   //这种是内部匿名函数，也可以使用外部函数

            {

                if (xmlhttp.readyState==4 && xmlhttp.status==200)

               {

                  document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

               }

           } 

          xmlhttp.readyState的值：

           •1: 服务器连接已建立

           •2: 请求已接收

           •3: 请求处理中

           •4: 请求已完成，且响应已就绪

         xmlhttp.Status的值

             • 200: "OK"

             • 404: 未找到页面

   第三步：设置连接信息

          xmlhttp.open(method,url,async)

           •method：请求的类型；GET 或 POST。

           •url：文件在服务器上url，如servlet。可以在此url后接参数以解决get方式无法传参

           •async：true（异步）或 false（同步）。如果将sync设置为false后回调函数便无意义了。

   第四步：发送请求数据到服务器

          xmlhttp.send()

             当时get方式时send方法中的参数只能是“null”或者什么都不写。

             当时post方式时send方法中的参数可以是String，当然也可以不传递参数。

   第五步：接受响应数据

            使用 XMLHttpRequest对象的responseText或responseXML属性获得来自服务器的响应。

                       responseText：获得字符串形式的响应数据。

                       responseXML 获得 XML 形式的响应数据

  

POST与GET方式的区别：

(1)  send()方法的参数是不一样的。

        当时“get”方式提交时send方法中的参数只能是“null”或者什么都不写。解决get传 参的问题可以在设置连接的时候在url后面加上参数。

        当时“post”方式提交时send方法中的参数可以是String，当然也可以不传递参数。也可以在设置连接的时候在url后面加上参数。当使用send方法传参时我们还要在发送之前加上以下一句话：

                xmlhttp.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”)

          否则传递到服务器端的参数是null值。

(2)  浏览器的地址的区别

         Post提交时传递的参数是不会在地址栏上显示的

         Get提交时传递的参数会在地址栏上显示的。

(3)  提交的参数的信息量

         当向服务器发送大量数据时，POST 没有数据量限制，而get是有限制的。因为提交的参数会在浏览器地址栏中显示。