Ajax的五种接收响应头消息（常用）

最新推荐文章于 2025-06-20 22:15:06 发布

原创最新推荐文章于 2025-06-20 22:15:06 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

AJAX 专栏收录该内容

4 篇文章

订阅专栏

本文深入探讨了PHP与Ajax在Web开发中的应用，详细讲解了五种常见的响应头消息类型，包括text/plain、text/html、application/javascript等，通过具体示例展示了如何在实际项目中实现数据的异步加载和处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习本文你得先了解php与Ajax

我的PHP初探
 Ajax的了解与应用

五种响应头消息

1. textt/plain 字符串
服务端的消息响应头：header(“Content-Type:text/plain;charset=UTF-8”);

示例：
服务端（PHP）：

<?php
//响应消息头
header("Content-Type:text/plain;charset=UTF-8");
/*
参数名是否正确（真确前者，不正确后者）
真确：$REQUEST['参数名'](一种混合写法不管你是POST还是GET请)
不正确：当你传入的参数名不正确是，提示报错error-bname(可随意写)
*/
@$bnames = $_REQUEST['bname'] or die('error-bname');
@$prices = $_REQUEST['price'] or die('error-price');
//随机数0-10
$num = rand(0, 10);
//判断输出
if ($num > 5) {
    echo 'suc';
} else {
    echo 'error';
}

客户端：

<body>
    <h1>添加到购物车</h1>
    商品名：<input type="text" name="banme">
    价格：<input type="text" name="price">
    展示图片：<input type="text" name="src">
    <button type="button">添加到购物车</button>
</body>
<script>
    document.getElementsByTagName("button")[0].onclick = function () {
        var bname = document.querySelector("[name='banme']").value;
        var price = document.querySelector("[name='price']").value;
        var src = document.querySelector("[name='src']").value;
        //请求参数字符串
        var str = `bname=${bname}&price=${price}&src=${src}`;
        //创建XMLHttpRequest对象（交互的必备步骤）
        var xhr = new XMLHttpRequest();
        //触发函数
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                fun(xhr);
            }
        }
        //请求方式
        xhr.open('POST', '../php/smallwork/Ajax_plain.php');
        //请求头（POST专属）
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        xhr.send(str);
        //响应函数
        function fun(xhr) {
            if (xhr.responseText == 'suc') {
                console.log("添加成功");
                //添加成功清空文本框
                document.querySelector("[name='banme']").value = '';
                document.querySelector("[name='price']").value = '';
                document.querySelector("[name='src']").value = '';
            }
        }
    }
</script>

展示：

/* 注：这里我并没有进行数据格式判断 ,你可在无端进行判断*/

2.text/html html标签组成的字符串片段 Ajax请求中返回的不是完整的HTML文档
服务端的消息响应头：header(“Content-Type:text/html;charset=UTF-8”);
示例：
服务端：

<?php
header('Content-Type:text/html;charset=UTF-8');
//数据
$a[] = "Anna";
$a[] = "Brittany";
$a[] = "Cinderella";
$a[] = "Diana";
$a[] = "Eva";
$a[] = "Fiona";
$a[] = "Gunda";
$a[] = "Hege";
$a[] = "Inga";
$a[] = "Johanna";
$a[] = "Kitty";
$a[] = "Linda";
$a[] = "Nina";
$a[] = "Ophelia";
$a[] = "Petunia";
$a[] = "Amanda";
$a[] = "Raquel";
$a[] = "Cindy";
$a[] = "Doris";
$a[] = "Eve";
$a[] = "Evita";
$a[] = "Sunniva";
$a[] = "Tove";
$a[] = "Unni";
$a[] = "Violet";
$a[] = "Liza";
$a[] = "Elizabeth";
$a[] = "Ellen";
$a[] = "Wenche";
$a[] = "Vicky";

$value = $_REQUEST["value"];
//判断字符串长度
if (strlen($value) > 0) {
	//循环判断
    for ($i = 0; $i < count($a); $i++) {
    	//转换成小写（strtoupper:大写）判断，substr(截取字符串,start,end)
        if (strtolower($value) == strtolower(substr($a[$i], 0, strlen($value)))) {
            echo "<li>{$a[$i]}</li>";
        }
    }
}

客户端：

<!-- 样式 -->
<style>
        div,ul,input,li {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .content,.select {
            position: relative;
        }

        ul,input {
            width: 180px;
        }

        ul {
            position: absolute;
            background-color: #ccc;
            display: none;
        }

        ul.active {
            display: block;
        }

        li {
            padding: 5px;
            border-bottom: 1px solid #fff;
        }

        li:hover {
            cursor: pointer;
            background-color: #fff;
        }
    </style>
</head>
<!-- 结构 -->
<body>
    <div class="content">
        <div class="select">
            <input type="text" name="textC">
        </div>
        <ul id="wy">
            <li>PHP</li>
            <li>javascript</li>
        </ul>
    </div>
</body>
<!-- 行为 -->
<script>
	//键盘弹起事件
    document.querySelector("[name='textC']").onkeyup = function () {
        let value = document.querySelector("[name='textC']").value;
       
        let str = `value=${value}`;
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                fun(xhr);
            }
        }
        xhr.open('POST', '../php/smallwork/Ajax_html.php');
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(str);
        function fun(xhr) {
        	//判断是否有数据传输过来
            if (xhr.responseText) {
            	//有就存入到ul中
                wy.innerHTML = xhr.responseText;
                //给取显示类
                wy.classList.add("active");
            } else {
                wy.classList.remove("active");
            }
        }
    }
</script>

展示：
在这里插入图片描述

3.application/javascript 根据JavaScript语法拼接的字符串
服务端的消息响应头：header(“Content-Type:text/javascript;charset=UTF-8”);
示例：
服务端：

<?php
header('Content-Type:application/javascript;charset:UTF-8');

// 获取到客户端请求消息的所有头部消息
$list = getallheaders();
// var_dump($list);
// 读取Accept-Language请求头的内容
$lang = $list['Accept-Language'];
// 读取可接受语言列表中的首选语言   --> 前两个字符
$start2 = substr($lang, 0, 2);
// echo $start2;
if($start2 == 'zh'){
    echo 'alert("你好")';
}else if ($start2 == 'ja'){
    echo 'console.log("こんにちは")';
}else{
    echo 'var p = document.createElement("p");p.innerHTML = "HELLO";document.body.appendChild(p)';
}

客户端：

<script>
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            fun(xhr);
        }
    }
    xhr.open('GET','../php/smallwork/Ajax_javascript.php');
    xhr.send(null);
    function fun(xhr){
        eval(xhr.responseText);//执行服务端返回的js字符串
    }
</script>