Ajax

什么是AjAx？

异步的javascript和xml。

作用是什么？

通过AjAx与服务器进行数据交换，AjAx可以使用网页实现布局更新。

这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

怎么来实现Ajax？

XmlHttpRequest对象，使用这个对象可以异步向服务器发送请求，获取响应更新，完成局部更新。 Open send responseText/responseXML 局部响应。

使用场景

登录失败不跳转页面。

注册实时提示用户名是否存在。

省市区的联动。

管理图片服务器，进行延时加载。

 

原生AjAx写法：

var XHR=null; 

if (window.XMLHttpRequest) { 

    // 非IE内核 

    XHR = new XMLHttpRequest(); 

} else if (window.ActiveXObject) { 

    // IE内核,这里早期IE的版本写法不同,具体可以查询下 

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

} else { 

    XHR = null; 

} 

 

if(XHR){ 

    XHR.open("GET", "ajaxServer.action"); 

 

    XHR.onreadystatechange = function () { 

        // readyState值说明 

        // 0,初始化,XHR对象已经创建,还未执行open 

        // 1,载入,已经调用open方法,但是还没发送请求 

        // 2,载入完成,请求已经发送完成 

        // 3,交互,可以接收到部分数据 

 

        // status值说明 

        // 200:成功 

        // 404:没有发现文件、查询或URl 

        // 500:服务器产生内部错误 

        if (XHR.readyState == 4 && XHR.status == 200) { 

            // 这里可以对返回的内容做处理 

            // 一般会返回JSON或XML数据格式 

            console.log(XHR.responseText); 

            // 主动释放,JS本身也会回收的 

            XHR = null; 

        } 

    }; 

    XHR.send(); 

} 

 

 

Jquery AjAx写法：

$.ajax({ 

        url:"servlet", 

        type:"post",//get 

        data:{}, 

        async:true, 

        cache:true, 

        complete:function(){}, 

        traditional:false, 

        dataType:"json", 

        success:function(data){}, 

        error:function(){} 

     }); 

 

 $.post("servlet",{},function(data){},"json"); 

 $.get("servlet",function(data){},"json");