AJAX原生写法

最新推荐文章于 2022-12-20 13:51:22 发布

编程小飞侠

最新推荐文章于 2022-12-20 13:51:22 发布

阅读量353

点赞数

分类专栏： ajax

本文链接：https://blog.csdn.net/weixin_45703155/article/details/107481337

版权

ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

html文件：
在这里插入图片描述

php文件：

实例一:

前端（Ajax1.html）：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ajax原生写法实例</title>

<script type="text/javascript">
        var xhr;        //全局变量

        //ajax原生写法
        function sendAjax(){

                //javascript获取表单文本信息
                var name = document.getElementsByName('name')[0].value;
                var age = document.getElementsByName('age')[0].value;

                //创建 XMLHttpRequest 对象。所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）
                if (window.XMLHttpRequest)
                {
                        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                        xhr=new XMLHttpRequest();
                }
                else
                {
                        // IE6, IE5 浏览器执行代码
                        xhr=new ActiveXObject("Microsoft.XMLHTTP");
                }

                xhr.open("post","test1.php");   //规定请求的类型、URL 以及是否异步处理请求。以post方法，发送到test1.php

                xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");       //只有是用post方法发送才要
                xhr.send("name="+name+"&age="+age);     //将请求发送到服务器。请求内容

				//响应结果
                xhr.onreadystatechange = function(){
                        if(xhr.status==200 && xhr.readyState==4){ // readyState 等于 4 且状态为 200 时，表示响应已就绪：
                                var result = xhr.responseText;  //获得字符串形式的响应数据。
                                document.getElementById('s').innerHTML = result;        //把服务器返回结果放到div上
                        }
                }
        }
</script>

</head>
<body>
        姓名：<input type="text" name="name" /><br />
        年龄：<input type="text" name="age" /><br />
        <input id="button" onclick="sendAjax();" type="Button" value="启动ajax"/>
        <div id="s" style="border: solid 1px black; width: 300px; height: 100px;"></div>
</body>
</html>

get方式可用下面方法：

xhr.open("GET","/try/ajax/demo_get2.phpfname=Henry&lname=Ford",true);
xhr.send();//send()里面不能有字符串

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

php（test1.php)：

<?php
        //post方法获取信息
        $name = $_POST["name"];
        $age = $_POST["age"];

        $pdo = new PDO('mysql:host=localhost;dbname=jsj18137','jsj18137','123456');     //初始化PDO对象
        $sql="insert into bookmark value ('$name','$age')";
        $pdos=$pdo->exec($sql); //返回受修改或删除 SQL 语句影响的行数。如果没有受影响的行，则 PDO::exec() 返回 0.
exec()不能用于查询，查询时用PDO::query()
        if($pdos){
                echo "发布成功";
        }
        else{
                echo "发布失败";
        }
?>