文档章节

AJAX基础(二)——XMLHttpRequest对象

白志华
 白志华
发布于 2015/09/28 16:54
字数 2376
阅读 74
收藏 3

在Ajax应用程序中,XmlHttpRequest对象负责将用户信息以异步通信地发送到服务器端,并接收服务器返回的响应信息和数据。

XMLHttpRequest简介

XMLHttpRequest可以提供不重新加载页面的情况下更新网页,在页面加载后在客户端向服务器请求数据,在页面加载后在服务器端接受数据,在后台向客户端发送数据。XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问,包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步返回 Web 服务器的响应,并且能以文本或者一个 DOM 文档形式返回内容。尽管名为 XMLHttpRequest,它并不限于和 XML 文档一起使用:它可以接收任何形式的文本文档。XMLHttpRequest 对象是名为 AJAX 的 Web 应用程序架构的一项关键功能。

XMLHttpRequest和Javascript

Javascript本身并未具备向服务器发送请求的能力,要么使用window.open()方法重新打开一个页面向服务器提交请求,要么使用XMLHttpRequest对象发送请求。不同的是,前者是普通的即同步交互模式,而后者是异步交互方式。

XMLHttpRequest提供了一系列的属性和方法,来向服务器发送异步的http请求;在服务器处理用户请求的过程中,XMLHttpRequest通过属性的状态值来实时反映http请求所处的状态,并根据这些状态指示Javascript做相应的处理;当服务器顺利完成响应用户行为的动作、并将响应数据返回时,XMLHttpRequest提供的response系列方法,可以将这些响应数据以文本、XML Document对象、Ado Stream对象或者unsigned byte数组的方式组装起来,提供给Javascript处理。

XMLHttpRequest的五步使用法:

1、 建立XMLHttpRequest对象

2、  注册回调函数

3、  使用open方法社会自和服务器端交互的基本信息

4、  设置发送的数据,开始和服务器端交互

5、  在回调函数中判断交互是否结束,响应是否正确,并根据需要过去服务器端返回的数据,更新页面内容

下面我们以用户名确认来实现XMLHttpRequest的五步使用法:

<!DOCTYPE html>

<html>

    <head>

        <title></title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <script type="text/javascript">

             var xmlhttp;

            function submit(){

                //1.创建XHLHttpRequest对象

                if(window.XMLHttpRequest){

                    //alert("IE7,IE8 ,FireFox。Mozillar、Safari,Opera");

                    //IE7,IE8 ,FireFox。Mozillar、Safari,Opera

                     xmlhttp=new XMLHttpRequest();

                    if(xmlhttp.overrideMimeType){

                        xmlhttp.overrideMimeType("text/xml");

                        

                    }

                }else if(window.ActiveXObject){

                    //IE6,IE6.5 IE5

                    alert("IE6,IE6.5 IE5");

                    var activexName= ['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0',

                        'MSXML2.XMLHTTP.4.0','msxml2.xmlhttp.3.0','MSXML2.XMLHTTP.2.0',

                        'MSXML2.XMLHTTP.1.0'];

                    for(var i=0; i<activexName.length;i++){

                        try{

                            xmlhttp=new ActiveXObject(activexName[i]);

                            break;

                        }catch(e){

                            

                        }

                    }

                 }

                 if(xmlhttp==undefined||xmlhttp==null){

                     alert("当前浏览器不支持穿件XMLHttpRequest对象,请更换浏览器");

                     return;

                 }

                 //alert(xmlhttp);

                 //2.注册回调方法

                 xmlhttp.onreadystatechange=callback;

            

                 //错误的写法callback();

                 

                 //记忆一个固定用法,获取文本框中用户输入的内容

                 var userName=document.getElementById("UserName").value;

                 /*

                  //GET方式交互

                 //设置和服务器端交互的相应参数

                 xmlhttp.open("GET","AjaxServer?name="+userName,true);

                 

                 //4.设置向服务器端发送的数据,启动和服务器端的交互

                 xmlhttp.send(null);

                 */

                //POST方式交互

                //3.设置和服务器端交互的相应参数

                xmlhttp.open("POST","AjaxServer",true);

                

                //POST方式交互所需要增加的代码

                xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

                

                //4.设置向服务器端发送的数据,启动和服务器端的交互

                xmlhttp.send("name="+userName);

                 

            }

            function callback(){

                //5.判断和服务器端的交互是否完成,还有判断服务器端是否正确返回了数据

                     

                if(xmlhttp.readyState==4){

                    //表示和服务器端的交互已经完成

//服务器返回的http状态码

//200表示“成功”,404表示“未找到”。500表示“服务器内容部错误”

                    //alert(xmlhttp.status);

                    if(xmlhttp.status==200){

                        //表示服务器端的响应代码是200,正确的返回了数据

                        //纯文本数据的接受方法

                        var message=xmlhttp.responseText;

                        //XML数据对应的DOM对象的接受方法

                        //使用前提是,服务器端需要设置content-type为text/xml

                        //var domXml=xmlhttp.responseXML;

                        alert("bb");

                        //记忆想div标签填充文本内容的方法

                        var div=document.getElementById("message");

                        div.innerHTML=message;

                       

                    }

                }

            }

        </script>

    </head>

    <body>

        <input type="text" id="UserName"/>

        <input type="button" value="校验用户名" onclick="submit()"/>

        <br/>

        <div id="message"></div>

    </body>

</html>


XMLHttpRequest的详细属性和方法

方法和属性 描述

OpenString method,String url,Boolean ansynch,String username,String password)

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

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

Send(content)

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

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

GET 还是 POST?

与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。

然而,在以下情况中,请使用 POST 请求:

  • 无法使用缓存文件(更新服务器上的文件或数据库)

  • 向服务器发送大量数据(POST 没有数据量限制)

  • 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

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

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

2. 返回值是一个字符串,包含所有头信息,其中每一个键名和键值用冒号分开,每一组键之间用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函数)

XMLHttpRequest的五步使用注意事项:

1. 不同浏览器中XMLHttpRequest对象建立的方式不同:

IE7,IE8,FireFox,Mozilla,Safair,Opera中直接new XMLHttprequest()

IE6,IE5.5,IE5则需要通过某一个正确的ActiveXOject控件的名称通过new ActiveXObject(控件名)的方式

2. 设置回调函数时,不要在函数名后面加括号。加口号表示将回调函数的返回值注册给onreadystatechange属性。正确的方式应该是将回调函数的名字注册给这个属性。

实际上每次readySatte的值发生变化的时候,回调函数都会被调用,但是一般我们只关心状态4.

如果只关心正确的响应数据,只要在执行send方法之前设置回调函数即可。但是仍然建议在XMLHttpRequest对象创建后就先设置回调函数,这样回调函数还可以处理其他的状态。

 

3. open方法最多可以有五个参数,其中头三个参数是必须的。

使用GET方式时,请求数据位于url连接中,后面的send方法的参数直接写null就可以使用POST方式时,open方法后面需要先调用setRequestHeader方法,来设置Content-Type的值,然后调用send方法,send的参数就是请求的数据。

4. 回调函数中,最好将判断readyState和status的两个if条件,分开来写。readyState的判断条件位于外层,status的位于内层。

假如他们被放到了同一个if条件中,判断数据正常返回页是没有问题的。但是不便于分别处理服务器端不是200响应的情况和readyState不是4的情况。

5. 当服务器端没有正确返回XML数据时,在Javascript中使用responseXML方式获取返回的XML数据对应的DOM对象时,FireFox和IE的结果是有差别的。

IE获取根元素节点为null,而FireFox获取根元素节点则是一个表示解析错误的元素节点。

XMLHttpRequest 的优势:

在不重新加载页面的情况下更新网页

在页面已加载后从服务器请求数据

在页面已加载后从服务器接收数据

在后台向服务器发送数据

所有现代的浏览器都支持 XMLHttpRequest 对象。比较不好的一点是 IE5,6跟IE7,FIREFOX等浏览器之间有两种不同的XMLHttpRequest对象的实现方法。


© 著作权归作者所有

白志华
粉丝 34
博文 265
码字总数 57524
作品 0
长沙
程序员
私信 提问
小白来实现一个Ajax请求[Ajax使用方法及相关知识点详细解析——超级全]

写在前面: 本文主要总结整理Ajax使用方法背景知识点的详细解析,以及Ajax跨域的具体使用方式并且对栗子进行了讲解,需要的朋友可以过来参考下,喜欢的可以点波赞,或者关注一下本人,希望通...

OB丶Koro1
2017/06/01
0
0
AJAX基础之JavaScript基础与增强(二)

一,Ajax究竟是个什么东西 用来描述一组技术,它使浏览器可以为用户提供更为自然的浏览体验。 简单一句话 不刷新页面与服务器通讯的技术 在Ajax之前,Web站点强制用户进入提交/等待/重新显示...

architect刘源源
2018/05/08
11
0
javascript基础-3

一、Browser对象 、window对象 1.window.尺寸 当ie>=9时:> window.innerHeight/outHeight> window.innerWidth/outWidth 当ie=8,7,6,5时:>window.documentElement.clientHeight/outHeigh......

木子龙天
2017/12/29
0
0
AJAX入门篇

AJAX入门篇 这是我第一次接触Ajax这门技术,未免不感到陌生,故记录我的学习过程,以供未来人参考。 其实虽然我之前是没有接触过这门技术,但还是可以看到这样的情况的,例如,在很多网站上实...

yerenyuan_pku
2017/07/07
0
0
【Ajax】Ajax总结

一、什么是Ajax: 允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax(AsynchronousJavaScript and XML)。不用刷新整个页面便可与服务器通讯的办法。比如:高德地图就是不用刷新...

j15533415886
2017/12/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

ERC-777以太坊新代币标准解读

ERC777是一个新的高级代币标准,可以视为ERC20的升级版本,因此它解决了ERC20以及ERC223存在的一些问题,开发者可以根据自己的具体需求进行选型。 1、使用ERC820进行合约注册 有别于ERC20的自...

汇智网教程
36分钟前
3
0
代理模式之JDK动态代理 — “JDK Dynamic Proxy“

动态代理的原理是什么? 所谓的动态代理,他是一个代理机制,代理机制可以看作是对调用目标的一个包装,这样我们对目标代码的调用不是直接发生的,而是通过代理完成,通过代理可以有效的让调...

code-ortaerc
今天
5
0
学习记录(day05-标签操作、属性绑定、语句控制、数据绑定、事件绑定、案例用户登录)

[TOC] 1.1.1标签操作v-text&v-html v-text:会把data中绑定的数据值原样输出。 v-html:会把data中值输出,且会自动解析html代码 <!--可以将指定的内容显示到标签体中--><标签 v-text=""></......

庭前云落
今天
8
0
VMware vSphere的两种RDM磁盘

在VMware vSphere vCenter中创建虚拟机时,可以添加一种叫RDM的磁盘。 RDM - Raw Device Mapping,原始设备映射,那么,RDM磁盘是不是就可以称作为“原始设备映射磁盘”呢?这也是一种可以热...

大别阿郎
今天
12
0
【AngularJS学习笔记】02 小杂烩及学习总结

本文转载于:专业的前端网站☞【AngularJS学习笔记】02 小杂烩及学习总结 表格示例 <div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names | orderBy ......

前端老手
昨天
16
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部