zoukankan      html  css  js  c++  java
  • XMLHttpRequest实现ajax

    ajax技术:可以不刷新页面来更改页面内容;

    XMLHttpRequest:可以实现浏览器和页面的数据交互;

    XMLHttpRequest对象的属性和方法:https://www.w3school.com.cn/xml/xml_http.asp

    demo:

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <meta charset="UTF-8">
     5 <title>Insert title here</title>
     6 <script src="/assets/js/jquery.min.js"></script>
     7 </head>
     8 <body>
     9 <a href="helloajax.text" >hello ajax get </a>
    10 <br/>
    11 <a href="helloajax.text" >hello ajax post </a>
    12 <script>
    13 $(function(){
    14     $("a:first").click(function(){
    15         //ajax原生
    16         var request = new XMLHttpRequest();
    17         var method = "GET";
    18         var url = "helloajax.text";
    19         request.open(method,url);
    20         request.send(null);
    21         request.onreadystatechange = function(){
    22             if(request.readyState == 1){
    23                 console.log("openging");
    24             }if(request.readyState == 2){
    25                 console.log("sending");
    26             }if(request.readyState == 3){
    27                 console.log("recived");
    28             }if(request.readyState == 4){
    29                 console.log("loaded");
    30                 if(request.status == 200){
    31                     console.log(request.responseText);
    32                 }
    33             }
    34             
    35         }
    36         return false;
    37     })
    38     $("a:last").click(function(){
    39         //ajax原生
    40         var request = new XMLHttpRequest();
    41         var method = "post";
    42         var url = "helloajax.text";
    43         request.open(method,url);
    44         request.send("name='a'");//post传参
    45         request.onreadystatechange = function(){
    46             if(request.readyState == 1){
    47                 console.log("openging");
    48             }if(request.readyState == 2){
    49                 console.log("sending");
    50             }if(request.readyState == 3){
    51                 console.log("recived");
    52             }if(request.readyState == 4){
    53                 console.log("loaded");
    54                 if(request.status == 200){
    55                     console.log(request.responseText);
    56                 }
    57             }
    58             
    59         }
    60         return false;
    61     })
    62 })
    63 
    64 </script>
    65 </body>
    66 </html>

    详情:

  • 相关阅读:
    git ssh key创建和github使用
    PHP7安装pdo_mysql扩展
    linux + centos 安装php7.2.7 + swoole 4.0.3
    linux 安装 sphinx+mariadb
    《高效会议的“九三”法则— 向三星学会如何开好会议》
    java高级教程 注入装配问题
    java高级教程 圆 圆柱 面积
    关于二叉树和栈
    用层序遍历求二叉树的wpl值
    线索二叉树的构造
  • 原文地址:https://www.cnblogs.com/lixiuming521125/p/13781387.html
Copyright © 2011-2022 走看看