XMLHttpRequest对象_Ajax异步请求重点(推荐)


Posted in Javascript onSeptember 28, 2017

一、XMLHttpRequest对象

1.Ajax能够是实现异步传输,所依赖的就是JavaScript中的XMLHttpRequest

2.XMLHttpRequest对象是XMLHttp组件的对象,它是一个抽象对象,允许脚本从服务器获取返回的eXML数据或将数据发送到服务器端

3.XMLHttpRequest可以实现客户端与服务器只进行数据层面的交互,不必每次刷新页面

4.XMLHttpRequest最早在Microsoft Internet Explorer5.0中作为一个ActiveX控件提供,后受到广泛应用

5.在使用XMLHttpRequest发送请求和处理相应之前需要先创建一个XMLHttpRequest对象

6.XMLHttpRequest不是W3C标准,可采用多种方法用JavaScript来创建XMLHttpRequest实例

7.在IE中XMLHttpRequest实现为一个ActiveX控件,而其他浏览器则实现为一个JavaScript内置对象

二、XMLHttpRequest对象创建

<script type="text/javascript">

三、XMLHttpRequest对象属性(接收并显示当前状态)

1.readySate-记录返回请求的状态

。0-为初始化:对象已经建立,单位初始化,open方法还未调用;

。1-初始化:对象已经建立,但还未调用send方法发送请求;

。2-发送数据:send方法已调用,但HTTP头未知;

。3-数据传输中:已经接受部分数据,但响应不完全;

。4-完成:数据接受完成,此时才可以获取完整的返回数据

2.responseText-接收客户端的HTTP响应的文本内容

。只读

。当readySate为1/2,responseText值是一个空字符串;

。当readyState为3,响应信息正在接受还未完成;

。当readyState为4,表示可以响应信息已经接收完成

。xmlHttp默认响应数据编码为UTF-8

3.responseXML-在send()执行后,将返回的信息格式化为XML Document对象

。Content-Type指定的MIME类型应该为text/HTML

。如果Content-Type不包含这种类型,responseXML在接收时将会得到一个null值

4.status-在send()执行后,可使用status读取事物状态

。长整型数据

。返回当前请求的HTTP的状态码

。只有当readyState为3或4时才使用该属性,否则读取status会发生错误

。100-客户必须继续发送请求

。200-交易成功

。400-错误请求

。403-请求不允许

。404-没有发现文件、查询、URL

。500-服务器内部错误

。502服务器暂时不可使用

。505-服务器不支持或拒绝不支持请求头中的HTTP版本

5.statusText-send()执行后,可通过statusText读取事物状态

。返回当前HTTP请求的状态行

。只有当readyState为3或4时才可使用该属性,否则读取state会发生错误

6.Onreadystatechange-readyState发生变化时所要执行的操作

。通常将处理函数名称赋予onreadystatechange来为XMLHttpRequest对象指定事件处理

。在事件处理函数中根据readyState的状态值进行相应的处理

。例:

function test(){
xmlHttp.onreadystatechange=showInfo;
var url=”/ajax/urlInfo”;//请求路径
xmlHttp.open(“GET”,url,true);
xmlHttp.send(null);
}
Function showInfo(){
If(xmlHttp.readyState==4){
alert(“success”);
}
}

四、XMLHttpRequest对象方法(动态处理各种信息:数据的发送和接收、请求与响应的处理等)

1.abort()-终止当前操作

。停止XMLHttpRequest对象对HTTP的请求,把该对象恢复到初始状态

2.open()-xmlHttp.open(method,url,mode,user,pwd)

。创建一个新的HTTP请求,并指定该请求的方法、URL、验证信息等

。method:POST、GET、PUT(可忽略大小写)

。url:请求的目标地址

。mode:指定请求是否为异步,默认true;当为true时,当state的状态改变时会调用onreadystatechange属性所指定的处理函数

。调用open()后,XMLHttpRequest对象将readyState属性设为1并恢复responseText、responseXML、status、statusText等属性的初始值,并且复位请求头部信息

调用open()时,readyState为4,则XMLHttpRequest对象将复位以上的值

3.send()-xmlHttp.send(content)

。发送请求到服务器并接受回应

4.setRequestHeader()-setRequestHeader(header,value)

。单独设定某个请求的HTTP头信息

。当readyState为1时,可在send()后调用此方法,否则返回一个异常

。如果已经存在该名称的HTTP头,则将原来信息覆盖

。header-头名称:字符串型

。value-头名称的值:字符串型

5.getResponseHeader()-读取服务器发出信息的头部

。HEAD请求忽略内容,所以其响应比对GET或POST响应小

获取内容:

。Content-Type:内容类型

。Content-Length:内容长度

。Last-Modify:最后一次修改的日期

。例:

function getHeadInfo(){
if(xmlHttp.readyState==4){
if(headeyType==”Content-Type”){
window.alert(“Content-Type:”+xmlHttp.getResponseHeader(“Content-Type”);
}
else if(headType==”Content-Length”){
window.alert(“Content-Length:”+xmlHttp,getResponseHeader(“Content-Length”);
}
else if(headType==”Last-Modify”){
window.alert(“Last-Modify:”+xmlHttp.getResponseHeader);
}
}
}

。在获取头部信息时,并不是所有信息都能获取

6.getAllResponseHeaders()-获取所有头部信息

。在获取时只用HEAD即可获取
。例:

fuction headRequest(){
creatXMLHttpRequest();
xmlHttp.onreadystatechange=getHeadInfo;
xmlHttp.open(“HEAD”,”url”,false);
xmlHttp.send(null);
}
function getHeadInfo(){
if(readyState==4){
Alter(xmlHttp.getAllResponseHeaders());
}

以上这篇XMLHttpRequest对象_Ajax异步请求重点(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery全选/全不选/反选另一种实现方法(配合原生js)
Apr 07 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
Mar 12 Javascript
jquery使用ajax实现微信自动回复插件
Apr 28 Javascript
使用iojs的jsdom库实现同步系统时间
Apr 20 Javascript
javascript下拉列表中显示树形菜单的实现方法
Nov 17 Javascript
整理Javascript数组学习笔记
Nov 29 Javascript
JS原型继承四步曲及原型继承图一览
Nov 28 Javascript
node中的session的具体使用
Sep 14 Javascript
vue遍历对象中的数组取值示例
Nov 07 Javascript
vue表单数据交互提交演示教程
Nov 13 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
Jul 21 Javascript
在项目vue中使用echarts的操作步骤
Sep 07 Javascript
JQuery 选择器、DOM节点操作练习实例
Sep 28 #jQuery
浅谈JavaScript find 方法不支持IE的问题
Sep 28 #Javascript
VueJS事件处理器v-on的使用方法
Sep 27 #Javascript
javascript基本常用排序算法解析
Sep 27 #Javascript
Angularjs cookie 操作实例详解
Sep 27 #Javascript
js移动端图片压缩上传功能
Aug 18 #Javascript
微信小程序报错:this.setData is not a function的解决办法
Sep 27 #Javascript
You might like
php防攻击代码升级版
2010/12/29 PHP
php中filter函数验证、过滤用户输入的数据
2014/01/13 PHP
详解PHP多个进程配合redis的有序集合实现大文件去重
2019/03/06 PHP
浅谈JavaScript之事件绑定
2013/07/08 Javascript
jquery中交替点击事件的实现代码
2014/02/14 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
2014/06/06 Javascript
javascript实例分享---具有立体效果的图片特效
2014/06/08 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
js正则匹配出所有图片及图片地址src的方法
2015/06/08 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
2015/10/08 Javascript
Jquery删除css属性的简单方法
2016/12/04 Javascript
详解vue-router 2.0 常用基础知识点之router-link
2017/05/10 Javascript
详解AngularJS controller调用factory
2017/05/19 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
2018/02/05 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
2019/07/25 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
2019/07/27 Javascript
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
Python基于pycrypto实现的AES加密和解密算法示例
2018/04/10 Python
python 找出list中最大或者最小几个数的索引方法
2018/10/30 Python
深入浅析Python中的迭代器
2019/06/04 Python
Mac在python3环境下安装virtualwrapper遇到的问题及解决方法
2019/07/09 Python
python mysql 字段与关键字冲突的解决方式
2020/03/02 Python
python小程序基于Jupyter实现天气查询的方法
2020/03/27 Python
Kathmandu澳洲户外商店:新西兰户外运动品牌
2017/11/12 全球购物
东南亚旅游平台:The Trip Guru
2018/01/01 全球购物
Lovedrobe官网:英国领先的大码服装品牌
2019/09/19 全球购物
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/01/13 面试题
营销总经理的岗位职责
2013/12/15 职场文书
党校学习思想汇报
2014/01/06 职场文书
雷锋观后感
2015/06/10 职场文书
幼儿园庆六一主持词
2015/06/30 职场文书
2015年秋季灭鼠工作总结
2015/07/27 职场文书
环境保护宣传标语大全!
2019/06/28 职场文书
MySQL中int (10) 和 int (11) 的区别
2022/01/22 MySQL
Python实现双向链表基本操作
2022/05/25 Python
React如何使用axios请求数据并把数据渲染到组件
2022/08/05 Javascript