<script>

    window.onload = function(ev){

      var oBtn = document.querySelector('button');

      // querySelector  https://segmentfault.com/q/1010000014291684

      oBtn.onclick = function(ev1){

        // 1. 创建异步对象

        var xmlHttp = new XMLHttpRequest();

        /* 2. 设置请求方式和请求地址  open(method,url,async)

        method: 请求的类型  GET 或 POST

        url: 文件在服务器上的位置

        async: true(异步)  false(同步)

        */

        xmlHttp.open("GET", "04-ajax-get.php", true);

        // 3. 发送请求

        xmlHttp.send();

        // 4. 监听状态的变化

        xmlHttp.onreadystatechange = function(ev2){

          /*

          0: 请求未初始化

          1: 服务器连接已建立

          2: 请求已接收

          3: 请求处理中

          4:请求已完成，且相应已就绪

          */

          if(xmlHttp.readyState === 4){

            //判断是否请求成功

            if(xmlHttp.status >= 200 && xmlHttp.status < 300 || xmlHttp.status === 304){

              // 5. 处理返回的结果

              console.log('接收到服务器返回的数据');

            }else{

              console.log('没有接收到服务器返回的数据');

            }

          }

        }

      }

    }

  </script>

</head>

  <!-- 使用Ajax更新数据和 不使用Ajax的区别：

       不使用ajax更新数据，会重新加载整个页面

       （例如 淘宝 输入关键字，搜索）

       使用ajax更新数据， 不会重新加载整个页面，只更新某些部分

       （例如 淘宝搜索栏- 输入关键字 自动更新下拉提示框的内容 ）-->

<body>

  <button>发送请求</button>

</body>

AJAX - 基本流程和特点的更多相关文章

  1. jQuery-1.9.1源码分析系列（十六）ajax——ajax处理流程以及核心函数

    先来看一看jQuery的ajax核心处理流程($.ajax) a. ajax( [url,] options )执行流程 第一步,为传递的参数做适配.url可以包含在options中 //传递的参数只 ...

  2. zepto源码研究 - ajax.js（$.ajax具体流程分析）

    简要:$.ajax是zepto发送请求的核心方法,$.get,$.post,$.jsonp都是封装了$.ajax方法.$.ajax将jsonp与异步请求的代码格式统一起来,内部主要是先处理url,数据 ...

  3. 用php+ajax新建流程（请假、进货、出货等）

    对管理者来说,电脑操作的请假流程要比人工请假流程的效率高出很多,那么如何新建这个流程呢? 首先:需要明确需要操作哪些流程? 其次:每一个流程需要那些人员来执行? 最后:执行该流程人员的顺序是什么?   ...

  4. Ajax工作流程

    Ajax通过XMLHttpRequest对象实现异步方式在后台发送发送请求. 主要有以下四个步骤: (1)初始化XMLHttpRequest对象.不同浏览器的差异,需要我们创建一个跨浏览器的对象,并判 ...

  5. ajax用法流程

    这里是用javascript做的一个ajax的一个用法以及总结概括.供友友们进行参考. 1 window.onload=function() { var oBtn=document.getElemen ...

  6. php+ajax发起流程和审核流程（以请假为例）

    上一篇随笔中已经提到如何新建流程,那么现在我们就来看一下如何发起一个流程和审核流程~~~ 先说一下思路: (1)登录用session获取到用户的id (2) 用户发起一个流程 注意:需要写申请事由 ( ...

  7. AJAX的流程是什么？

    客户端产生js的事件 创建XMLHttpRequest对象 对XMLHttpRequest进行配置 通过AJAX引擎发送异步请求 服务器端接受请求并且处理请求,返回html或者xml内容 XML调用一 ...

  8. Ajax 执行流程 有用 一点

    l 1.1使用JavaScript获得浏览器内置的AJAX引擎(XMLHttpRequest对象) l 1.2 通过AJAX引擎确定请求路径和请求参数 l 1.3 通知AJAX引擎发送请求 l AJA ...

  9. 浅谈AJAX基本实现流程

    1.js中ajax实现流程: (1) 创建XMLHttpRequest对象,也就是创建一个异步调用对象. (2) 创建一个新的HTTP请求,并指定该HTTP请求的方法.URL及验证信息. (3) 设置 ...

随机推荐

  1. ASIHTTPRequest导入出错-libxml出错， i386 "_deflate"

    导入需要 ASIHTTPRequest 依赖于以下5个框架或库: CFNetwork, SystemConfiguration,MobileCoreServices, CoreGraphics 和 l ...

  2. TCP/IP具体解释--TCP的分段和IP的分片

    写在前面: 分组能够发生在运输层和网络层.运输层中的TCP会分段,网络层中的IP会分片.IP层的分片很多其它的是为运输层的UDP服务的,因为TCP自己会避免IP的分片,所以使用TCP传输在IP层都不会 ...

  3. html5的代码验证

    http://html5.validator.nu/ http://validator.w3.org/#validate_by_uri

  4. Lesson 1 Basic Concepts: Part 1

    www.how-to-build-websites.com/basic-concepts/part1.php An introduction to domain names, web servers, ...

  5. .net数字转换成汉字大写

    public class Num2Rmb { private String[] hanArr={"零","壹","贰","叁&qu ...

  6. 【理论基础】ContentProvider的简要概述

    对于Android应用而言,他们必须相互独立,各自运行在自己的Dalvik虚拟机实例中,如果这些Android应用之间需要实现实时的数据交换——例如我们开发了一个发送短信的程序,当发送短信时需要从联系 ...

  7. MySQL Server 5.5.44免安装版配置详解

    转载地址:http://wenku.baidu.com/view/2a8bfe6a25c52cc58bd6beff.html### 一 下载MySQL http://dev.mysql.com/dow ...

  8. Chromium String usage

    For Developers‎ > ‎ Chromium String usage Types of StringsIn the Chromium code base, we use std:: ...

  9. 【搭建Saltstack运维工具】

    目录 所谓Salt 开始搭建 配置接受密钥 salt命令 YAML详解 目标定位字符串 state模块定义主机状态 Salt采集静态信息之GrainsSalt @(Saltstack) *** 所谓S ...

  10. 51nod 正整数分组

    将一堆正整数分为2组,要求2组的和相差最小. 显然我们可以把所有可能组合成的数求出来. 然后从总和的中间开始往大找,找到了就是其中一个的分组,就可以求出答案了. #include<cstdio& ...