likes
comments
collection
share

ajax

作者站长头像
站长
· 阅读数 20

我们需要以异步、按需加载的方式从服务端获取数据并及时刷新，来提高用户体验，于是Ajax技术诞生。

Ajax (Asynchronous JavaScript and XML) 是一种Web应用客户端技术,可以借助客户端脚本(javascript)与服务端应用进行异步通讯(可以有多个线程同时与服务器交互)，并且按需获取服务端数据以后,可以进行局部刷新,进而提高数据的响应和渲染速度。

Ajax原理

客户端把请求发送给ajax引擎，这个引擎属于浏览器内置的，这个引擎提供了一个线程池，当这个引擎接收到请求的时候，会启用一个线程来进行处理(帮我们发送请求)。

Ajax优势:底层异步,然后局部刷新,仅向服务器发送并取回必要的数据，并在客户端采用JavaScript处理来自服务器的响应。这样在服务器和浏览器之间交换的数据大量减少，服务器响应的速度就更快了;

劣势:是不能直接进行跨域访问;

Ajax 编码的基本步骤

ajax

POST请求

 function doAjaxPost() {
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 & xhr.status == 200) {
                document.getElementById("result").innerHTML = xhr.responseText;
            }
        }
        xhr.open("POST", "http://localhost/doAjaxPost", true)
        //post请求必须要设置请求头
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
        //发送请求
        xhr.send("id=102&city=shenzhen")//post请求可以将参数放到send方法内部
    }

POST请求json格式

function doAjaxPostJson() {
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 & xhr.status == 200) {
                document.getElementById("result").innerHTML = xhr.responseText;
            }
        }
        xhr.open("POST", "http://localhost/doAjaxPostJson", true)
        //post请求必须要设置请求头
        xhr.setRequestHeader("Content-Type", "application/json")
        //发送请求
        let param={id:103,city:"nanjing"};
        xhr.send(JSON.stringify(param))//post请求可以将参数放到send方法内部
    }

在实际编程过程中我们发现ajax的基本步骤中有模板代码,这时我们通常会封装代码共性,提取代码特性.然后来提高代码的可重用性。这里我们可以用回调函数来对模板代码进行封装。

首先我们先了解下什么是回调函数:当把一个函数作为实际参数传递给另一个函数时，这个被传递的函数就是回调函数。ajax

借由回调函数对ajax模板代码进行封装的实现

ajax

JS文件中的代码

ajaxajax

封装成更通用的既能处理get请求也可以处理post请求

ajaxajax

Jquery中对ajax代码所做的封装:首先先引入js库

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <h1>The Jquery Ajax 01 Page</h1>
    <button onclick="doAjax()">$.ajax(...)</button>
    <button onclick="doGet()">$.get(...)</button>
    <button onclick="doPost()">$.post(...)</button>
    <button onclick="doLoad()">$().load("...")</button>
</div>
<div id="result"></div>
</body>
<script src="/js/jquery.min.js"></script>
<script>
    function doLoad() {
        let url = "/doAjaxGet";
        //load函数会在指定位置通过ajax方法加载数据，并将数据更新到这个位置
        $("#result").load(url, function () {//可选
            console.log("==load complete==");//加载完成以后执行
        });
    }

    function doAjax() {
        let url = "/doAjaxGet";
        let params = "";
        //$符号在这里代码jquery对象
        //ajax({})为jquery中的一种ajax函数,底层封装了ajax请求过程
        $.ajax({
            url: url,//key必须为url
            data: params,
            method: "get",//可以省略，默认为get请求
            dataType: "text",//服务端响应到客户端的数据格式,默认为json
            async: true,//默认异步
            contentType: "application/json",//假如需要向服务端传递json串
            success: function (result) {//callback回调函数
                //js原生写法
                //document.querySelector("#result").innerHTML = result;
                //jquery中封装的简化写法
                $("#result").html(result);
            }//这里的result默认情况在这个ajax()内部被转换成json格式的对象,已经不是字符串了
        })//假如服务端响应到客户端的数据为json格式字符串，底层默认将其转换为json对象
    }

    function doGet() {
        let url = "/doAjaxGet";
        let params = "";
        $.get(url, params, function (result) {
            $("#result").html(JSON.stringify(result));
        })
    }

    function doPost() {
        let url = "/doAjaxPost";
        let params = "id=107&city=hebei";
        $.post(url, params, function (result) {
            $("#result").html(JSON.stringify(result));
        })
    }
</script>
</html>