1、Ajax概念以及优势

* 什么是AJAX

* AJAX(Asynchronous JavaScript And XML),(异步 JavaScript 和 XML),中文名:阿贾克斯。是指一种创建异步交互式网页应用的网页开发技术。

* AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术

* 前端通过与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。

* 为什么要使用AJAX

* 更自然、流畅的用户体验,对用户的操作即时响应

* 在不中断用户操作的情况下与Web服务器进行通信

* 更灵敏的响应用户访问,实现近似于桌面应用程序的交互效果

* 通过局部更新页面降低网络流量,提高网络的使用效率

2、同步异步

  同步,可以理解为在执行完一个函数或方法之后,一直等待系统返回值或消息,这时程序是出于阻塞的,

只有接收到返回的值或消息后才往下执行其他的命令。

  异步,执行完函数或方法后,不必阻塞性地等待返回值或消息,只需要向系统委托一个异步过程,

那么当系统接收到返回值或消息时,系统会自动触发委托的异步过程,从而完成一个完整的流程。

3、Ajax 步骤编写

 <script>
//创建对象
let xhr = new XMLHTTPRequest(); xhr.open("get/post","url",是否异步true、false);//一般是true不是的话一般人干不出这种事情
xhr.onreadystatechange = function(){
if(xhr.status==200&&xhr.readystate==4)
fun(xhr.responseText);
}
xhr.send();
function fun(){
.....
}
</script>

4、XMLHTTPRequset兼容写法

<script>
let xhr;
if(window.ActiveXObject){
xhr = new ActiveXObject("Microsoft.XMLHttp");
}else{
xhr = new XMLHTTPRequest();
}
</script>

5、Ajax返回Json

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
</html>
<script>
    let xhr = new XMLHttpRequest();
    xhr.open("GET","testJson.php","true");
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            let myJsonStr = xhr.responseText;
            let myJsonObj = JSON.parse(myJsonStr);
            console.log(myJsonObj.name,myJsonObj.age);
        }
    }
    xhr.send();
</script>
<--testJson.php-->
<?php
    echo '{"name":"laowang","age":18}';
?>

6、AjaxPost

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <input type="text" name="username" id="t1" /><span id="s"></span></br>
        <input type="text" name="pwd" />
    </body>
</html>
<script>    
    let t1 = document.getElementById("t1");
    let s = document.getElementById("s");
    t1.onblur = function() {
        //1.创建对象
        let xhr = new XMLHttpRequest();
        //2.设置连接地址   get方式发送响应
        xhr.open("POST", "isUserExistPost.php", "true");
        //这句话必须抄 post的请求头
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        //3.设置响应事件
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                //5.获取响应字符串
                if (xhr.responseText == "1") {
                    s.innerHTML = "用户名已存在,请重新注册";
                } else {
                    s.innerHTML = "恭喜注册成功";
                }
            }
        }         //4.发送  通过send传递参数
        //多个参数依然用&组装 "user_name="+ userName +"&user_age="+ userAge ;
        xhr.send("username=" + t1.value);
    }
</script> <?php
    header("Content-type:text/html;charset=utf-8");
    //连接数据库
    $conn = mysql_connect("localhost","root","root");
    //选择数据库
    mysql_select_db("xah51901");
    //获取请求过来的数据
    $name = $_POST["username"];
    
    $reslut = mysql_query("select * from student where stuName = '$name'");
    
    $rows = mysql_num_rows($reslut);
    
    if($rows == 1){
        echo "1";
    }else{
        echo "0";
    }
?>

好久没更新了,我回来了---Ajax的更多相关文章

  1. 京东首页原生----js制作|css动画|js动画|计时器--轮播图(好久没更新,这两天闲的蛋疼做个京东页面分辨率1366*768,919京东,适应没调!)要文件加关注找我要哦!

  2. 好久没来了,重出江湖,共享个python34+pyqt+pyserial串口工具源码

    真的是好久没来了,写博客对我来说还真是难坚持下来,热度一过就忘了,就算什么时候想起来也懒得去敲一个字,这次真不知道能坚持多久,随心吧,想写写,不想写也不勉强自己. 最近由于工作调试需要自己写了一个带图 ...

  3. kotlin电商学习记录,好久没来逛逛了

    好久没来,一直做毕业设计,用kotlin写一个基于以图搜图的购物app,现在又赶上实习,内容多,时间少,不过前途光明并由贵人指点.加油 kotlin电商学习记录 技术选型 视图层 kotlin-and ...

  4. 好久没玩docker了,温下手

    好久没玩docker了,温下手 安装 Docker Docker 软件包已经包括在默认的 CentOS-Extras 软件源里.因此想要安装 docker,只需要运行下面的 yum 命令: yum i ...

  5. mybatis update数据时无异常但没更新成功;update异常时如数据超出大小限制,造成死锁

    没更新的问题原因: sqlSession.commit(); 没执行commit,但官方文档里有这样的描述:“默认情况下 MyBatis 不会自动提交事务,除非它侦测到有插入.更新或删除操作改变了数据 ...

  6. js进阶解决浏览器缓存不能自动更新的问题(在ajax的url上带上一个参数,可以是日期,或者是随机数)(随机数Math.random)(取得日期的毫秒数:new Date().getTime();)

    js进阶解决浏览器缓存不能自动更新的问题(在ajax的url上带上一个参数,可以是日期,或者是随机数)(随机数Math.random)(取得日期的毫秒数:new Date().getTime();) ...

  7. 好久没玩laravel了,今天玩下Laravel项目迁移步骤

    .在新的目录中克隆git远程版本库 .执行composer install安装依赖 .执行php artisan key:generate生成key 好久没玩laravel了,今天玩下Laravel项 ...

  8. 好久没写原生的PHP调用数据库代码了分享个

    好久没写原生的PHP代码调用数据库了 eader("Content-type: text/html; charset=utf-8"); $time=$symptoms=$attr= ...

  9. vue修改elementUI的分页组件视图没更新问题

    转: vue修改elementUI的分页组件视图没更新问题 今天遇到一个小问题平时没留意,el-pagination这个分页组件有一个属性是current-page当前页.今天想在methods里面手 ...

随机推荐

  1. python学习笔记(十六)-Python多线程多进程

    一.线程&进程 对于操作系统来说,一个任务就是一个进程(Process),比如打开一个浏览器就是启动一个浏览器进程,打开一个记事本就启动了一个记事本进程,打开两个记事本就启动了两个记事本进程, ...

  2. django 使用装饰器验证用户登陆

    使用装饰器验证用户登陆,需要使用@method_decorator 首先需引用,method_decorator,并定义一个闭包 from django.utils.decorators import ...

  3. Mysql explain中key_len的作用及计算规则

    key_len表示索引使用的字节数,根据这个值可以判断索引的使用情况,特别是在组合索引的时候,判断该索引有多少部分被使用到非常重要. 在计算key_len时,下面是一些需要考虑的点: 索引字段的附加信 ...

  4. 超简洁,玩转springboot 之springboot自定义start工程

    springboot 的start 建一个父工程 不需要其他目录结构,需要注意的是把type的类型改为POM 这样就没有工程的目录结构 因为父工程不需要 给父工程的pom添加依赖 <depend ...

  5. 如何发现 Kubernetes 中服务和工作负载的异常

    大家好,我是来自阿里云的李煌东,今天由我为大家分享 Kubernetes 监控公开课的第二节内容:如何发现 Kubernetes 中服务和工作负载的异常. 本次分享由三个部分组成: 一.Kuberne ...

  6. PTA实验11-1-7 藏头诗 (15分)

    实验11-1-7 藏头诗 (15分) 本题要求编写一个解密藏头诗的程序. 输入格式: 输入为一首中文藏头诗,一共四句,每句一行.注意:一个汉字占两个字节. 输出格式: 取出每句的第一个汉字并连接在一起 ...

  7. 【c++ Prime 学习笔记】第9章 顺序容器

    一个容器是特定类型对象的集合 顺序容器中元素的顺序与其加入容器的位置对应 关联容器中元素的顺序由其关联的关键字决定,关联容器分为有序关联容器和无序关联容器 所有容器类共享公有接口,不同容器按不同方式扩 ...

  8. VS Code C/C++开发环境配置

    VS Code C/C++开发环境配置 一.安装 ​ 1.前往官网下载安装即可 https://code.visualstudio.com/ ​ 2.进入VS Code安装如下插件 二.C/C++开发 ...

  9. Java序列初始化

    1.数组 Java数组可以用元素集合初始化: char[] c=new char[]{'.','.','.','.'}; 而想要用指定数量的相同元素来初始化数组,可以使用Arrays.fill()方法 ...

  10. 实用小工具:screen

    实用小工具:screen 首先,吹爆screen screen,实现了不间断的会话服务,通过SSH连接至远程服务器,当使用了screen开启的会话,不会因为你断开SSH而中断在远程服务器上运行的命令. ...