1.什么是Ajax

  • Ajax: Asynchronous javascript and xml (异步javascript和xml)。

  • ==Ajax并不是一种新技术,而是已有技术的集合。JavaScript是核心载体==。

  • Ajax优势:在不刷新页面的情况下,更新页面数据,提升用户体验。

  • ==Ajax就像一个小秘书==,能够实现异步工作。

2.ajax核心对象 --- XMLHttpRequest

  创建ZMLhttpRequest对象,兼容IE7之前和主流浏览器

//创建XMLHttpRequest对象,兼容低版本IE和非IE浏览器
function getXhr () {
var xmlhttp; if (window.XMLHttpRequest) {
//IE7+ 和 非IE 中都有 XMLHttpRequest对象
xmlhttp = new XMLHttpRequest();
} else {
//低版本IE浏览器 实例化方式
xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
} return xmlhttp;
}

3.核心方法

XMLHttpRequest对象有了,可以发送Ajax请求了.发送请求有两个方法:

open(var1,var2,var3):准备ajax请求

var1: 请求方式  get/post
var2: 请求的后端程序地址
var3: 异步(true)/同步(false),可选参数,默认为true
 var: 分为两种情况。 如果是get请求,则填写null。 如果是post请求,则填写要发送到后端的数据。

 ==发送ajax请求流程

  1) 创建XMLHttpRequest对象

  2) 调用open方法准备ajax请求

  3) 调用send方法发送ajax请求

4.接收后端响应结果

Ajax的整个过程有5个状态,对应readyState的5个值:0-4

  0: (Uninitialized) the send( ) method has not yet been invoked.

  1: (Loading) the send( ) method has been invoked, request in progress.

  2: (Loaded) the send( ) method has completed, entire response received.

  3: (Interactive) the response is being parsed.

  4: (Completed) the response has been parsed, is ready for harvesting.

  0 - (未初始化)还没有调用send()方法

  1 - (载入)已调用send()方法,正在发送请求

  2 - (载入完成)send()方法执行完成,已经接收到全部响应内容

  3 - (交互)正在解析响应内容

  4 - (完成)响应内容解析完成,可以在客户端调用了

5.核心事件 --- onreadystatechange

 onreadystatechange事件:  readyState的值每次发生变化都会触发该事件。    0-->1    1-->2    2-->3    3-->4 总共触发4次

6.其他属性

  responseText; 以字符串形式接受后端程序的返回值.

Ajxax技术-1的更多相关文章

  1. 关于解决python线上问题的几种有效技术

    工作后好久没上博客园了,虽然不是很忙,但也没学生时代闲了.今天上博客园,发现好多的文章都是年终总结,想想是不是自己也应该总结下,不过现在还没想好,等想好了再写吧.今天写写自己在工作后用到的技术干货,争 ...

  2. SQL Server技术内幕笔记合集

    SQL Server技术内幕笔记合集 发这一篇文章主要是方便大家找到我的笔记入口,方便大家o(∩_∩)o Microsoft SQL Server 6.5 技术内幕 笔记http://www.cnbl ...

  3. 本人提供微软系.NET技术顾问服务,欢迎企业咨询!

    背景: 1:目前微软系.NET技术高端人才缺少. 2:企业很难直接招到高端技术人才. 3:本人提供.NET技术顾问,保障你的产品或项目在正确的技术方向. 技术顾问服务 硬服务项: 1:提供技术.决策. ...

  4. 分布式锁1 Java常用技术方案

    前言:       由于在平时的工作中,线上服务器是分布式多台部署的,经常会面临解决分布式场景下数据一致性的问题,那么就要利用分布式锁来解决这些问题.所以自己结合实际工作中的一些经验和网上看到的一些资 ...

  5. 【大型网站技术实践】初级篇:借助LVS+Keepalived实现负载均衡

    一.负载均衡:必不可少的基础手段 1.1 找更多的牛来拉车吧 当前大多数的互联网系统都使用了服务器集群技术,集群即将相同服务部署在多台服务器上构成一个集群整体对外提供服务,这些集群可以是Web应用服务 ...

  6. 探真无阻塞加载javascript脚本技术,我们会发现很多意想不到的秘密

    下面的图片是我使用firefox和chrome浏览百度首页时候记录的http请求 下面是firefox: 下面是chrome: 在浏览百度首页前我都将浏览器的缓存全部清理掉,让这个场景最接近第一次访问 ...

  7. 关于如何提高Web服务端并发效率的异步编程技术

    最近我研究技术的一个重点是java的多线程开发,在我早期学习java的时候,很多书上把java的多线程开发标榜为简单易用,这个简单易用是以C语言作为参照的,不过我也没有使用过C语言开发过多线程,我只知 ...

  8. 架构设计:远程调用服务架构设计及zookeeper技术详解(下篇)

    一.下篇开头的废话 终于开写下篇了,这也是我写远程调用框架的第三篇文章,前两篇都被博客园作为[编辑推荐]的文章,很兴奋哦,嘿嘿~~~~,本人是个很臭美的人,一定得要截图为证: 今天是2014年的第一天 ...

  9. Java数据库连接技术——JDBC

    大家好,今天我们学习了Java如何连接数据库.之前学过.net语言的数据库操作,感觉就是一通百通,大同小异. JDBC是Java数据库连接技术的简称,提供连接各种常用数据库的能力. JDBC API ...

随机推荐

  1. Linux安装配置PHPmyadmin

    进官网下载zip安装包 wget https://files.phpmyadmin.net/phpMyAdmin/5.0.1/phpMyAdmin-5.0.1-all-languages.zip 安装 ...

  2. c++之广度优先搜索

    广度优先搜索BFS(Breadth First Search)也称为宽度优先搜索,它是一种先生成的结点先扩展的策略. 在广度优先搜索算法中,解答树上结点的扩展是按它们在树中的层次进行的.首先生成第一层 ...

  3. vue_如何判断变量是数组还是对象

    一.typeof判断数据类型(判断数组跟对象都返回object) console.log(typeof null); // "object" console.log(typeof ...

  4. 旧 WCF 项目成功迁移到 asp.net core web api

    背景 接上一篇,放弃了 asp.net core + gRPC 的方案后,我灵光一闪,为什么不用 web api 呢?不也是 asp.net core 的吗?虽然 RESTful 不是强约束,客户端写 ...

  5. 快速排序&&归并排序

    快速排序 快速排序采用的是分治的策略,算法的具体实现过程是 1.确定一个数X(一般是选中间值X=q[l+r>>1]) 2.利用指针i,j,将数组中比X小的数放在一边,比X大的数放在另一边 ...

  6. CSAPP =1= 计算机系统漫游

    思维导图 预计阅读时间:15min 阅读书籍 <深入理解计算机系统> 参考视频 [精校中英字幕]2015 CMU 15-213 CSAPP 深入理解计算机系统 课程视频 参考文章 < ...

  7. 从零开始讲解JavaScript中作用域链的概念及用途

    从零开始讲解JavaScript中作用域链的概念及用途 引言 正文 一.执行环境 二.作用域链 三.块级作用域 四.其他情况 五.总结 结束语 引言 先点赞,再看博客,顺手可以点个关注. 微信公众号搜 ...

  8. Cobalt Strike简单使用

    ---恢复内容开始--- 一.介绍: 后渗透测试工具,基于Java开发,适用于团队间协同作战,简称“CS”. CS分为客户端和服务端,一般情况下我们称服务端为团队服务器,该工具具有社工功能(社会工程学 ...

  9. JDBC驱动程序分类

    JDBC驱动程序分类 JDBC驱动程序:各个数据库厂商根据JDBC的规范制作的 JDBC 实现类的类库 JDBC驱动程序总共有四种类型: 第一类:JDBC-ODBC桥. 第二类:部分本地API部分Ja ...

  10. 下载 golang.org/x 包出错不用代理的解决办法

    原文链接:https://www.jianshu.com/p/6fe61053c8aa?utm_campaign=maleskine&utm_content=note&utm_medi ...