XMLHttpRequest用法介绍

传统的Web应用请求服务器返回的一般是是完整的HTML页面,这样往往就需要页面进行刷新操作,不仅耗时而且用户体验度也不好。最典型的代表就是form表单登录操作了。如果登录失败往往是跳转到原网页重新登陆,如果是这种情况话就会造成资源的浪费,因为返回的HTMl网页中大多数元素都是重复的。

正因为这些原因后来才出现了ajax,它是一种交互式的网页开发技术,而XMLHttpRequest是它的核心的内容,它能够为页面中的javascript脚本提供特定的通信方式,从而使页面的javascript脚本和服务器之间形成动态交互的效果,XMLHTTPRequest的最大的优点是页面内的javascript脚本可以不用刷新页面,而直接和服务器发生交互,从而实现页面无刷新的效果。

1.下面首先来介绍一下XMLHttpRequest的详细属性和方法:

方法和属性

描述

Open(String method,String url,Boolean ansynch,String username,String password)

指定和服务器端交互的HTTP方法,URL地址及其他请求信息。

其中method表示HTTP请求方法。支持所有HTTP的方法,一般使用“GET”,“POST”url表示请求的服务器的地址 Asynch表示是否采取异步方式,true表示异步,false表示同步 后两个参数可以不指定,usrename和password分别表示用户名和密码,提供http认证机制需要的用户名和密码

Send(content)

向服务器发出请求,如果采用异步方式,该方法会立即返回

Content可以不指定或者指定为null表示不发送数据 其内容可以使DOM对象,输入流或是字符串

setRequestHeader(String header,String value)

设置HTTP请求中的指定头部header的值为value。 次方法需在open方法以后调用

getAllReponseHeader()

返回包含HTTP的所有响应头包括Content-Length,Date,URI等内容

返回值是一个字符串,包含所有头信息,其中每一个键名和键值用冒号分开,每一组键之间用CR和LF(回车加换行符)来分隔

GetResponseHeader(String header)

返回HTTP响应头中指定的键名header对应的值

Abort()

停止当前http请求,对应的XMLHttpRequest对象会复位到未初始化的状态

responseText

服务器响应的文本内容

ResponseXML

服务器响应的XML内容对应的DOM对象

Status

服务器返回的http状态码 200表示“成功”,404表示“未找到”。500表示“服务器内容部错误”

statusText

服务器返回状态码的文本信息

readyState

表示XMLHttpRequest对象的状态 0=未初始化。对象已创建,未调用open 1=open方法成功调用以后。Send方法未调用 2=send方法已经调用,尚未开始接受数据 3=正在接受数据。Http响应头信息已经接受,响应数据尚未接受完成。 4=完成。响应数据接受完成。

Onreadystatechage

请求状态改变的时间触发器(readyState变化时会调用这个属性上注册的javascript函数)

2.然后介绍一下XMLHttpRequest的使用步骤:

一、初始化XMLHttpRequest对象

 在使用XMLHttpRequest对象之前需要将XMLHttpRequest对象实例化,因为各个浏览器对这个实例化过程的实现不同,所以针对不同的浏览器实例化XMLHttpRequest对象的方式也不尽相同。

针对微软IE浏览器:

Js代码  

 var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  

针对其他的浏览器:

Js代码  

 var xmlHttp = new XMLHttpRequest();  

      所以,综合了这两种实例化XMLHttpRequest的形式,就可以提取出一个实例化的公共方法,代码如下:

Js代码  

 //实例化XMLHttpRequest对象 
 function createXMLHttpRequest(){
     if(window.XMLHttpRequest){
         xmlHttp =newXMLHttpRequest();
     }elseif(window.ActiveXObject){
         xmlHttp =newActiveXObject("Microsoft.XMLHTTP");
     }
 }

二、指定响应处理函数

      接下来就要指定当服务器返回信息时客户端的处理方式。只需将相应的处理函数名称赋给XMLHttpRequest对象的onreadystatechange属性即可,比如:

Js代码  

 xmlHttp.onreadystatechange = callBack;  

      需要说明的是,这个函数名称不加括号,不带参数;也可以使用JavaScript即时定义函数的方式定义响应函数,比如:

Js代码  

 xmlHttp.onreadystatechange = function(){
          // Do something...
 }

三、发送HTTP请求

      指定响应处理函数后,就可以向服务器发出HTTP请求了。这需要调用XMLHttpRequest对象的open()和send()方法。

Js代码  

 xmlHttp.open("get/Post","URL",true/false);  
 xmlHttp.send(null);

      3.1 open()方法详解 

Js代码  

//XMLHttpRequest对象的open()方法原型 
void open(string method, string URL , boolean asynch, string username, string password);  

      open()方法表示会建立对服务器的调用,这是初始化一个请求的纯脚本方法。

      它有2个必要的参数,还有3个可选的参数。method表示向服务器发送信息的方式,可以为Get或Post;URL表示所调用的服务器资源的URL;asynch是一个布尔值,指示这个调用时异步还是同步,默认为true;usernamepassword允许我们指定一个特定的用户名和口令。 一般使用时只取前三个参数即可。

      3.2 send()方法详解

Js代码  

 //XMLHttpRequest对象的send()方法原型 
 void send(content);  

      send()方法具体向服务器发送请求。如果请求声明为异步的,这个方法就会立即返回,否则它会等待,知道接收到响应为止。参数content是可选的,可以是一个DOM对象的实例、一个输入流或一个串。传入的内容会作为请求体的一部分发送。

四、处理服务器返回的信息

      在第二部中我们为XMLHttpRequest指定了响应处理函数,响应处理函数检查XMLHttpRequest对象的readyState属性值的变化,如果readyState值为4时,代表服务器已经传回所有信息,可以开始处理信息并更新页面内容了。

Js代码  

 function callBack(){  
        if(xmlHttp.readyState==4){
     if(xmlHttp.status==200){  
              //do something with xmlHttp.responseText; 
              xmlHttp.responseText; 
     } 
         }
 } 

      4.1 readyState属性详解

readyState属性用来表示请求的状态,有5个可取值,分别是:

      “0”:表示未初始化,即对象已经建立,但是尚未初始化(尚未调用open()方法);

      “1”:表示正在加载,此时对象已建立,尚未调用send()方法;

      “2”:表示请求已发送,即send()方法已调用;

      “3”:表示请求处理中;

      “4”:表示请求已完成,即数据接收完毕。

      4.2 status、statusText属性详解

status:返回当前请求的HTTP状态码(只读);

statusText:返回当前请求的响应行状态(只读)。

      4.3 responseText、responseXML属性详解

responseText属性表示服务器的文本响应,其处理结果以字符串形式返回。

responseXML属性表示服务器响应,其结果将格式化为XML Document对象。

      上述四个步骤,就是XMLHttpRequest对象在Ajax程序中的运行周期,即初始化、指定响应函数、发送请求、处理响应。

 下面是本示例的完整代码

Js代码  

  1. var xmlHttp;  
  2. function AjaxFunction(){  
  3.         createXMLHttpRequest();  
  4. if(xmlHttp!=null){  
  5.     xmlHttp.onreadystatechange = callBack;  
  6.     xmlHttp.open("get/Post","URL",true/false);  
  7.     xmlHttp.send(null);  
  8.         }     
  9. }     
  10. //实例化XMLHttpRequest对象
  11. function createXMLHttpRequest(){  
  12. if(window.XMLHttpRequest){  
  13.     xmlHttp = new XMLHttpRequest();   
  14.         }else if(window.ActiveXObject){  
  15.     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  
  16.         }  
  17. }  
  18. //指定响应函数
  19. function callBack(){  
  20. if(xmlHttp.readyState==4){  
  21. if(xmlHttp.status==200){  
  22. //do something with xmlHttp.responseText;
  23.             xmlHttp.responseText;  
  24.                 }     
  25.         }  

有些人可能会有疑问,为什么不用JQuery中的ajaxt方法呢?

这是因为JQuery中的ajax方法需要Jquery文件的依赖,如果是想要依靠原生的js不想导入JQuery文件的情况下是不能使用的,针对于这些场景所以XMLHttpRequest还是相当受欢迎的。

如果还是不清楚的可以参考一下这几篇博客:点击打开链接 点击打开链接  写的相当的不错哦。

如对内容有问题或有疑义,请及时提出,不甚感谢。本人QQ:208017534

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏cmazxiaoma的架构师之路

JavaWeb学习(1) 使用Session和Token防止表单重复提交

1353
来自专栏Java帮帮-微信公众号-技术文章全总结

web前端之锋利的jQuery八:jQuery插件的使用(表单验证、表单提交)

插件也称扩展,是一种遵循一定规范的应用程序接口编写出来的程序。 1.jQuery表单验证插件-Validation: 最常使用JavaScript的场合就是表...

2995
来自专栏大学生计算机视觉学习DeepLearning

网络编程 课设 基于C++ MFC 连接数据库 小应用 小项目浅析展示

3596
来自专栏阮一峰的网络日志

JavaScript与有限状态机

有限状态机(Finite-state machine)是一个非常有用的模型,可以模拟世界上大部分事物。 ? 简单说,它有三个特征:   * 状态总数(stat...

3237
来自专栏Aloys的开发之路

Linux乱码问题解决方案

linux系统中文件名内容为urf8编码, windows系统中文件名默认为gbk编码, 多数文档使用gbk编码,系统采用utf8编码 无中文输入法导致的乱码 ...

2558
来自专栏有趣的django

34.Ajax

优先级 如果发送的是【普通数据】 jQuery XMLHttpRequest iframe 如果发送的是【文件】 iframe jQuery(FormData)...

2695
来自专栏菩提树下的杨过

Flex4中的ModuleLoader,Alert以及TitleWindow

1、ModuleLoader 在Asp.Net开发中,经常会把页面的公共部分封装成自定义控件ascx,以达到重用或动态加载的目的。在Flex4中MXML Mod...

2275
来自专栏马涛涛的专栏

Ajax设置请求和接收响应、自己封装简易jQuery.Ajax、回调函数

这篇文章是承接前几篇博客的,是前几篇继续学习 包括Ajax学习与理解和简化版自己实现jQuery等 这篇文章只算是我的个人学习笔记,内容没有精心排版,一些错误请...

1163
来自专栏大前端_Web

几种方法实现ajax请求内容时使用浏览器后退和前进功能

版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/articl...

1072
来自专栏崔庆才的专栏

正则表达式中零宽断言的用法

了解了正则表达式,想必一般情况下的匹配都不会出现什么问题,但是如果一些特殊情况,可能需要用到一些更高级的正则表达式匹配操作,本节我们来说明一下正则表达式的一个较...

2734

扫码关注云+社区