Ajax用法总结

Posted 2020-07-10

ajax：

     AJAX即“Asynchronous Javascript And XML”（异步javascript和XML），是指一种创建交互式网页应用的网页开发技术。

     AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。 AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。（来自百度百科）。

 

Ajax快速入门:

1.创建XMLHttpRequest对象

2.将状态触发器绑定到一个函数

3.使用open方法建立与服务器的连接

4.向服务器端发送数据

5.在回调函数中对返回数据进行处理

 

1.创建XMLHttpRequest对象:

不同浏览器提供不同的支持，IE浏览器 new ActiveXObject("Msxml2.XMLHTTP")，new new ActiveXObject("Microsoft.XMLHTTP")，其它浏览器（火狐） new XMLHttpRequest();

XMLHttpRequest的方法：

         open(method,url, asynch) ：建立对服务器的调用

         send(content) ：向服务器发送请求

XMLHttpRequest的属性：

　　　　onreadystatechange ：状态回调函数

　　　　responseText/responseXML ：服务器的响应字符串

　　　　status：服务器返回的HTTP状态码（200 =请求成功；404=请求失败......）

　　　　statusText: 服务器返回的HTTP状态信息

　　　　readyState ：对象状态（0 = 未初始化；1 = 正在加载；2 = 已加载；3 = 交互中；4 = 完成）

 一般都只用找到文档上代码复制代码就OK：

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

2.将状态触发器绑定到一个函数：
    

       xmlHttp.onreadystatechange = processor; 这里的processor是回调函数的方法名，当对象状态发生改变时，就会触发回调函数，触发回调函数这里当做最后一步。

xmlHttp.onreadystatechange = processor;
 function processor (){ 
      … …
 }

 

3.使用open方法建立与服务器的连接：

      open(method,url, asynch) 其中method表示HTTP调用方法，一般使用"GET"，"POST"； url表示调用的服务器的地址 ； asynch表示是否采用异步方式，true表示异步，一般这个参数不写。

 

xmlHttp.open("POST", "url");
xmlHttp.open("GET", "url?name=xxx&pwd=xxx");//get提交方式，url后面可以带参数，post提交方式参数放在接下来要讲的send方法里面

 

 4.向服务器端发送数据：

        用get提交方式：         

//3.使用open方法建立与服务器的连接
xmlhttp.open("GET","url?name=xxx&pwd=xxx"); 
//4.发送请求
 send xmlhttp.send(null);

     

      用post提交方式：   

//3.使用open方法建立与服务器的连接
xmlhttp.open("POST",URL);    

xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");//设置请求头,这个在post提交方法中要多写的代码    

//4.发送请求
xmlhttp.send("name=xxx&pwd=xxx");

 

5.在回调函数中对返回数据进行处理：

        

//2.将状态触发器绑定到一个函数
xmlhttp.onreadystatechange= processor;
 
 function  processor(){ 
　　　　　　//5.处理响应数据 当信息全部返回，并且是成功 
　　　　　　if(xmlhttp.readyState==4&&xmlhttp.status==200){
 　　　　　　　  
          }
 };

 

 一个完整的例子：

     

    //第一步:得到XMLHttpRequest对象.
    var xmlhttp = null;

    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest(); //针对于现在的浏览器包括IE7以上版本
    } else if (window.ActiveXObject) {
        //针对于IE5,IE6版本
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    //2.设置回调函数
    xmlhttp.onreadystatechange=function(){
        
        //5.处理响应数据  当信息全部返回，并且是成功
        if(xmlhttp.readyState==4&&xmlhttp.status==200){
            
            alert(xmlhttp.responseText);
        }
    };
    
    //3.open
    xmlhttp.open("GET",URL);
    
    //4.发送请求 send
    xmlhttp.send(null);