前端基础-Ajax对象
第2章 Ajax对象
2.1 获取对象
通过上一节我们发现,想要使用 ajax 的一系列功能,我们就必须先得到 ajax 对象
基于 W3C标准 浏览器:
var xhr = new XMLHttpRequest();
基于IE内核的浏览器:
var xhr = new ActiveXObject('Microsoft.XMLHTTP');
<script>var btu = document.getElementById('btu');btu.onclick = function(){//基于 W3C标准 浏览器var xhr = new XMLHttpRequest();alert(xhr);//基于IE内核的浏览器, W3C标准浏览器中报错var xhr = new ActiveXObject('Microsoft.XMLHTTP');alert(xhr);}
</script>
浏览器标准不一样,得到的对象也不一样,我们也不知道客户使用什么样的浏览器,因此,我们需要解决兼容性问题;
修改上述代码并测试,具有兼容性:
<script>
var btu = document.getElementById('btu');
btu.onclick = function(){try{var xhr = new XMLHttpRequest()}catch(e){};try{var xhr = new ActiveXObject('Microsoft.XMLHTTP')}catch(e){};alert(xhr);
}
</script>
再次对代码进行修改 兼容代码封装进函数调用
<script>var btu = document.getElementById('btu');btu.onclick = function(){//封装进函数供其他程序调用function cXHR(){try{return new XMLHttpRequest()}catch(e){};try{return new ActiveXObject('Microsoft.XMLHTTP')}catch(e){};}alert(cXHR());}
</script>
将函数写入单独的文件,共其他地方引入调用
创建createXHR.js
将函数复制到文件 createXHR.js 内并保存, 如图:
使用:
//文件引入
<script src="createXHR.js"></script>
<script>var btu = document.getElementById('btu');btu.onclick = function(){//函数调用alert(cXHR());}
</script>
顺便封装一个方法:
使用id属性获取DOM对象,方便后面使用
function gid(id){return document.getElementById(id);
}
2.2 ajax对象的属性、方法 *
火狐开发者文档:
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest
2.2.1 属性
**readyState: Ajax状态码 * **
0:表示对象已建立,但未初始化,只是 new 成功获取了对象,但是未调用open方法
1:表示对象已初始化,但未发送,调用了open方法,但是未调用send方法
2:已调用send方法进行请求
3:正在接收数据(接收到一部分),客户端已经接收到了一部分返回的数据
**4:接收完成,客户端已经接收到了所有数据 * **status :http响应状态码
200代表成功获取服务器端数据
404未找到页面等等……statusText :http响应状态文本
responseText:如果服务器端返回字符串,使用responseText进行接收
responseXML :如果服务器端返回XML数据,使用responseXML进行接收
onreadystatechange:当 readyState 状态码发生改变时所触发的回调函数
2.2.2 方法
open(method,url,[aycs]):初始化Ajax对象 (打开)
method:http请求方式,get/post
url:请求的服务器地址
aycs:同步与异步setRequestHeader(header,value):设置请求头信息
header :请求头名称
value :请求头的值xhr.getAllResponseHeaders() 获取全部响应头信息
xhr.getResponseHeader(‘key’) 获取指定头信息
send([content]) :发送Ajax请求
content : 如果是get请求时,此参数为null;如果是post请求时,此参数就是要传递的数据
注意: 所有相关的事件绑定必须在调用send()方法之前进行.
2.2.3 同步与异步
例如,小明去餐馆排队点餐,前台服务员将小明的菜单告诉厨师进行制作,此时小明后面排队的人就一直等着,
直到厨师制作完成,把饭菜送到小明手里后离开,后面的人才能继续点餐;这就是同步处理
但是,如果前台服务员将小明的菜单告诉厨师后,服务员发给小明一个好牌去旁边等待,后面的人继续点餐,
厨师将小明的饭菜做好后,随时呼唤小明就餐;这就是异步处理
服务器的不同做法,就代表着 Ajax 的同步或异步处理;
小明就是客户端;
厨师就是后台服务器;
图示:
前台代码:
<script src="createXHR.js"></script><script>function t1(){var xhr = cXHR();xhr.onreadystatechange = function(){if(this.readyState == 4){alert(this.responseText);}}//false同步//true 异步xhr.open('get','/test',false); xhr.send(null);}function t2(){alert('t2');}t1();t2();</script>
前端基础-Ajax对象相关推荐
- 【从0到1学Web前端】javascript中的ajax对象(一)
[从0到1学Web前端]javascript中的ajax对象(一) 如今最流行的获取后端的(浏览器从server)数据的方式就是通过Ajax了吧.今天就来具体的来学习下这个知识吧.假设使用ajax来訪 ...
- 前端基础进阶(十):面向对象实战之封装拖拽对象
https://segmentfault.com/a/1190000012646488 https://yangbo5207.github.io/wutongluo/ 说明:此处只是记录阅读前端基础 ...
- jquery function_前端基础进阶(十三)详细图解jQuery扩展jQuery插件
UI 鉴赏 早几年学习前端,大家都非常热衷于研究jQuery源码. 我至今还记得当初从jQuery源码中学到一星半点应用技巧的时候常会有一种发自内心的惊叹,"原来JavaScript居然可以 ...
- WEB前端 基础知识汇总
javascript: JavaScript中如何检测一个变量是一个String类型?请写出函数实现 typeof(obj) === "string" typeof obj === ...
- iframe跨域调用js_郑州Web前端基础学习之JS跨域知识梳理
JS是Web前端开发三要素之一,是郑州Web前端基础学习中非常重要的知识点.JS涉及的知识点多且杂,很多同学反映不知如何下手,事实上,只要你认真记.多练习,就可以慢慢掌握它.今天千锋郑州Web前端培训 ...
- ❤️《Vue前端基础框架集合从入门到高级》(小白也可学,建议收藏)❤️
<Vue前端基础框架集合从入门到高级>,小白也可学 文章目录 <Vue前端基础框架集合从入门到高级>,小白也可学 ❤️一.前端核心分析 ❤️1.1.概述 ❤️1.2.前端三要素 ...
- 前端基础全面的面试题
2019精选面试题.notehttps://blog.csdn.net/weixin_34099526/article/details/91461153 1.Vue实现数据双向绑定的原理是什么? 2. ...
- 前端基础面试题(HTML + CSS)
前端基础面试题(HTML + CSS) 1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素? 行内元素:和有他元素都在一行上,高度.行高及外边距和内边距都不可改变,文字图片的宽度不可改变 ...
- 【前端基础知识笔记】 【项目导向型】(持续更新中)
我在做项目的过程中,学习了一些前端基础知识.为了方便以后的查询,将这些知识集中在这篇博客中,方便以后的查询. 注意!这些知识是不成体系的,因为我只是按照遇到的先后顺序记载于此.这是为了方便结合项目开发 ...
- 前端基础面试题(JS部分)
1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined.Null.Boolean.Number.String 值类型:数值.布尔值.null.und ...
最新文章
- 「AI白身境」究竟谁是paper之王,全球前10的计算机科学家
- 各位最近找我索要CCNA200-120的资源的同志些
- Spark Streaming中的操作函数分析
- ZZNU 1993: cots' friends
- python3语法错误-python-使用Python 3打印时出现语法错误
- 王者荣耀全栈项目部署到阿里云服务器笔记
- vue制作弹框,并且禁止滚动
- “小罐茶大师作”20亿元销售额难掩虚假宣传本质
- Quartz2D指定显示范围
- js去掉a链接点击后产生的虚线(兼容火狐)
- SecureCRT下载、安装、激活
- 国内6大网络信息采集和页面数据抓取工具
- intellij idea 2017破解
- java开源论坛系统Mango BBS源代码下载
- xmapp_mysql端口冲突解决
- 什么是python基础语法?一篇文章让你更加了解python
- python爬取在线视频思路,用python实现多线程爬取影视网站全部视频方法【笔记】...
- 调用个人微信API接口协议实现群发好友,群发群
- RFC请求注解(Request for Comments)介绍|internet最重要的文献资源
- 一招解决GitHub致命的下载速度(GitHub下载速度慢怎么办)
热门文章
- Unity游戏开发客户端面经——性能优化(初级)
- eclipse中folder、source folder、package的区别及相互转换
- Linux查看Nvidia显卡型号
- 呕心沥血大放血,今天小企鹅来给大家送福利了!!!Mac.Win.Lin虚拟机映像/资源超全[分享]
- SAP跨公司销售经典场景
- 生活,人艰不拆,各种躺枪
- 提高模型准确率:组合模型
- php语言标记可用什么符号,【单选题】不可用作PHP语言标记用的是什么( )符号
A. ? B. 〈php C. ?...
- 博客整理——K米测评
- win10 ping网络计算机,win10 ping命令:如何ping网速和ping各个参数命令解释