Ajax\创建ajax实例

最新推荐文章于 2024-07-10 14:03:37 发布
最新推荐文章于 2024-07-10 14:03:37 发布
阅读量197 收藏
点赞数
分类专栏： 前端 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43363773/article/details/106537991
版权

6.1

通信协议（TCP/IP  HTTP等） 计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规则。 Cookie 存储在用户本地终端的数据 Cookie增删改查，例：一周内免登录，浏览商品记录 Cookie封装，购物车应用 <?php
//直接输出文本
/**
 * 多行注释
 * 
 * 
 */
echo "hello PHP";
echo "<h1>这是一个标题</h1>";
$str = <<<EOD
<h1>hhh</h1>
<p>ppp</p>
<p>ppp</p>
EOD;
echo $str;

?>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <?php
        echo "前后端不分离";
    ?>
    <script>
        alert("hello");
    </script>
</body>
</html>


<?php
$flag = true;
$num = 10.11;
$arr = [1,2,3];
class Person{

}
$person = new Person();
//var_dump($person);
//var_dump($arr);
//var_dump($num);
//var_dump($flag); //js console.log()

//var_dump(10+20);

if(10){
    echo "hello";
}
for($i = 0; $i < 10; $i++){
    echo $i."<br>";//. php里字符串拼接
}
function foo($x,$y){
    $sum = $x + $y;
    echo $sum;
}
foo(10,20);

?>


 <form action="04_preVar.php" method="post">
      用户名:<input type="text" name="user" /> 密码:<input
        type="password"
        name="psw"
      />
      <input type="submit" value="提交" />
    </form>


<?php
//var_dump($_SERVER);
//$_GET里保存了前端发出get请求时所附加的信息
//$_POST里保存了前端发出post请求时所附加的信息
/* $username = $_GET["user"];
$psw = $_GET["psw"]; */
$username = $_POST["user"];
$psw = $_POST["psw"];

echo "用户名为".$username."密码为".$psw;
echo "取到之后就可以进行数据库的查询操作";
?>

<?php
//掌握
$arr = [1,2,3];
//var obj = {a:1,b:2};
$arr1 = ["a"=>1,"b"=>2];//带索引的数组
//var_dump($arr1);
echo $arr1["a"];//通过索引（键名）访问值
$arr2 = [[1,2],[3,4]];

//了解
/* $a = "abc";
$b = "123";
//key=>value
$arr3 = compact("a","b");

var_dump($arr3); */

$a = [1,2,3];
$b = ["a","b","c"];

$arr4 = array_combine($a,$b);

var_dump($arr4);

$arr5 = range(0,10,2);

var_dump($arr5);


?>

<?php
//访问这个页面，我们需要得到的数据是数组[1,2,3]
//$arr1 = [1,2,3];
//$arr1 = ["a"=>1,"b"=>2];
//$arr1 = [["a"=>1],["b"=>2]];
//将php里的数组转换成json格式的字符串
//$json = json_encode($arr1);
//通过echo向前端（浏览器）响应json数据
//echo $json;

$str = '{"a":1}';

var_dump(json_decode($str,true));

?>

<?php
    $str_browser_language = !empty($_SERVER['HTTP_ACCEPT_LANGUAGE']) ? strtok(strip_tags($_SERVER['HTTP_ACCEPT_LANGUAGE']), ',') : '';
    $str_browser_language = !empty($_GET['language']) ? $_GET['language'] : $str_browser_language;
    switch (substr($str_browser_language, 0,2))
    {
        case 'de':
            $str_language = 'de';
            break;
        case 'en':
            $str_language = 'en';
            break;
        default:
            $str_language = 'en';
    }
    
    $arr_available_languages = array();
    $arr_available_languages[] = array('str_name' => 'English', 'str_token' => 'en');
    $arr_available_languages[] = array('str_name' => 'Deutsch', 'str_token' => 'de');
    
    $str_available_languages = (string) '';
    foreach ($arr_available_languages as $arr_language)
    {
        if ($arr_language['str_token'] !== $str_language)
        {
            $str_available_languages .= '<a href="'.strip_tags($_SERVER['PHP_SELF']).'?language='.$arr_language['str_token'].'" lang="'.$arr_language['str_token'].'" xml:lang="'.$arr_language['str_token'].'" hreflang="'.$arr_language['str_token'].'">'.$arr_language['str_name'].'</a> | ';
        }
    }
    $str_available_languages = substr($str_available_languages, 0, -3);
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head lang="<?php echo $str_language; ?>" xml:lang="<?php echo $str_language; ?>">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>MAMP PRO</title>
<style type="text/css">
    body {
        font-family: Arial, Helvetica, sans-serif;
        font-size: .9em;
        color: #000000;
        background-color: #FFFFFF;
        margin: 0;
        padding: 10px 20px 20px 20px;
    }

    samp {
        font-size: 1.3em;
    }

    a {
        color: #000000;
        background-color: #FFFFFF;
    }

    sup a {
        text-decoration: none;
    }

    hr {
        margin-left: 90px;
        height: 1px;
        color: #000000;
        background-color: #000000;
        border: none;
    }

    #logo {
        margin-bottom: 10px;
        margin-left: 28px;
    }

    .text {
        width: 80%;
        margin-left: 90px;
        line-height: 140%;
    }
</style>
</head>

<body>
    <p><img src="MAMP-PRO-Logo.png" id="logo" alt="MAMP PRO Logo" width="250" height="49" /></p>

<?php if ($str_language == 'de'): ?>

    <p class="text"><strong>Der virtuelle <span lang="en" xml:lang="en">Host</span> wurde erfolgreich eingerichtet.</strong></p>
    <p class="text">Wenn Sie diese Seite sehen, dann bedeutet dies, dass der neue virtuelle <span lang="en" xml:lang="en">Host</span> erfolgreich eingerichtet wurde. Sie können jetzt Ihren <span lang="en" xml:lang="en">Web</span>-Inhalt hinzufügen, diese Platzhalter-Seite<sup><a href="#footnote_1">1</a></sup> sollten Sie ersetzen <abbr title="beziehungsweise">bzw.</abbr> löschen.</p>
    <p class="text">
        Server-Name: <samp><?php echo $_SERVER['SERVER_NAME']; ?></samp><br />
        Document-Root: <samp><?php echo $_SERVER['DOCUMENT_ROOT']; ?></samp><br />
        Protokoll: <samp>
        <?php
            if (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] != 'off') {
                echo 'https';
            } else {
                echo 'http';
            }
        ?>
        </samp>
    </p>
    <p class="text" id="footnote_1"><small><sup>1</sup> Dateien: <samp>index.php</samp> und <samp>MAMP-PRO-Logo.png</samp></small></p>
    <hr />
    <p class="text">This page in: <?php echo $str_available_languages; ?></p>

<?php elseif ($str_language == 'en'): ?>

    <p class="text"><strong>The virtual host was set up successfully.</strong></p>
    <p class="text">If you can see this page, your new virtual host was set up successfully. Now, web content can be added and this placeholder page<sup><a href="#footnote_1">1</a></sup> should be replaced or deleted.</p>
    <p class="text">
        Server name: <samp><?php echo $_SERVER['SERVER_NAME']; ?></samp><br />
        Document root: <samp><?php echo $_SERVER['DOCUMENT_ROOT']; ?></samp><br />
        Protocol: <samp>
        <?php
            if (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] != 'off') {
                echo 'https';
            } else {
                echo 'http';
            }
        ?>
        </samp>
    </p>
    <p class="text" id="footnote_1"><small><sup>1</sup> Files: <samp>index.php</samp> and <samp>MAMP-PRO-Logo.png</samp></small></p>
    <hr />
    <p class="text">Diese Seite auf: <?php echo $str_available_languages; ?></p>

<?php endif; ?>

</body>
</html>

<script>
      //操作数
      console.log(2 || 1);
      console.log(true || 1);
      var a = 10;

      console.log(a++);
      console.log(++a);
      console.log(0.1 + 0.2);
      console.log(Number(" "), Number(""));
      console.log(Boolean(""), Boolean(" "));
    </script>


6.2
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>购物车页面</title>
    <style>
      img {
        width: 30px;
        height: 30px;
      }
    </style>
  </head>
  <body>
    <ul id="cartList"></ul>
    <script src="../cookie.js"></script>
    <script>
      let oUl = document.getElementById("cartList");
      let productDatas = JSON.parse(getCookie("productDatas"));
      if (getCookie("cartDatas")) {
        var cartDatas = JSON.parse(getCookie("cartDatas"));
        let str = "";
        for (var id in cartDatas) {
          for (var i = 0; i < productDatas.length; i++) {
            if (id == productDatas[i].id) {
              str += `<li>
                            <img src="${productDatas[i].imgsrc}">
                            <span>${productDatas[i].title}</span><span>${cartDatas[id]}</span>
                        </li>`;
            }
          }
        }
        oUl.innerHTML = str;
      } else {
        oUl.innerHTML = "购物车里什么都没有，快去抢购吧";
      }
    </script>
  </body>
</html>


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>商品列表</title>
    <style>
      ul,
      li,
      p {
        padding: 0;
        margin: 0;
      }
      img {
        display: block;
        border: none;
      }
      #prodList li {
        list-style: none;
        float: left;
        margin: 10px;
        width: 220px;
        padding: 10px;
        border: 1px solid #cecece;
      }
      #prodList li p {
        margin: 10px 0;
      }
      #prodList li input {
        border: none;
        width: 120px;
        height: 40px;
        background-color: red;
        color: white;
      }
    </style>
  </head>
  <body>
    <a href="cartList.html">购物车</a>
    <div>
      <ul id="prodList">
        <li>
          <img src="1.jpg" />
          <p>商品标题</p>
          <p>价格</p>
          <input type="button" value="加入购物车" />
        </li>
        <li>
          <img src="2.jpg" />
          <p>商品标题</p>
          <p>价格</p>
          <input type="button" value="加入购物车" />
        </li>
        <li>
          <img src="3.jpg" />
          <p>商品标题</p>
          <p>价格</p>
          <input type="button" value="加入购物车" />
        </li>
      </ul>
    </div>
    <script src="../cookie.js"></script>
    <script>
      //商品列表里的数据 实际上 来源数据库，但是现在没有数据库，从cookie里面取数据，在取之前得先把数据塞到cookie里
      //考虑一个问题  数据是什么样的
      //一件商品信息{id:10001,title:"四件套",price:100,imgsrc:"1.jpg"}
      //三件商品信息
      /* let productDatas = [
        { id: 10001, title: "四件套", price: 100, imgsrc: "1.jpg" },
        { id: 10002, title: "四件套", price: 200, imgsrc: "2.jpg" },
        { id: 10003, title: "四件套", price: 300, imgsrc: "3.jpg" },
      ]; */
      //在正式工作之前，先把数据存到cookie里
      /* setCookie("productDatas", JSON.stringify(productDatas), 7); */

      //1.从cookie里去数据，展示到页面
      let productDatas = JSON.parse(getCookie("productDatas"));
      let oUl = document.getElementById("prodList");
      let str = "";
      productDatas.forEach((item) => {
        str += `
        <li>
          <img src="${item.imgsrc}" />
          <p>${item.title}</p>
          <p>${item.price}</p>
          <input type="button" class="addBtn" data-id="${item.id}" value="加入购物车" />
        </li>
        `;
      });
      oUl.innerHTML = str;

      //2.加入购物车 存数据 {10001:1,10002:5,10003:2}
      //let cartDatas = {};
      if (getCookie("cartDatas")) {
        var cartDatas = JSON.parse(getCookie("cartDatas"));
      } else {
        var cartDatas = {};
      }
      let aBtns = document.querySelectorAll(".addBtn");
      for (let i = 0; i < aBtns.length; i++) {
        aBtns[i].onclick = function () {
          let id = this.getAttribute("data-id");
          //不同id，增属性，相同id，增数量
          if (cartDatas[id] == undefined) {
            cartDatas[id] = 1;
          } else {
            cartDatas[id]++;
          }
          console.log(cartDatas);
          setCookie("cartDatas", JSON.stringify(cartDatas), 7);
        };
      }
    </script>
  </body>
</html>


<body>
    用户名:<input type="text" /><br />
    密码:<input type="password" /><br />
    <input type="checkbox" />七天免登录<br />
    <input type="button" value="登录" />
    <script src="cookie.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.16.0/js/md5.js"></script>
    <script>
      //点击登录按钮时，判断复选框是否选中，如果选中，把用户名和密码存起来，存哪儿，存cookie
      let aInput = document.querySelectorAll("input");

      aInput[3].onclick = function () {
        if (aInput[2].checked) {
          setCookie("username", aInput[0].value, 7);
          setCookie("password", md5(aInput[1].value), 7);
        } else {
          removeCookie("username");
          removeCookie("password");
        }
      };
      //存cookie是为了什么，是为了下次打开登录页面时用户名和密码自动填充到文本框里

      if (getCookie("username")) {
        aInput[0].value = getCookie("username");
        aInput[1].value = getCookie("password");
        aInput[2].checked = true;
      }
    </script>
  </body>

 网络通信中七层模型 ISO -> OSI/RM 
        物理层
        数据链路层
        网络层 IP
        传输层 TCP 三次握手
        会话层
        表示层
        应用层 HTTP超文本传输协议 无状态协议

        TCP/IP 四层参考模型
        网络接口层
        网络层
        传输层
        应用层

//cookie 存储在用户本地终端的数据
      //增删改查
      //1. 添加cookie 默认路径 在当前目录下 默认有效期 浏览器存续期间
      /* document.cookie = "username=yanxingyu"; */
      //2.设置cookie的有效期和路径
      //2.1 expires
      /* let oDate = new Date();
      //7天之后的日期
      oDate.setDate(oDate.getDate() + 7);
      document.cookie = "username=duanfanchao;expires=" + oDate; */
      //2.2 路径设置
      /* let oDate = new Date();
      oDate.setDate(oDate.getDate() + 7);
      document.cookie = "username=duanfanchao;expires=" + oDate + ";path=/"; */

      //2.3 同名cookie会覆盖
      /* document.cookie = "user=aaa";
      document.cookie = "user=bbb"; */

      //2.4 cookie大小在4k左右，cookie条数在170条左右
      /* for (var i = 0; i < 200; i++) {
        document.cookie = i + "=a" + i;
      } */

      //取cookie
      //console.log(document.cookie);//取到所有的cookie
      //取单个cookie的值，这也是一般使用的情形
      /* let strCookie = document.cookie;
      let arrCookie = strCookie.split("; ");
      //console.log(arrCookie);
      for (var i = 0; i < arrCookie.length; i++) {
        let arr = arrCookie[i].split("=");
        if (arr[0] == "198") {
          console.log(arr[1]);
        }
      } */

      //删除cookie
      /* let oDate = new Date();
      oDate.setDate(oDate.getDate() - 7);
      document.cookie = "194=111;expires=" + oDate; */

      //cookie存值和取值 都是字符串
      document.cookie = "data=111";
      let data = { a: 1, b: 2 };
      document.cookie = "data=" + data;
      //如果存的值是一个JSON对象就要提前转成json字符串  需要通过JSON.stringify()

      //如果取的值是一个json字符串，需要用JSON.parse()转成json对象进行进一步处理

      console.log(JSON.stringify({ a: 1 }));
      console.log(JSON.parse('{"a":1}'));

function setCookie(name, val, n) {
  let oDate = new Date();
  oDate.setDate(oDate.getDate() + n);
  document.cookie = name + "=" + escape(val) + ";expires=" + oDate;
}
function getCookie(name) {
  let strCookie = document.cookie;
  let arrCookie = strCookie.split("; ");

  for (let i = 0; i < arrCookie.length; i++) {
    let arr = arrCookie[i].split("=");
    if (arr[0] == name) {
      return unescape(arr[1]);
    }
  }
}
function removeCookie(name) {
  setCookie(name, 1, -1);
}


<script>
      //封装函数时考虑的要素 1.功能 2.参数 3.返回值
      //增加和修改
      //name表示cookie名，val表示cookie值，n表示n天后过期
      function setCookie(name, val, n) {
        let oDate = new Date();
        oDate.setDate(oDate.getDate() + n);
        document.cookie = name + "=" + escape(val) + ";expires=" + oDate;
      }

      setCookie("username", "admin", 7);
      setCookie("name", "刘枫", 7);

      //获取
      function getCookie(name) {
        let strCookie = document.cookie;
        let arrCookie = strCookie.split("; ");

        for (let i = 0; i < arrCookie.length; i++) {
          let arr = arrCookie[i].split("=");
          if (arr[0] == name) {
            return unescape(arr[1]);
          }
        }
      }

      console.log(getCookie("username"));
      console.log(getCookie("name"));

      //删除
      function removeCookie(name) {
        setCookie(name, 1, -1);
      }
      removeCookie("username");
      removeCookie("data");
    </script>

<script>
      console.log(escape("贾德祯"));
      console.log(unescape("%u8D3E%u5FB7%u796F"));
      document.cookie = "username=假的真";
      console.log(escape("abc"));
      console.log(unescape());
      document.cookie="username=ABC";
    </script>

# 连接数据库服务器

1. 通过 wamp/mamp/phpstudy 等软件自带的 phpMyadmin 来进行
2. 输入用户名和密码链接数据库服务器，用户名默认为 root，密码默认为 root 或者空
3. 创建数据库（database）
4. 创建数据表（table）
5. 创建字段
6. 插入数据（记录）
7. 数据的增删改查

### 主键 一个表里只允许一个主键，主键的值唯一


<?php
$conn = new mysqli("localhost","root","root");
if($conn->connect_error){
    die("数据库连接失败".$conn->connect_error);
}

echo "数据库连接成功";
?>

<?php
//include include_once  require  require_once
//引入conn文件
include_once("conn.php"); 

//创建数据库，使用SQL语句
$sql = "create database myDB";
//执行sql语句
if($conn->query($sql)){
    echo "数据库创建成功";
}else{
    echo "数据库创建失败".$conn->error;
}
?>

<?php
include "conn.php";
//选择数据库
$conn->select_db("myDB");
//SQL语句创建表
$sql = "CREATE TABLE MyGuests (
    id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
    firstname VARCHAR(30) NOT NULL,
    lastname VARCHAR(30) NOT NULL,
    email VARCHAR(50),
    reg_date TIMESTAMP 
)";
//执行SQL语句 

if($conn->query($sql)){
    echo "数据表创建成功";
}

?>

<?php
include "conn.php";
//选择数据库
$conn->select_db("myDB");
//SQL语句 删除数据
$sql = "delete from myguests where id = 1";
//执行插入
if($conn->query($sql)){

}else{
    echo $conn->error;
}


?>

<?php
include "conn.php";
//选择数据库
$conn->select_db("myDB");
//SQL语句 插入数据
$sql = "insert into myguests (firstname,lastname,email) values('张','翔云','zxy@163.com')";
//执行插入
$conn->query($sql);

?>

<?php
include "conn.php";
//选择数据库
$conn->select_db("myDB");
//SQL语句 插入数据
$sql = "insert into myguests (firstname,lastname,email) values('张','翔云','zxy@163.com'),('zhang','jingpu','zjp@163.com')";
//执行插入
$conn->query($sql);

?>

<?php
include "conn.php";
//选择数据库
$conn->select_db("myDB");
//SQL语句 取表里完整的数据
//$sql = "select * from myguests";
//取表里某些特定字段的值
/* $sql = "select firstname,lastname from myguests"; */
//根据条件取数据
/* $sql = "select * from myguests where id > 2"; */
//排序
$sql = "select * from myguests order by id desc";
//执行之后，保存查询结果
$result = $conn->query($sql);
if($result->num_rows>0){
    while($row = $result->fetch_assoc()){
        //echo $row["lastname"];
        //var_dump($row);
        echo $row["id"];
    }
}

?>

<?php
include "conn.php";
//选择数据库
$conn->select_db("myDB");
//SQL语句 更新数据
/* $sql = "update myguests set firstname='shi' where id = 1"; */
$sql = "update myguests set firstname='shi'";
//执行插入
if($conn->query($sql)){

}else{
    echo $conn->error;
}


?>


6.3
Ajax，是 Asynchronous JavaScript + XML 的简写。指一种创建交互式网页应用的网页开发的技术。 通过异步模式，提升了用户体验。优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用。Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大量用户下的服务器负载。 Ajax最大的特点就是局部刷新。 Ajax 技术核心是 XMLHttpRequest 对象(简称 XHR) 创建Ajax对象     new XMLHttpRequest();      new ActiveXObject('Microsoft.XMLHTTP')     //IE6 
open() xhr.open('get', 'demo.php', true); //对于 demo.php 的 get 请求，false 同步 三个参数： 要发送的请求类型   (get 、post)、请求的 URL 和表示是否异步 Post：xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhr.send(data); 发送请求      send()       接收服务器返回的信息        onreadystatechange readyState 0  请求未初始化	1 服务器连接己建立 2  请求已接收	3 处理请求，响应中 4  响应就绪 
status         HTTP 状态码 常见状态码 200 - 请求成功 301 -Moved Permanently 资源（网页等）被永久转移到其它URL 304 -Not Modified 使用缓存文档 404 - 请求的资源（网页等）不存在 500 - 内部服务器错误 状态码分类 1**信息，服务器收到请求，需要请求者继续执行操作	2**成功，操作被成功接收并处理 3**重定向，需要进一步的操作以完成请求	4**客户端错误，请求包含语法错误或无法完成请求 5**服务器错误，服务器在处理请求的过程中发生了错误 
回调函数 作为一个函数的参数的进行传递，并在函数内部通过指针进行调用的函数   编写PHP服务端接口    //A
      //阻塞 非阻塞  同步 异步
      //同步：
      //异步：
      //J
      //X

      //优势：局部刷新
      /* 
    <person>
        <name>huliangliang</name>
        <age>20</age>
    </person>
    {name:"hliangliange",age:20}

 <script>
      //1.创建ajax实例
      /* var xhr = new XMLHttpRequest();
      var xhr = new ActiveXObject("Microsoft.XMLHTTP"); */
      //兼容性
      if (window.XMLHttpRequest) {
        var xhr = new XMLHttpRequest();
      } else {
        var xhr = new ActiveXObject("Microsoft.XMLHTTP");
      }
      //2.准备工作 请求数据  接口url 请求类型type

      xhr.open("get", "data.json", true);

      //3.发送请求
      xhr.send();
      //4.取响应数据
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
          if (xhr.status == 200) {
            //数据过来之后，如何处理，是根据需要来定，可能需要1行代码实现，也可能很多很多行代码实现
            console.log(xhr.responseText);
          } else {
            console.log("加载失败，请重试");
          }
        }
      };
    </script>
data json
//只针对于get请求
      function ajax(url, fnSuccess, fnError) {
        if (window.XMLHttpRequest) {
          var xhr = new XMLHttpRequest();
        } else {
          var xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }

        xhr.open("get", url);
        xhr.send();
        xhr.onreadystatechange = function () {
          if (xhr.readyState == 4) {
            if (xhr.status == 200) {
              var data = xhr.responseText;
              fnSuccess(data);
            } else {
              fnError();
            }
          }
        };
      }
Ajax.js
function ajax(url, fnSuccess, fnError) {
  if (window.XMLHttpRequest) {
    var xhr = new XMLHttpRequest();
  } else {
    var xhr = new ActiveXObject("Microsoft.XMLHTTP");
  }

  xhr.open("get", url);
  xhr.send();
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
      if (xhr.status == 200) {
        var data = xhr.responseText;
        fnSuccess(data);
      } else {
        fnError();
      }
    }
  };
}


<body>
    <ul></ul>
    <script src="ajax.js"></script>
    <script>
      var oUl = document.querySelector("ul");
      ajax("data.json", foo, bar);
      //成功时的处理函数foo
      function foo(a) {
        a = JSON.parse(a);
        var str = "";
        for (var i = 0; i < a.length; i++) {
          str += `<li>${a[i]}</li>`;
        }
        oUl.innerHTML = str;
      }
      function bar() {
        alert("失败了");
      }
    </script>
  </body>
 
 <body>
    <input type="text" name="username" />
    <input type="button" value="提交" />
    <script>
      var aInput = document.querySelectorAll("input");
      aInput[1].onclick = function () {
        //1.创建ajax实例
        /* var xhr = new XMLHttpRequest();
      var xhr = new ActiveXObject("Microsoft.XMLHTTP"); */
        //兼容性
        if (window.XMLHttpRequest) {
          var xhr = new XMLHttpRequest();
        } else {
          var xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //2.准备工作 请求数据  接口url 请求类型type

        xhr.open("post", "05_test.php", true);
        xhr.setRequestHeader(
          "Content-type",
          "application/x-www-form-urlencoded"
        );
        //3.发送请求
        xhr.send("username=" + aInput[0].value);
        //4.取响应数据
        xhr.onreadystatechange = function () {
          if (xhr.readyState == 4) {
            if (xhr.status == 200) {
              //数据过来之后，如何处理，是根据需要来定，可能需要1行代码实现，也可能很多很多行代码实现
              console.log(xhr.responseText);
            } else {
              console.log("加载失败，请重试");
            }
          }
        };
      };
    </script>
  </body>

<?php
//echo "123";
$name = $_POST["username"];
echo "hello".$name;
?>


 //1.既能适应get请求也能适应post请求
      //2.既能处理不带数据的请求也能处理附加数据的请求
      /* 
    参数：type 请求方式 get/post 必传
        url 请求地址  必传
        data 附加的数据（向后台传递的数据）
        success 请求成功时的回调函数 必传
        error 请求失败时的回调函数
    */

      //向服务端发送get请求，如果需要附加数据，这个数据放到url后面 demo.php?username=aaa&password=111
      //向服务端发送post请求，如果需要附加数据，这个数据放到请求体里，具体体现在xhr.send('username=aaa&password=111');

      //{username:"aaa",password:1111}

      function ajax(type, url, data, success, error) {
        // 注意 无论是get还是post 都有相同部分代码
        if (window.XMLHttpRequest) {
          var xhr = new XMLHttpRequest();
        } else {
          var xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //将{username:"aaa",password:111}变成username=aaa&password=111
        var str = "";
        for (var i in data) {
          str += i + "=" + data[i] + "&";
        }
        //将结尾的&替换成空字符
        str = str.replace(/&$/, "");

        //在不同的地方加判断
        if (type == "get") {
          xhr.open("get", url + "?" + str);
          xhr.send();
        }
        if ((type = "post")) {
          xhr.open("post", url);
          xhr.setRequestHeader(
            "Content-type",
            "application/x-www-form-urlencoded"
          );
          xhr.send(str);
        }

        xhr.onreadystatechange = function () {
          if (xhr.readyState == 4) {
            if (xhr.status == 200) {
              var data = xhr.responseText;
              success(data);
            } else {
              error();
            }
          }
        };
      }

function ajax(obj) {
  // 注意 无论是get还是post 都有相同部分代码
  if (window.XMLHttpRequest) {
    var xhr = new XMLHttpRequest();
  } else {
    var xhr = new ActiveXObject("Microsoft.XMLHTTP");
  }
  //将{username:"aaa",password:111}变成username=aaa&password=111
  var str = "";
  for (var i in obj.data) {
    str += i + "=" + obj.data[i] + "&";
  }
  //将结尾的&替换成空字符
  str = str.replace(/&$/, "");

  //在不同的地方加判断
  //toLowerCase()将字母转小写toUpperCase()将字母转大写
  if (obj.type.toLowerCase() == "get") {
    if (str == "") {
      xhr.open("get", obj.url);
    } else {
      xhr.open("get", obj.url + "?" + str);
    }
    xhr.send();
  }
  if (obj.type.toLowerCase() == "post") {
    xhr.open("post", obj.url);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.send(str);
  }

  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
      if (xhr.status == 200) {
        var data = xhr.responseText;
        obj.success(data);
      } else {
        if (obj.error) {
          obj.error();
        }
      }
    }
  };
}




6.4
珎珎啊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
分享Ajax创建简单实例代码
10-23
主要为大家分享了Ajax创建简单实例代码，学习Ajax如何创建简单实例，感兴趣的小伙伴们可以参考一下
ajax实例
01-08
在AJAX实例中，我们看到一个使用JavaScript库jQuery的示例。jQuery提供了简化AJAX操作的API，例如`$.ajax()`方法。这个方法允许我们配置各种参数来定制请求。以下是对`$.ajax()`方法中各个参数的详细解释： 1. `...
Ajax原生实例
渔舟唱晚，响穷彭蠡之滨
10-24 465
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort...
js调用ajax案例2，使用ok
LongtengGensSupreme博客
11-14 151
XMLHttpRequest 是 AJAX 的基础。 XMLHttpRequest 对象 所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。 XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 创建 XMLHttpRequest 对象 所有现代浏览器（...
Ajax创建和实例
weixin_34348111的博客
03-16 88
2019独角兽企业重金招聘Python工程师标准>>> ...
AJAX的创建
yezi__6的博客
08-29 497
AJAX ajax=（异步JavaScript和XML) 指一种创建交互式网页应用的网页开发技术。 通过后台与服务器进行少量的数据交换，实现网页异步更新。 ajax不需要任何浏览器插件，但需要用户允许javascript在浏览器上执行。 ajax的优点 ●不需要重新加载整个页面的情况下，可以与服务器交换数据并更新部分网络内容；传统的网页（不使用AJAX）如果需要更新内容，必须重新...
js如何创建ajax,自己如何创建ajax？创建ajax的步骤详解（附实例解析）
weixin_34088048的博客
08-05 876
本篇文章主要讲述了关于如何自己创建一个ajax的案例，现在就让我们一起来看看这篇文章吧学习ajax一段时间了，现在来总结一下ajax的构建与功能。ajax的用处是向后台请求数据的，其特点是异步请求数据(无刷新读取数据)，在ajax没有出现之前，如果填写一个项目比较多的表单对用户来说简直是一个噩梦，如果中间哪一个环节填错了，则在最终提交的时候出现报错，然后就是需要重新填写，经过几次填写过后用户就失去...
Ajax介绍以及实例
typ的blog，记录工作中的问题、学习中的笔记、生活中的感想。
06-20 1137
Ajax实例讲解
php的ajax简单实例
10-26
本篇文章主要是对php的ajax简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
ajax创建实例.docx
11-26
以下是对Ajax实例创建及其相关知识点的详细解释： 1. **Ajax实例创建**： 在JavaScript中，使用jQuery库创建Ajax实例是最常见的做法。在给定的例子中，可以看到使用了`$.ajax()`函数来创建一个Ajax请求。首先，...
简单ASP+AJAX实例
10-30
"简单ASP+AJAX实例"是一个教学资源，旨在帮助新手了解如何结合ASP和AJAX来构建无刷新请求功能。在这样的实例中，通常会包含以下几个部分： 1. **ASP后端处理**：使用ASP接收来自客户端的AJAX请求，处理数据（例如...
jQuery的Ajax实例（附完整代码）
热门推荐
Yuan_mingyu的博客
02-02 8万+
目录写在前边什么是AjaxAjax基本结构实例实例1实例2小结 写在前边 作为一个前端刚入门没多久的小白，想在这里分享一下我的学习内容，就算是学习笔记了。因为前端的大部分学习都是通过网站上的教程，所以遇到不懂得问题，也只有求助于网络，通过度娘，了解到了一些论坛、博客。在发现了众多技术大牛的同时，我也发现，一些像我这样的小白，由于能力有限，在查找相关资料的时候，对于大佬的一些操作理解困难，虽说能照猫...
Ajax 是什么? 如何创建一个 Ajax
weixin_47450807的博客
01-25 1134
一、ajax是什么 ajax是2005年2月，第一次正式提出的，它是Asynchronous javascript and xml的缩写，指的是通过 javascript的异步通信，从服务器获取xml文档从中提取数据，再进行更新网页的对应部分，而不用刷新整个网页。 二、创建ajax的步骤如下 1、创建一个XMLHttpRequest对象，也就是创建一个异步调用对象。 2、创建一个新的HTTP请求，并指定该http请求的方法，url以及验证信息。 3、设置http请求状态变化的函数。 4、发送http请求
AJAX（二） 计算机通信协议
maggie_xff
03-07 375
客户端和服务器端要通信如何理解通信协议？参与者：【程序员】 与 【计算机】 两两之间进行通信交流有如下三种组合： 1、程序员---程序员交流方式：汉语、英语、日语。。。 2、程序员---计算机交流方式：JavaScript、c/c++、java、C#、Python。。。 3、计算机---计算机交流方式：http、ftp、smtp/pop。。。协议的本质就是交互双方以约定的的方式进行沟通 多台计算机...
一个使用Go语言和现代Web技术构建跨平台桌面应用程序开源项目
yunmoon的博客
07-10 762
Wails作为一个桥梁，连接强大的Go后端逻辑与丰富的Web前端界面，允许开发者利用两者的最佳特性来开发应用。
Webkit简介以及工作流程
最新发布
读心悦
07-10 221
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
Haproxy搭建Web群集
wkysdhr的博客
07-08 894
Haproxy 是目前比较流行的一种群集调度工具，同类群集调度工具有很多，如LVS 和Nginx。相比较而言，LVS 性能最好，但是搭建相对复杂;Nginx的upstream模块支持群集功能，但是对群集节点健康检查功能不强，高并发性能没有 Haproxy好。
JS混淆基本类型和原理
朴拙科技的博客
07-06 723
混淆技术为JS代码提供了一定程度的保护，但同时也给代码的维护和逆向工程带来了挑战。了解和掌握这些混淆技术的原理和解析方法，可以帮助开发者更好地保护或理解JS代码。然而，需要注意的是，混淆并不是万无一失的安全措施，它更多的是增加了攻击者理解代码的难度。在进行逆向工程时，应始终遵守法律法规，尊重知识产权，不要用于非法目的。
​​ 翻页 上一页/下一页
szzlh123456789的博客
07-09 293
【代码】​​ 翻页 上一页/下一页。
ajax实例html
03-13
下面是一个简单的Ajax实例的HTML代码： ```html <!DOCTYPE html> <title>Ajax Example <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> function getData() { axios.get('...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值