1.什么是AJAX

AJAX即“Asynchronous Javascript And XML”，是指一种创建交互式网页应用的网页开发技术。

2.如何理解AJAX

AJAX其实是浏览器上面的功能,浏览器可以发请求和接收响应.浏览器在window上面创建了一个 XMLHttpRequest,用这个构造函数可以创建对象,js可以根据这个来发请求和接收响应。

3.AJAX的四个步骤

1. 创建XMLHttpRequest对象

2.调用对象的open方法

3.监听对象的onreadystatechange方法(事件处理函数里面操作JS文件)

3.1XMLHttpRequest.readyState 属性返回一个 XMLHttpRequest 代理当前所处的状态。

image.png

4.调用对象的send方法

举例说明用AJAX加载XML：

<?xml version="1.0" encoding="UTF-8"?>
<message>
    <warning>
         Hello World
    </warning>
</message>

getXML.onclick = () => {
    const request = new XMLHttpRequest()
    request.open('GET', '/4.xml')
    request.onreadystatechange = () => {
        if (request.readyState === 4 && request.status === 200) {
            //console.log(request.response)
            const dom = request.responseXML
            const text = dom.getElementsByTagName('warning')[0].textContent
            console.log(text.trim())
        }
    }
    request.send()
}

image.png

4.AJAX获取数据后如何解析数据

image.png

5.用AJAX做分页加载

基本需求:用户加载第一页出现第一页的数据,选择下一页看到第二页的数据

[
{"id":1},
 {"id":2},
 {"id":3},
 {"id":4},
 {"id":5},
 {"id":6},
 {"id":7},
 {"id":8},
 {"id":9},
 {"id":10}
]

[
    {"id":11},
     {"id":12},
     {"id":13},
     {"id":14},
     {"id":15},
     {"id":16},
     {"id":17},
     {"id":18},
     {"id":19},
     {"id":20}
    ]

[
    {"id":21},
    {"id":22},
    {"id":23},
     {"id":24},
     {"id":25},
     {"id":26},
     {"id":27},
     {"id":28},
     {"id":29},
     {"id":30}
    ]

let n = 1;
getPage.onclick = () => {
    const request = new XMLHttpRequest()
    request.open('GET', `/page${n + 1}`)
    request.onreadystatechange = () => {
        if (request.readyState === 4 && request.status === 200) {
            console.log(request.response)
            const array = JSON.parse(request.response)
            array.forEach(item => {
                const li = document.createElement("li");
                li.textContent = item.id
                xxx.appendChild(li)
            });
            n += 1
        }
    }
    request.send()
};

image.png

本文为本人的原创文章，著作权归本人和饥人谷所有，转载务必注明来源.