Ajax GET请求的基本操作

一、首先写一个server.js,用于模拟服务器,并启动

// 1.引入express
const express = require(‘express‘)

// 2.创建express应用对象
const app = express(); 

// 3.创建路由规则
app.get(‘/‘, (request, response)=>{
    // 设置响应头,设置允许跨域
    response.setHeader(‘Access-Control-Allow-Origin‘, ‘*‘)
    // 设置响应体
    response.send(‘Hello, Ajax!‘)
})

// 4.监听端口,启动服务
app.listen(8000, ()=>{
    console.log(‘服务启动,端口8000启动中...‘)
})

二、前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax Demo</title>
    <style>
        #result{
            width: 300px;
            height: 400px;
            border: solid;
        }
    </style>
</head>
<body>
    <div id="result">
    </div>
    <button>点我发送Ajax请求</button>

    <script>
        const btn = document.getElementsByTagName(‘button‘)[0]
        btn.onclick = function(){
            // 1.创建对象
            const xhr = new XMLHttpRequest()
            // 2.初始化,设置请求方法和url
            xhr.open(‘GET‘, ‘http://localhost:8000‘)
            // 3.发送
            xhr.send()
            // 4.事件绑定,处理服务端返回的结果
            xhr.onreadystatechange = function(){
                // 判断返回结果,0,1,2,3,4
                if(xhr.readyState===4){//服务端返回了所有的结果
                    // 判断响应状态码
                    if (xhr.status>=200 && xhr.status<300){
                        // 处理结果, 请求行,请求头,空行,请求体
                        console.log(xhr.status)//响应码
                        console.log(xhr.statusText)//相应字符串
                        console.log(xhr.getAllResponseHeaders())//所有的响应头
                        console.log(xhr.response)//响应体
                        // 设置result的内容
                        const result = document.getElementById(‘result‘)
                        result.innerHTML = xhr.response
                    }else{
                        console.log(‘请求失败‘)
                    }
                }
            }

        }
    </script>
</body>
</html>

三、GET请求设置参数

在初始化xhr对象的时候,在url中加入参数,例如

xhr.open(‘GET‘, ‘http://localhost:8000?q=arg1&w=arg2&e=arg3‘)

先使用?与前面隔开,然后参数=参数值&参数=参数值&参数=参数值,用&连接每个参数

Ajax GET请求的基本操作

上一篇:微信APP支付(Java后台生成签名具体步骤)


下一篇:LAMP环境下虚拟主机配置(基于IP)