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. curl 理解

    PHP使用CURL详解   CURL是一个非常强大的开源库,支持很多协议,包括HTTP.FTP.TELNET等,我们使用它来发送HTTP请求.它给我 们带来的好处是可以通过灵活的选项设置不同的HTTP ...

  2. Django框架进阶

    Django ORM那些相关操作 Django中ORM介绍和字段及字段参数 Cookie.Session和自定义分页 Django 中间件 AJAX Django form表单 Django的认证系统 ...

  3. AVS 端能力之音频播放模块

    功能简介 音频播放 音频流播放 URL文件播放 播放控制 播放 暂停 继续 停止 其它功能(AVS服务器端实现) 支持播放列表 支持上一首下一首切换 支持电台 事件指令集 AudioPlayer 端能 ...

  4. P7295-[USACO21JAN]Paint by Letters P【平面图欧拉公式】

    正题 题目链接:https://www.luogu.com.cn/problem/P7295 题目大意 给出\(n*m\)的网格,每个格子上有字母,相同字母的四联通相邻格子为连通,每次询问一个子矩阵求 ...

  5. 什么？你还不明白自动化的POM设计模式？

    POM简介.POM优势.如何设计POM POM简介 Page Object Model (POM) 直译为"页面对象模型",这种设计模式旨在为每个待测试的页面创建一个页面对象(cl ...

  6. 01 ASP.NET Core 3 启动过程（一）

    ASP.NET Core 3 启动过程(一) 最近又忙于各种扯淡,今天来一个需求,明天又来一个需求,后天需求又变了,这可能是很多人遇到的情况.正在紧张的忙碌着,突然一个信息把所有计划打乱了," ...

  7. Mybatis里@InsertProvider、@UpdateProvider方法里使用if test标签

    例如: ··· insert into TEST1(<if test="base_id!=null and base_id!=''">base_id,</if&g ...

  8. MySQL8.0.20下载与安装详细图文教程，mysql安装教程

    MySQL下载与安装(8.0.20版)教程 mysql安装包+mysql学习视频+mysql面试指南视频教程 下载地址: 链接:https://pan.baidu.com/s/1FmLFhGlajBQ ...

  9. Serverless 解惑——函数计算如何安装字体

    前言 首先介绍下在本文出现的几个比较重要的概念: 函数计算(Function Compute):函数计算是一个事件驱动的服务,通过函数计算,用户无需管理服务器等运行情况,只需编写代码并上传.函数计算准 ...

  10. Winform同步调用异步函数死锁原因分析、为什么要用异步

    1.前言 几年前,一个开发同学遇到同步调用异步函数出现死锁问题,导致UI界面假死.我解释了一堆,关于状态机.线程池.WindowsFormsSynchronizationContext.Post.co ...