ajax

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

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

---

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

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

---

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模板代码进行封装的实现

JS文件中的代码

---

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

---

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

    
    



    
The Jquery Ajax 01 Page
    $.ajax(...)
    $.get(...)
    $.post(...)
    $().load("...")