ajax基本使用（结合nodejs中的koa框架）

网络请求的状态码

ajax的基本使用

1.发送一个请求

发起一个get请求（get请求主要用于加载服务器的一些资源）

        // 创建xhr对象实例
        var xhr = new XMLHttpRequest();
        // 监听请求是否完成
        xhr.onload = function() {
                console.log('success');
            }
            // 发出http请求  
        xhr.open('GET', '/list', true);
        xhr.send()

路由中 响应请求

 

router.get('/list', (ctx, next) => {
    ctx.body = 'list data'
})

发起一个post请求（post请求主要用于向服务器提交一些数据，比如表单，上传文件）

        var xhr = new XMLHttpRequest();
        xhr.onload = function() {
            console.log('success');
        }
        xhr.open('POST', '/list2', true);
        xhr.send()

router.post('/list2', (ctx, next) => {
    ctx.body = 'list2 data'
})

2.通过get/post发送字符串格式数据

 通过get发送数据，在URL后面拼接字符串

       var xhr = new XMLHttpRequest();
        xhr.onload = function() {
            console.log('success');
        }
        xhr.open('GET', '/list1?age=18&name=lw', true);
        xhr.send()

通过post发送数据，setRequestHeader方法

        var xhr = new XMLHttpRequest();
        xhr.onload = function() {
            console.log('success');
        }
        xhr.open('POST', '/list2', true);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send('type=pade&name=lh')

后端接收数据

3.浏览器接收服务器返回的字符串数据

使用xhr.responseText方法接收，不过必须要先判断状态码是不是等于200

        var xhr = new XMLHttpRequest();
        xhr.onload = function() {
            // console.log('success');
            // 数据响应，返回接收的字符串
            if (xhr.status == 200) {
                console.log(xhr.responseText);
            }
        }
        xhr.open('GET', '/list', true);
        xhr.send()

4.浏览器接收服务器返回的json数据

使用xhr.responseText方法接收

        var xhr = new XMLHttpRequest();
        xhr.onload = function() {
            console.log('success');
            if (xhr.status == 200) {

                // 返回json数据
                console.log(xhr.responseText);
                var data = JSON.parse(xhr.responseText);
                console.log(data.list[0].username);
            }
        }
        xhr.open('GET', '/list', true);
        xhr.send()

后端传入数据

5.将返回的数据显示到页面中

操作DOM的方法

        var tbody = document.querySelector('tbody')
        var xhr = new XMLHttpRequest();
        xhr.onload = function() {
            console.log('success');
            if (xhr.status == 200) {

                var data = JSON.parse(xhr.responseText);
                for (let i = 0; i < data.list.length; i++) {
                    let tr = document.createElement('tr');
                    for (let attr in data.list[i]) {
                        let td = document.createElement('td');
                        td.innerHTML = data.list[i][attr]
                        tr.append(td)
                    }
                    tbody.append(tr)
                }
            }
        }
        xhr.open('GET', '/list', true);
        xhr.send()

拼接模板字符串

        var tbody = document.querySelector('tbody')
        var xhr = new XMLHttpRequest();
        xhr.onload = function() {
            console.log('success');
            if (xhr.status == 200) {

                var data = JSON.parse(xhr.responseText);
                tbody.innerHTML = data.list.map((v, i) => {
                    return `
                   <tr>
                    <td>${v.username}</td>
                    <td>${v.age}</td>
                    </tr>
                    `
                }).join('');
            }
        }
        xhr.open('GET', '/list', true);
        xhr.send()

6.通过post向服务器发送json数据

        var xhr = new XMLHttpRequest();
        xhr.onload = function() {
            console.log('success');
        }
        xhr.open('POST', '/list2', true);
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.send(JSON.stringify({
            "uname": "hhhh",
            "age": "12"
        }))

后端接收