Ajax学习小结

• 简 介

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

AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

 

一、原生的Ajax

 

1. 创建XMLHttpRequest对象

function createXMLHTTPRequest() {   
                 //1.创建XMLHttpRequest对象   
                 //这是XMLHttpReuquest对象无部使用中最复杂的一步   
                 //需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码   
                 var xmlHttpRequest;
                 if (window.XMLHttpRequest) {   
                     //针对FireFox，Mozillar，Opera，Safari，IE7，IE8   
                    xmlHttpRequest = new XMLHttpRequest();   
                     //针对某些特定版本的mozillar浏览器的BUG进行修正   
                     if (xmlHttpRequest.overrideMimeType) {   
                         xmlHttpRequest.overrideMimeType("text/xml");   
                     }   
                 } else if (window.ActiveXObject) {   
                     //针对IE6，IE5.5，IE5   
                     //两个可以用于创建XMLHTTPRequest对象的控件名称，保存在一个js的数组中   
                     //排在前面的版本较新   
                     var activexName = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];   
                     for ( var i = 0; i < activexName.length; i++) {   
                         try {   
                             //取出一个控件名进行创建，如果创建成功就终止循环   
                             //如果创建失败，回抛出异常，然后可以继续循环，继续尝试创建   
                            xmlHttpRequest = new ActiveXObject(activexName[i]); 
                            if(xmlHttpRequest){
                                break;
                            }
                         } catch (e) {   
                         }   
                     }   
                 }   
                 return xmlHttpRequest;
             }   

      2. get方式请求。

            function get(){
                var req = createXMLHTTPRequest();
                if(req){
                    req.open("GET", "http://test.com/?name=123", true);
                    req.onreadystatechange = function(){
                        if(req.readyState == 4){
                            if(req.status == 200){
                                alert("success");
                            }else{
                                alert("error");
                            }
                        }
                    }
                    req.send(null);
                }
            }

     3. post 方式请求。

               function post(){
                var req = createXMLHTTPRequest();
                if(req){
                    req.open("POST", "http://test.com/", true);
                    req.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=gbk;");   
                    req.send("name=123");
                    req.onreadystatechange = function(){
                        if(req.readyState == 4){
                            if(req.status == 200){
                                alert("success");
                            }else{
                                alert("error");
                            }
                        }
                    }
                }
            }

   以上两种请求方式都有 req.readuState  和 req.starus 判断。刚开始学习的时候我也不知道什么意思  为什么要等于4，为什么要等于200，但这些问题都在接触后都迎刃而解。

readyState与status:

      readyState有五种状态：

　　0 (未初始化)： (XMLHttpRequest)对象已经创建，但还没有调用open()方法；
　　1 (载入)：已经调用open() 方法，但尚未发送请求；
　　2 (载入完成)： 请求已经发送完成；
　　3 (交互)：可以接收到部分响应数据；
　　4 (完成)：已经接收到了全部数据，并且连接已经关闭。

     status  是请求的一个状态，已状态码显示，有很多。

　　100——客户必须继续发出请求
　　101——客户要求服务器根据请求转换HTTP协议版本
　　200——成功
　　201——提示知道新文件的URL
　　300——请求的资源可在多处得到
　　301——删除请求数据
　　404——没有发现文件、查询或URl
　　500——服务器产生内部错误

 

 

二、jquery Ajax

 用jquery来实现Ajax就非常的简单了。

$.ajax({
    url:'/comm/testServlet',
    type:'POST', //GET
    async:true,    //或false,是否异步
    data:{
        name:'yang',age:25
    },
    dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
    success:function(data){
        console.log(data)
    },
    
})

    这就开启了一个Ajax  当然还有其他的属性 ，更多 查看这里

    当  dataType 没有声明为 ‘json’ 的时候 而接收的到的数据是json格式，可以这样转一下... 

success: function (data) {     
    var jsonStr = eval('(' + data.d + ')')
    alert(jsonStr[0].name);
},