【AJAX】一篇文章弄懂并学会AJAX

 

概念

1. ASynchronous JavaScript And XML：异步的JavaScript和XML
2. 同步和异步：客户端和服务器端相互通信的基础上。同步——客户端在等待服务器端的响期间不能做任何其他操作；异步——服务器处理请求的过程中，客户端可以进行其他的操作。
3. 传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面
4. Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术

 
 

优缺点

优点：

1. 局部刷新，异步通信，效率更高，用户体验上升
2. 按需取数据，减少了冗余请求，减轻了服务器负担
3. 标准化，广泛使用且不需要插件

缺点：

1. 局部刷新，因此后退按钮失效
2. 依赖JavaScript和Ajax引擎，需要考虑兼容性问题
3. 安全问题，Ajax会暴露出与服务器交互的更多细节

 
 

原生JS实现

function fun() {
    //1.创建核心对象
    var xmlhttp = new XMLHttpRequest();

    //2.建立连接
    /* 参数：请求方式(GET/POST)，URL，异步/同步(true/false) */
    xmlhttp.open("GET", "AjaxServlet?username=Alice", true);

    //3.发送请求
    /* 参数：GET方式的话请求参数已经拼接在URL中，这里空参；POST方式的话请求参数写在send()中 */
    xmlhttp.send();

    //4.接受并处理来自服务器的响应
    /* 逻辑：当xmlhttp就绪状态改变时触发事件：如果就绪状态码为4且响应状态码为200，就可以获取服务器的响应结果了 */
    xmlhttp.onreadystatechange = function () {
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
            var responseText = xmlhttp.responseText;
            alert(responseText);
        }
    }
}

 
 

JQuery实现

-------------------------------------------- $.ajax()实现 -------------------------------------------------
function fun() {
    //使用$.ajax()发送异步请求
    $.ajax({
        url: "AjaxServlet",                       // 请求路径
        type: "POST",                             // 请求方式
        // data: "username=Alice&age=12",         // 请求参数
        data: {"username": "Alice", "age": 12},   // 请求参数(推荐写法)
        success: function (data) {},              // 回调函数(data是用来接收response响应数据的)
        error: function () {},                    // 出错时执行的回调函数
        dataType: "json",                         // 设置接收到的response响应数据的格式
    });
}


---------------------------------------- $.get()/$.post()实现 ---------------------------------------------
function fun() {
	$.get(url, [data], [callback], [type])
	$.post(url, [data], [callback], [type])
	// 参数：$.get(请求路径, [请求参数], [回调函数], [响应结果的类型])
}

 

 

 

 

 
 
 
 

 
 

 
 
结束之前，再读三遍：局部刷新，异步通信，按需取数据！！
 

End ♬

by a Lolicon ✪