ajax

AJAX(Asynchronous Javascript And XML),是一个局部刷新技术,即网页不需要重新加载,只进行部分更新即可

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

基本原理

Ajax的工作原理相当于在服务器和客户端之间加了一个中间层，由这个中间层操控，使用户操作与服务器端响应异步化。

怎么来实现局部刷新?

通过Ajax XmlHttpRequest 对象，使用这个对象可以异步向服务器发送请求，获取获取响应，完成局部更新。

JavaScript中原生ajax

function f1(){
        //1.创建ajax对象
        var xmlHttp = new XMLHttpRequest();
        //2.绑定监听函数
        xmlHttp.onreadystatechange = function(){
            //判断数据是否正常返回
            if(xmlHttp.readyState==4&&xmlHttp.status==200){
                //6.接收数据
                var res = xmlHttp.responseText;
                document.getElementById("span1").innerHTML = res;
            }
        }
        //3.绑定处理请求的地址,true为异步，false为同步
        //GET方式提交把参数加在地址后面?key1:value&key2:value
        xmlHttp.open("POST","/ajax/ajax1",true);
        //4.POST提交设置的协议头（GET方式省略）
        xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        //POST提交将参数，如果是GET提交send不用提交参数
        //5.发送请求
        xmlHttp.send("name=zjj&age=18");
    }

AJAX状态(READY-STATE)

0 =>UNSENT 刚开始创建XHR，还没有发送

1 =>OPENED 已经执行了OPEN这个操作

2 =>HEADERS_RECEIVED 已经发送AJAX请求（AJAX任务开始），响应头信息已经被客户端接收了（响应头中包含了：服务器的时间、返回的HTTP状态码…）

3 =>LOADING 响应主体内容正在返回

4 =>DONE 响应主体内容已经被客户端接收

（可能问到的xhr的状态码，xhr的属性和方法，请求类型，get和post区别）

JQuery版AJAX

JQuery版AJAX有三种写法,下面一一介绍这三种写法

第一种:

$.ajax({

url:“请求路径”,

data:{“键名1”:值1,“键名2”:值2,“键名3”:值3…},

type:“提交方式get/post”,

dataType:“返回数据格式”,(常用:text,json)

async:true/false,

success:function(){},

error:function(){}

})

url:请求路径;data:请求数据;type:数据请求方式;dataType:返回数据格式;async:是否异步;success:执行成功执行本函数;error:执行失败执行本函数

代码示例:

$.ajax({
    url:"JQAjax",
    data:{"name":"李四","age":24},
    type:"post",
    dataType:"text",
    async:true,
    success:function(obj){
        $("#msg").text(obj);
    }
})

第二种&第三种:

第二种和第三种是将提交方式分解出来,$.get()和$.post()内容基本一致

$.get(

“请求路径”,(对应第一种方式url)

{“键名1”:值1,“键名2”:值2,“键名3”:值3…},(对应data)

function(){},(对应success:function(){})

“返回数据格式”(对应dataType)

)

$.post(

“请求路径”,

{“键名1”:值1,“键名2”:值2,“键名3”:值3…},

function(){},

“返回数据格式”

)

代码示例:

$.get(
    "JQPostAjax",
    {"name":"张三","age":23},
    function(obj){
        $("#msg").text(obj);
    },
    "text"
);
$.post(
    "JQPostAjax",
    {"name":"张三","age":23},
    function(obj){
        $("#msg").text(obj);
    },
    "text"
);

缺点

1. AJAX虽然提高了用户体验，但无形中向服务器发送的请求次数增多了，导致服务器压力增大；
2. 因为AJAX是在浏览器中使用Javascript技术完成的，所以还需要处理浏览器兼容性问题；

优点

1. AJAX使用Javascript技术向服务器发送异步请求；
2. AJAX无须刷新整个页面；
3. 因为服务器响应内容不再是整个页面，而是页面中的局部，所以AJAX性能高；

使用场景

登陆失败时不跳转页面，注册时提示用户名是否存在,二级联动等等使用场景