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 相关文章推荐
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
Jun 28 Javascript
关于flash遮盖div浮动层的解决方法
Jul 17 Javascript
js获取php变量的实现代码
Aug 10 Javascript
JS根据变量保存方法名并执行方法示例
Apr 04 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
Feb 05 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
Jun 30 Javascript
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
Jun 29 Javascript
JS自定义滚动条效果简单实现代码
Oct 27 Javascript
VUE2实现事件驱动弹窗示例
Oct 21 Javascript
vue路由切换之淡入淡出的简单实现
Oct 31 Javascript
JavaScript创建表格的方法
Apr 13 Javascript
用Javascript实现发送短信验证码间隔功能
Feb 08 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连mysql和oracle数据库性能比较
2006/10/09 PHP
解析如何通过PHP函数获取当前运行的环境 来进行判断执行逻辑(小技巧)
2013/06/25 PHP
基于PHP实现假装商品限时抢购繁忙的效果
2015/10/16 PHP
解决laravel上传图片之后,目录有图片,但是访问不到(404)的问题
2019/10/14 PHP
IE中直接运行显示当前网页中的图片 推荐
2006/08/31 Javascript
基于jquery的实现简单的表格中增加或删除下一行
2010/08/01 Javascript
jquery文字上下滚动的实现方法
2013/03/22 Javascript
javascript中的parseInt和parseFloat区别
2013/07/12 Javascript
javascript自动改变文字大小和颜色的效果的小例子
2013/08/02 Javascript
关于JavaScript对象的动态选择及遍历对象
2014/03/10 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
2016/05/26 Javascript
JS实现复制功能
2017/03/01 Javascript
详解Vue.js入门环境搭建
2017/03/17 Javascript
JS正则表达式验证中文字符
2017/05/08 Javascript
jQuery EasyUI结合zTree树形结构制作web页面
2017/09/01 jQuery
angular4 JavaScript内存溢出问题
2018/03/06 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
2019/02/21 Javascript
js的新生代垃圾回收知识点总结
2019/08/22 Javascript
JS document文档的简单操作完整示例
2020/01/13 Javascript
基于element-ui封装表单金额输入框的方法示例
2021/01/06 Javascript
Python网络编程中urllib2模块的用法总结
2016/07/12 Python
Python实现繁?转为简体的方法示例
2018/12/18 Python
75条笑死人的知乎神回复,用60行代码就爬完了
2019/05/06 Python
Python实战之制作天气查询软件
2019/05/14 Python
python3连接kafka模块pykafka生产者简单封装代码
2019/12/23 Python
python3使用Pillow、tesseract-ocr与pytesseract模块的图片识别的方法
2020/02/26 Python
HTML5自定义属性的问题分析
2019/08/16 HTML / CSS
SmartBuyGlasses德国:购买太阳镜和眼镜
2019/08/20 全球购物
NET程序员上机面试题
2015/05/23 面试题
2019年.net常见面试问题
2012/02/12 面试题
如何在Shell脚本中使用函数
2015/09/06 面试题
荷叶圆圆教学反思
2014/02/01 职场文书
员工考核评语大全
2014/04/26 职场文书
改革共识倡议书
2014/08/29 职场文书
2016国培学习心得体会
2016/01/08 职场文书
详解NumPy中的线性关系与数据修剪压缩
2022/05/25 Python