AJAX

Ajax

一.AJAX是什么

AJAX = Asynchronous JavaScript andXML（异步的 JavaScript 和 XML）。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。Ajax的核心思想在于异步交互。要明白异步交互可以通过同步和异步的对比很容易明白：

    －同步交互，点一个连接或提交一个表单，然后就必须重载整个页面。

    －异步交互，提交请求返回对象是不可见的层，通过javascripts根据返回数据，不刷新页面而改变当前页面的显示。

显而易见，Ajax使得web应用更加完善，和用户的交互更加友好。

二、AJAX作用

    在不刷新页面情况下更新数据，节省用户操作时间，提高用户体验，减少数据请求，传输获取数据。

三、AJAX过程

    初始化—发送请求—服务器收到请求—服务器处理—返回结果

四、AJAX方法

   1、建立XMLHTTPRequest对象

var xmlhttp ;

/*try{

  xmlhttp=new XMLHttpRequest();

} catch(err){

  xmlhttp=newActiveXObject("Microsoft.XMLHTTP");

}  // 等同于if...else...

*/

*/

if ( window .XMLHttpRequest){

     xmlhttp = new XMLHttpRequest();

  //codefor IE 7+,Firefox,Chrome,Opera,Safari

}

else {

     xmlhttp = new  ActiveXObject ( "Microsoft.XMLHTTP" );

//code for IE5,IE6

          }

  2. 使用open方法设置和服务器端交互的基本信息

        open（"method","url","true/false"）; // 提交方式，提交地址，异步/同步

  3.send发送数据请求, 开始和服务器端交互（相当于form的submit）

        send（）;

 4.请求状态监控

  ①onreadystatechange事件

  ②readyState属性—请求状态

0：初始化，未调用open（）

1：载入，已调用send（），已发送请求

2：载入完成，send（）方法完成，已收到全部响应内容

3：解析，正在解析响应内容

4：完成，响应内容解析完成，可以在客户端调用

  ③status （network-status 查看状态）

          状态码：200—成功；404—未找到页面；403—地址出错…

  5.返回数据处理

     responseText/responseXML

   xmlhttp.onreadystatechange=function(){//请求状态监控
    if(xmlhttp.readyState==4){ //完成状态
        if(xmlhttp.status==200){ //成功
            alert(xmlhttp.responseText)
        }
    }

完整过程：

window.οnlοad= function () {
    var btn=document.getElementsByTagName("button")[0];
    btn.onclick= function () {
        //初始化  兼容模式 后台与服务器交换数据
        var xmlhttp;
        /*try{
          xmlhttp=new XMLHttpRequest();
        } catch(err){
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }  // 等同于if...else...
        */
        if(window.XMLHttpRequest){
            xmlhttp=new XMLHttpRequest(); //code for IE 7+,Firefox,Chrome,Opera,Safari
        }
        else{
            xmlhttp=new  ActiveXObject("Microsoft.XMLHTTP");//code for IE5,IE6
        }

        xmlhttp.open("get","ajax/links/1.txt","true");//true 异步，false 同步
        xmlhttp.send(); //发送数据请求
        xmlhttp.onreadystatechange=function(){//请求状态监控
            if(xmlhttp.readyState==4){ //完成状态
                if(xmlhttp.status==200){ //成功
                    alert(xmlhttp.responseText)
                }
            }
        }
    }
}

注：1.try…catch AJAX兼容写法

 <script>

    try{

        alert(text)

    }catch(err){

        alert(err.message)

    }finally{

        console.log("语句结束")

    }

 </script>

2.AJAX—get

var xhr = null;

try {

   xhr = new XMLHttpRequest();

} catch (e) {

   xhr = new ActiveXObject('Microsoft.XMLHTTP');

}

/*

   1.缓存 在url？后面连接一个随机数，时间戳

   2.乱码 编码encodeURI

*/

xhr.open('get','links/2.get.php?username='+encodeURI('小明')+'&age=23&' + new Date().getTime(),true);

xhr.send();

xhr.onreadystatechange = function() {   

   if ( xhr.readyState == 4 ) {

      if ( xhr.status == 200 ) {

         alert( xhr.responseText );

      } else {

         alert('出错了,Err：' + xhr.status);

      }

   }

3.AJAX—post

var xhr = null;

try {

   xhr = new XMLHttpRequest();

} catch (e) {

   xhr = new ActiveXObject('Microsoft.XMLHTTP');

}

   xhr.open('post','links/2.post.php',true);

  //post方式，数据放在send()里面作为参数传递

xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');

//申明发送的数据类型
//post

//post没有缓存问题

//无需编码

xhr.send('username=小明&age=33');

xhr.onreadystatechange = function() {   

   if ( xhr.readyState == 4 ) {

      if ( xhr.status == 200 ) {

         alert( xhr.responseText );

      } else {

         alert('出错了,Err：' + xhr.status);

      }

   }