AJAX 可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容（默认是异步）

（1）使用ajax会用到XMLHttpRequest()对象

（2）然后使用open方法定义请求方法和请求地址，参数格式open（‘请求方法’，‘请求地址’），请求方法有两种，get和post

（3）然后使用send方法定义传输数据，参数格式send（传输数据）

其中请求后台后会得到响应结果，可以通过onreadystatechange状态事件来监测，其中readyState属性一共有四个状态码：

readyState==1【服务器连接已建立】
readyState==2【请求已接收】
readyState==3【请求处理中】
readyState==4【请求已完成，且响应已就绪】
 

下面是ajax用get的简单例子

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Ajax-get</title>

    <script>

        function checkname() {

                var name=document.getElementById('username').value;

                var xhr=new XMLHttpRequest();

                xhr.onreadystatechange=function () {

                    if (xhr.readyState==4){

                        alert(xhr.responseText);

                    }

                };

                xhr.open('get','get.php?name='+name);

                xhr.send(null);

        }

    </script>

</head>

<body>

<div style="width: 400px;margin: 0 auto">

    <h1>输入内容后离开鼠标</h1>

    <p>用户名：<input type="text" id="username" onblur="checkname()"></p>

</div>

</body>

</html>

这是get.php代码

print_r($_GET);

　　

下面是ajax使用post的简单例子，这里需要另外加上setRequestHeader("content-type","application/x-www-form-urlencoded")，用来设置请求头信息

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Ajax-post</title>

    <script>

        function checkname() {

            var nam=document.getElementById('username').value;

            var info="name="+nam;

            var xhr=new XMLHttpRequest();

            xhr.onreadystatechange=function () {        //四个请求返回状态

                if (xhr.readyState==1){

                    console.log(1);

                }

                if (xhr.readyState==2){

                    console.log(2);

                }

                if (xhr.readyState==3){

                    console.log(3);

                }

                if (xhr.readyState==4){

                    console.log(4);

                    alert(xhr.responseText);

                }

            };

            xhr.open('post','post.php');

            xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");

            xhr.send(info);

        }

    </script>

</head>

<body>

<div style="width: 400px;margin: 0 auto">

    <h1>输入内容后离开鼠标</h1>

    <p>用户名：<input type="text" id="username" onblur="checkname()"></p>

</div>

</body>

</html>

这是post.php代码

print_r($_POST);

　　

常说的ajax轮询

就是通过setInterval定时器每段时间执行一次，一直循环，函数使用例子为：

setInterval(执行函数,每次执行间隔时间)

而settimeout是在指定的时间后执行，但只执行一次，函数使用例子为：

settimeout(执行函数,距离执行间隔时间)

原生js使用ajax的更多相关文章

  1. 原生js实现Ajax

    一般来说,大家可能都会习惯用JQuery提供的Ajax方法,但是用原生的js怎么去实现Ajax方法呢? JQuery提供的Ajax方法: $.ajax({ url: , type: '', dataT ...

  2. 使用原生js写ajax

    // 使用原生js 封装ajax // 兼容xhr对象 function createXHR(){ if(typeof XMLHttpRequest != "undefined") ...

  3. 表单验证--通过原生js模仿ajax的异步交互

    今天给大家带来个福利,我也是刚刚学习的很实用的一个东西,通过原生js模仿ajax的异步交互. 我的博客只是给那些新手看的大神勿喷,写的不好可留言,请指出. 因为当初自己学的时候一个问题不会找人问,知道 ...

  4. 原生JS实现Ajax及Ajax的跨域请求

      前  言          如今,从事前端方面的程序猿们,如果,不懂一些前后台的数据交互方面的知识的话,估计都不太好意思说自己是程序猿.当然,如今有着许多的框架,都有相对应的前后台数据交互的方法. ...

  5. 原生JS的Ajax技术

    1.同步和异步 同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待  卡死状态 异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都可以随意做其他事情,不会被卡 ...

  6. 原生js中用Ajax进行get传参

    原生js中用Ajax进行get传参 案例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

  7. 原生js实现ajax与jquery的ajax库，及json

    这是一篇笔记博客, Ajax: 和服务器进行数据交换(异步) 用js实现复杂的原理:用于发送请求的对象在不同的浏览器中是不同的 同源策略:ajax发送请求的url地址与服务器地址必须是同一域名,协议, ...

  8. 用原生js实现ajax、jsonp

    转载: http://www.cnblogs.com/yangheng/p/6065910.html 一.原生js实现ajax $.ajax({ url: '', type: 'post', data ...

  9. 原生JS实现ajax 发送post请求

    1. [代码]原生JS实现ajax 发送post请求 <script> var oStr = ''; var postData = {}; var oAjax = null; //post ...

  10. 原生js写Ajax

    //原生js写ajax就像打电话 //打电话分下面4步//1.拿出手机//2.拨号//3.说话//4.挺对方说话 //ajax也分下面4步//1.创建ajax对象//2.连接到服务器//3.发送请求( ...

随机推荐

  1. python学习day24 项目目录结构

    项目目录结构 脚本 插入模块:先插入内置模块,然后第三方某块,上短下长! 单可执行文件 config 配置相关 db (database) 数据相关 lib (librarie) 公共功能 src 业 ...

  2. 全球参考系统（WRS）概述及常用工具汇总

    1.全球参考系统(WRS)简介 WRS(Worldwide Reference System)是Landsat卫星采用的全球参考系统,也是国际上非常具有代表意义的全球参考系统之一.WRS是依据卫星地面 ...

  3. 【luogu P2831 愤怒的小鸟】 题解

    题目链接:https://www.luogu.org/problemnew/show/P2831 写点做题总结:dp,搜索,重在设计状态,状态设的好,转移起来也方便. 对于一条抛物线,三点确定.(0, ...

  4. 【luogu P2245 星际导航】 题解

    题目链接:https://www.luogu.org/problemnew/show/P2245 = 货车运输 被逼着写过mst+lca 后来成了mst+树剖 #include <cstdio& ...

  5. EF Core中外键关系的DeleteBehavior介绍（转自MSDN）

    Delete behaviors Delete behaviors are defined in the DeleteBehavior enumerator type and can be passe ...

  6. 大话Linux内核中锁机制之信号量、读写信号量

    大话Linux内核中锁机制之信号量.读写信号量 在上一篇博文中笔者分析了关于内存屏障.读写自旋锁以及顺序锁的相关内容,本篇博文将着重讨论有关信号量.读写信号量的内容. 六.信号量 关于信号量的内容,实 ...

  7. centos6.4 安装code::blocks

    今天下午闲着没事尝试在自己的PC中的CentOS上装一个Code::Blocks,因为是Linux菜鸟折腾了一下午才基本算搞定但依然有疑惑: 在网上各种谷哥度娘最后才发现还是官方的文档最靠谱:看这里. ...

  8. javascript 中x++和++x的不同

    x++和++x都是给x加一,但是前者是完成赋值之后再递增x,后者相反. 例如:如果x是5,y=x++会将y设置为5,x设置为6:而y=++x会将x和y都设置为6.

  9. 转：Sql Server中清空所有数据表中的记录

    如果要删除数据表中所有数据只要遍历一下数据库再删除就可以了,清除所有数据我们可以使用搜索出所有表名,构造为一条SQL语句进行清除了,这里我一一给各位同学介绍.   使用sql删除数据库中所有表是不难的 ...

  10. Ext JS 6和Sencha CMD 6 快速入门

    Ext JS 6和Sencha CMD 6的入门很简单.一个命令,即可生成一个功能完整的“通用”应用程序,可以运行在本地服务器上. 这个“通用”的应用程序包含一组核心的stores,模型(models ...