<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. 《R实战》读书笔记二

    第一章 R简单介绍 本章概要 1安装R 2理解R语言 3执行R程序 本章所介绍的内容概括例如以下. 一个典型的数据分析步骤如图1所看到的. 图1:典型数据分析步骤 简而言之,现今的数据分析要求我们从多 ...

  2. git commit template

    https://www.zhihu.com/question/27462267/answer/204658544 https://gist.github.com/adeekshith/cd4c95a0 ...

  3. php实现简单算法2

    php实现简单算法2 去弄php手册,里面有数据结构,有数据结构就好办了,我的算法基础那么好. 而且的话有数据结构的话再配合我脑中的那些算法了,我就都ok啦. 在手册里面搜索php数据结构就好 路径如 ...

  4. 29.AngularJS 简介

    转自:https://www.cnblogs.com/best/tag/Angular/ AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 H ...

  5. Zookeeper的单节点集群详细启动步骤

    这个很简单,见如下博客. 1 week110的zookeeper的安装 + zookeeper提供少量数据的存储 [hadoop@weekend110 zookeeper-3.4.6]$ pwd/ho ...

  6. PowerDesigner删除外键关系,而不删除外键列[转] 及编码格式

    PowerDesigner删除外键关系,而不删除外键列[转]  数据库 database  -> generate database ->format 设置为utf-8 PowerDesi ...

  7. A电脑能ping 通B电脑,但B电脑无法ping能和访问B

    过程: A电脑共享了打印机,B电脑想连接A的打印机,发现拒绝访问,无法登录A电脑 问题: A电脑能ping 通B电脑,但B电脑无法ping能和访问B 原因:A电脑禁用了共享访问 处理:使用一键共享设置 ...

  8. Flex 编译器及编译步骤

    通过为Flex项目添加编译器参数:-keep-generated-actionscript=true 可以看到经过编译器处理过的源程序文件集合. 在这些文件的文件名中包含有“xxx-generated ...

  9. Windows 一键关闭UAC、防火墙、IE配置脚本

    有时候,在环境需求下,需要关闭windows防火墙,UAC,以及IE选项配置. 对不懂电脑来说是比较麻烦的,老是得教他们,关键还记不住…… so,以下脚本就可以解决这个问题 注:脚本 需要右键 以管理 ...

  10. 【Henu ACM Round#15 D】Ilya and Escalator

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 概率DP; 设f[i][j]表示前i个单位时间,j个人进入房间的概率是多少 然后想一下和i-1秒的时候要怎么转移就可以了. i-1秒 ...