AJAX part II

目录

1.AJAX案例准备

页面准备：

 服务端准备：

2.AJAX请求的基本操作

 3.AJAX设置请求参数

1.AJAX案例准备

1.  前端页面的准备
2.  服务端代码的准备

页面准备：

     需求：点击按钮向服务端发送请求，把服务端返回的响应体结果在框框内显示

 服务端准备：

// 1. 引入express
const express = require('express');

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

// 3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/server', (request, response) => {
  //设置响应头 设置允许跨域
    response.setHeader('Access-Controll-Allow-Origin', '*');

    //  设置响应体
    response.send("Hello AJAX");
});

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

写好页面和服务端代码之后

 

在终端中输入node serve.js。

注意：若监听窗口已被占用，需要释放原来的监听窗口，或者用新的监听窗口。

 

启动服务之后，打开浏览器输入http://127.0.0.1:8000/server

 页面显示正常，标头也显示了我们输入的*号。

2.AJAX请求的基本操作

代码如下：（每个步骤都有详细解释）

<script>
        //获取button元素
        const btn = document.getElementsByTagName('button')[0];
        const result = document.getElementById("result")
        //绑定事件
        btn.onclick=function(){
            //1.创建对象
            const xhr = new XMLHttpRequest();
            //2.初始化 设置请求方法和url
            xhr.open('GET','http://127.0.0.1:8000/server')
            ;
            //3.发送
            xhr.send();
            //4.事件绑定 处理服务端返回的结果
            // on 当什么的时候
            //readystate 是xhr对象中的属性，表示状态 0（未初始化） 1（open方法已经调用完毕） 2（send方法已经调用完毕） 3（服务端返回了部分结果） 4（服务端返回了所有结果）
            //change 改变
            xhr.onreadystatechange = function(){
                //判断(服务端返回了所有的结果)
                if(xhr.readyState===4){
                    //判断相应状态码 200 404 403 401 500
                    //2xx 2开头的都表示成功
                    if(xhr.status >=200&&xhr.status<300){
                        // 处理结果 行 头 空行 体
                        //响应
                        console.log(xhr.status);//状态码
                        console.log(xhr.statusText);//状态字符串
                        console.log(xhr.getAllResponseHeaders);//所有响应头
                        console.log(xhr.response);//响应体

                        //设置result的文本
                        result.innerHTML = xhr.response;
                        
                    }
                    else{}
                }
            }
        }
    </script>

点击按钮之后，控制台也正常输出：

响应头部分：

 3.AJAX设置请求参数

传递参数：