AJAX - 基本流程和特点
<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 - 基本流程和特点的更多相关文章
- jQuery-1.9.1源码分析系列（十六）ajax——ajax处理流程以及核心函数
先来看一看jQuery的ajax核心处理流程($.ajax) a. ajax( [url,] options )执行流程 第一步,为传递的参数做适配.url可以包含在options中 //传递的参数只 ...
- zepto源码研究 - ajax.js（$.ajax具体流程分析）
简要:$.ajax是zepto发送请求的核心方法,$.get,$.post,$.jsonp都是封装了$.ajax方法.$.ajax将jsonp与异步请求的代码格式统一起来,内部主要是先处理url,数据 ...
- 用php+ajax新建流程（请假、进货、出货等）
对管理者来说,电脑操作的请假流程要比人工请假流程的效率高出很多,那么如何新建这个流程呢? 首先:需要明确需要操作哪些流程? 其次:每一个流程需要那些人员来执行? 最后:执行该流程人员的顺序是什么? ...
- Ajax工作流程
Ajax通过XMLHttpRequest对象实现异步方式在后台发送发送请求. 主要有以下四个步骤: (1)初始化XMLHttpRequest对象.不同浏览器的差异,需要我们创建一个跨浏览器的对象,并判 ...
- ajax用法流程
这里是用javascript做的一个ajax的一个用法以及总结概括.供友友们进行参考. 1 window.onload=function() { var oBtn=document.getElemen ...
- php+ajax发起流程和审核流程（以请假为例）
上一篇随笔中已经提到如何新建流程,那么现在我们就来看一下如何发起一个流程和审核流程~~~ 先说一下思路: (1)登录用session获取到用户的id (2) 用户发起一个流程 注意:需要写申请事由 ( ...
- AJAX的流程是什么？
客户端产生js的事件 创建XMLHttpRequest对象 对XMLHttpRequest进行配置 通过AJAX引擎发送异步请求 服务器端接受请求并且处理请求,返回html或者xml内容 XML调用一 ...
- Ajax 执行流程 有用 一点
l 1.1使用JavaScript获得浏览器内置的AJAX引擎(XMLHttpRequest对象) l 1.2 通过AJAX引擎确定请求路径和请求参数 l 1.3 通知AJAX引擎发送请求 l AJA ...
- 浅谈AJAX基本实现流程
1.js中ajax实现流程: (1) 创建XMLHttpRequest对象,也就是创建一个异步调用对象. (2) 创建一个新的HTTP请求,并指定该HTTP请求的方法.URL及验证信息. (3) 设置 ...
随机推荐
- uva 1292 树形dp
UVA 1292 - Strategic game 守卫城市,城市由n个点和n-1条边组成的树,要求在点上安排士兵,守卫与点相连的边.问最少要安排多少士兵. 典型的树形dp.每一个点有两个状态: dp ...
- Find problem in eXtremeDB
class table1 { char<8> f1; char<80> f2; uint4 f3; uint4 f4; double ...
- iOS 7 UI 过渡指南 - 支持续 iOS 6（iOS 7 UI Transition Guide - Supporting iOS 6）
iOS 7 UI Transition Guide Preparing for Transition Before You Start Scoping the Project Supporting i ...
- Lesson 2 Building your first web page: Part 2
Tag Diagram You may have noticed that HTML tags come in pairs; HTML has both an opening tag (<tag ...
- Android View体系（九）自定义View
相关文章 Android View体系(一)视图坐标系 Android View体系(二)实现View滑动的六种方法 Android View体系(三)属性动画 Android View体系(四)从源 ...
- legend---五、如何优雅的实现多继承
legend---五.如何优雅的实现多继承 一.总结 一句话总结:多继承可以通过把别人对象作为属性来调用属性的方法执行, 继承的本质也是为了调用方法和属性,而上述的方式可以满足 1.php中前端可以共 ...
- 25.内置API
转自:https://www.cnblogs.com/best/tag/Angular/ 3.1.数据转换 示例: 默认情况JavaScript中对象是传引用的: var tom={name:&quo ...
- NET 高效开发之不可错过的实用工具（第一的当然是ReSharper插件）
工欲善其事,必先利其器,没有好的工具,怎么能高效的开发出高质量的代码呢?本文为 ASP.NET 开发者介绍一些高效实用的工具,包括 SQL 管理,VS插件,内存管理,诊断工具等,涉及开发过程的各个环节 ...
- Vbox下创建Linux和Windows的共享文件夹
我的Vbox版本是4.3.6...在这里以win8和Ubuntu12.04之间共享文件举例 首先运行虚拟机,然后安装增强功能..这个增强功能很碉堡...能开启无缝模式和系统间的剪贴板共享等牛X功能 然 ...
- javaScript for in循环遍历对象
for循环常被我们用来遍历数组,而如何遍历对象呢? 这时就需要用到for in循环了 写一个遍历对象名简写如下: for(var xxx in ooo){console.log(xxx)} 其中xxx ...