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. django 如何在HMTL中使用媒体media_url

    django 如何在HMTL中使用媒体media_url中指定的路径 第一种: 一. setting.py里,一般图片或者文件上传路径都是是以下设置, MEDIA_URL = '/media/'    ...

  2. sunny 内网穿透使用。

    启动方法:

  3. 『GoLang』控制结构

    条件语句 if 是用于测试某个条件(布尔型或逻辑型)的语句,如果该条件成立,则会执行if后由大括号括起来的代码块,否则就忽略该代码块继续执行后续的代码. if condition { // do so ...

  4. 在自己的项目中使用PCL

    在自己的项目中使用PCL项目设置:1.创建cpp文件,如pcd_write.cpp,文件内容如下例: #include <iostream>#include <pcl/io/pcd_ ...

  5. 定要过python二级 第三套

    第一模块   基础操作(共三道题) 1. 安装python 包  我在c  盘打开  但是它给我安装到了d盘得  anaconda3 下面  关键是  我在c盘  打开python .exe   创建 ...

  6. AT4120-[ARC096D]Sweet Alchemy【贪心,背包】

    正题 题目链接:https://www.luogu.com.cn/problem/AT4120 题目大意 给出\(n\)个物品和一个容量\(m\),第\(i\)个物品体积为\(c_i\).除了第一个物 ...

  7. YbtOJ#853-平面标记【整体二分,凸壳】

    正题 题目链接:http://www.ybtoj.com.cn/contest/119/problem/3 题目大意 给出\(n\)个点\((x_i,y_i)\),\(m\)次给出\((k_i,a_i ...

  8. GIT打补丁 - patch和diff应用

    一. 准备工作: [root@guangzhou gittest]# git br * master [root@guangzhou gittest]# git chk -b patch-test1 ...

  9. Docker-初见

    目录 Docker概述 Docker历史 Docker Docker的基本组成 Docker安装 使用流程 底层原理 Docker的常用命令 Portainer 可视化面板安装 镜像原理之联合文件系统 ...

  10. bzoj3073Journeys（线段树优化最短路）

    这里还是一道涉及到区间连边的问题. 如果暴力去做,那么就会爆炸 那么这时候就需要线段树来优化了. 因为是双向边 所以需要两颗线段树来分别对应入边和出边 QwQ然后做就好了咯 不过需要注意的是,这个边数 ...