【AJAX】——XMLHttpRequest对象的使用

前端之家收集整理的这篇文章主要介绍了【AJAX】——XMLHttpRequest对象的使用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

AJAX即Asynchronous Javascript And XML,也就是异步的JavaScript和XML,是指一种创建交互式网页应用的网页开发技术,用于创建快速动态网页。传统网页如果需要更新内容,必须重载整个页面。如果使用AJAX,就可以实现网页的异步更新,也就是说不重新加载网页的情况下,对网页的某部分进行更新。


AJAX的工作原理:

AJAX的核心对象是XMLHttpRequest对象,即可扩展超文本传输请求。XML是可扩展标记语言,Http超文本传输协议,Request请求。实质上是因为XMLHttpRequest对象,才实现了在不向服务器提交整个页面的情况下,实现局部的网页更新。


XMLHttpRequest对象的属性方法


XMLHttpRequest对象的属性
属性 描述
readyState 表示XMLHttpRequest对象的状态,0=未初始化;1=open方法调用成功;2=send方法已经调用;3=正在接受数据;4=完成
onreadystatechange 请求状态改变的事件触发器(readyState变化时会调用这个属性注册的JavaScript函数)。


XMLHttpRequest对象的方法
方法 参数 描述
open String methord,String url,boolean asynch,String username,String password 指定和服务器端交互的HTTP方法URL地址以及其他请求信息
send content 向服务器发出请求,如果采用异步方式,该方法会立即返回
setRequestHeader String header,String value 设置HTTP请求中的指定头部header的值为value
getAllRequestHeaders
返回包含HTTP的所有响应头信息,其中响应头包括Content-Length,Date,URL等内容
getResponseHeader String header 返回HTTP响应头中指定的键名header对应的值
abort
停止当前http请求,对应的XMLHttpRequest对象会复位到未初始化的状态
responseText
服务器响应的文本内容
responseXML
服务器响应的XML内容对应的DOM对象
status
服务器返回的http状态码
statusText
服务器返回状态码的文本信息

五步使用法


1、建立XMLHttpRequest对象


IE7以上IE浏览器、Firefox、Opera等浏览器可以直接创建XMLHttpRequest对象,而IE6以及IE6以下浏览器使用ActiveXObject方式创建。


2、注册回调函数


<span style="font-family:KaiTi_GB2312;font-size:18px;">xmlhttp.onreadystatechange = callback;</span>
回调函数调用不需要后面的括号,只需要写函数名即可。


3、使用open方法设置和服务器端交互的基本信息


open方法有五个参数,前三个是必须有的,其余两个可以为null。


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


交互方式有两种,一种是POST方式,一种是GET方式。


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


通过readyState()方法可判断与服务器端的交互是否完成;利用status()可以判断服务器响应代码,服务器端是否返回正确数据。如果readyState=4,表示交互已完成;status=200,表示服务器响应代码是200,正确返回数据。

<span style="font-family:KaiTi_GB2312;font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:18px;">        var xmlhttp;
        function submit() {
            //1.创建XMLHttpRequest对象
            //IE7、Firefox等
            if (window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest();
                if (xmlhttp.overrideMimeType) {
                    xml.overrideMimeType("text/xml");
                }
                //IE6以下
            } else if (window.ActiveXObject) {
                var activexName = ["MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0","MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
                for (var i = 0; i < activexName.length; i++) {
                    try{
                        xmlhttp = new ActiveXObject(activexName[i]);
                        break;
                    } catch (e) {

                    }
                }
                if (xmlhttp == undefined || xmlhttp == null) {
                    alert("当前浏览器不支持创建XMLHttpRequest对象,请更换浏览器");
                }
                
            }
            //2.注册回调方法
            xmlhttp.onreadystatechange = callback;
            /*
            //GET方式交互
            //3.设置和服务器端交互的相应参数
            xmlhttp.open("GET","AJAX?name=" + document.getElementById("UserName").value,true);
            //4.设置向服务器端发送的数据,启动和服务器端的交互
            xmlhttp.send(null);
            */
            //POST方式交互
            //3.设置和服务器端交互的相应参数
            xmlhttp.open("POST","AJAX",true);
            //post方式交互需要增加代码
            xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            //4.设置向服务器端发送的数据,启动和服务器端的交互
            xmlhttp.send("name=" + document.getElementById("UserName").value);
            
        }
        function callback() {
            //5.判断和服务器端的交互是否完成,以及服务器端是否正确返回数据
            if (xmlhttp.readyState == 4) {
                //表示和服务器端交互已完成
                if (xmlhttp.status == 200) {
                    //表示服务器响应代码是200,正确的返回了数据
                    //纯文本数据的接收方法
                    var message = xmlhttp.responseText;
                    //XML数据对应的对象的接收方法
                    //使用前提是服务器端需要设置content-type为text/xml
                    //var domXml=xmlhttp.responseXML;

                    //向div标签中填充文本内容方法
                    var div = document.getElementById("message");
                    div.innerHTML = message;
                }
            }
        }</span></span>

总结

AJAX其实是JavaScript编写的,在前台,通过编写JavaScript语言,使得页面实现不刷新就能实现和服务器端的交互。再专业一点来看,其实这些JavaScript代码可以直接写到JS文件里面,进行封装后,在页面上引用即可,而不是在网页上编写JavaScript脚本。

原文链接:https://www.f2er.com/ajax/163085.html

猜你在找的Ajax相关文章