PHP与Ajax(五)---简单实用实例

最新推荐文章于 2021-06-10 11:59:20 发布

致Great

最新推荐文章于 2021-06-10 11:59:20 发布

阅读量815

点赞数

CC 4.0 BY-SA版权

分类专栏： php与Ajax 文章标签： ajax 实例 php

本文链接：https://blog.youkuaiyun.com/yanqianglifei/article/details/51498381

php与Ajax 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一个使用XMLHttpRequest对象进行异步请求的例子。通过JavaScript发起GET请求到服务器，验证输入的名字是否存在于预设列表中，并根据服务器返回的结果更新页面显示。

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

1、显示页面代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>XMLHttpRequest独对象使用实例</title>
    <script language="JavaScript">

        //第一步创建ajax引擎对象
        function getXmlHttpObject(){
            var XmlHttpRequest;
            if(window.ActiveXObject){
                XmlHttpRequest=new ActiveXObject("Microsoft:XMLHTTP");
            }
            else{
                XmlHttpRequest=new XMLHttpRequest();
            }
            return XmlHttpRequest;
        }
        var myXmlHttpRequest="";

        //处理函数
        function process(){
            myXmlHttpRequest=getXmlHttpObject();
            //判断xmlHttpRequest是否创建成功
            if(myXmlHttpRequest){
                //获取表单的文本框的输入值
                var name=document.getElementById('myname').value;
                //通过myXmlHttpRequest对象发送请求到服务器的某个页面
                var url="process.php?name="+name;
                myXmlHttpRequest.open("GET",url,true);

                //定义准备状态改变时的回调函数
                myXmlHttpRequest.onreadystatechange=callBack;

                //向服务器发送请求
                myXmlHttpRequest.send(null);
            }

        }

        function callBack(){
            if(myXmlHttpRequest.readyState==4){
                if(myXmlHttpRequest.status==200){
                    //解析从服务器返回的字符串
                    var result=myXmlHttpRequest.responseText;

                    $("message").innerHTML="<b><u>"+result+"</u></b>"
                }
                else{
                    alert("执行过程中出现问题，服务器返回："+myXmlHttpRequest.statusText);
                }
            }

        }

        //通过id获取元素
        function $(id){
            return document.getElementById(id);
        }
    </script>
</head>
<body>
    请输入你的名称
    <p>
        <input type="text" id="myname">


    <p>
        <input type="button" value="提交" onclick="process()">


    <div id="message">

    </div>
</body>
</html>

2、处理代码

proces.php

<?php
/**
 * Created by PhpStorm.
 * User: yanqiang
 * Date: 2016/5/25
 * Time: 0:40
 */
header("Content-Type:text/html;charset=utf-8");
$arr=array("孙悟空","小娜扎","葫芦娃","米老鼠","唐老鸭","机器猫");


if(in_array($_GET['name'],$arr)){
    echo $_GET['name']."存在列表中";
}
else{
    echo $_GET['name']."不存在列表中";

}


?>

3、效果图