AJAX-XMLHttpRequest的认识

   上篇博文中说到我们在进行百度搜索的时候,不需要刷新整个网页,技术支持在哪就是它-XMLHttpRequest。

XMLHttpRequest对象可以再不向服务器提交整个页面的情况下,实现局部更新网页。当网页全部加载完毕后,客户端通过该对象向服务器请求数据,服务器接受数据并处理后,向客户端反馈数据。这样我们可以联想一下百度搜索引擎,原来是这货在搞怪。

目前XMLHttpRequest对象已经得到了大部分浏览器的支持,因此使用Ajax技术开发Web应用程序的时候一般情况下不会出现问题。

不过,当开发人员确定使用Ajax技术来开发时,仍然需要考虑用户会使用什么样的浏览器来对网站进行访问,虽然不支持XMLHttpRequest对象的浏览器占少数。

在使用XMLHttpRequest对象向服务器发送请求和处理响应之前,必修先用JavaScript创建一个XMLHttpRequest对象,然后通过这个对象来和服务器建立请求并接收服务器返回的数据。由于XMLHttpRequest不是一个W3C标准,所以可以采用多种方法使用JavaScript来创建XMLHttpRequest的实例。Internet Explorer把XMLHttpRequest实现为一个ActiveX对象,其他浏览器(如Firefox、Safari和Opera等)把它实现为一个本地JavaScript对象。由于存在这些差别,JavaScript代码中必须包含有关的逻辑,从而使用ActiveX技术或者使用本地JavaScript对象技术来创建XMLHttpRequest的一个实例

     在这里仿佛语言都是很无力的,我来看看关于它的应用吧:

下面是用户提交一个数据,用来查询是否存在的实例。通过传统web方式和AJAX方式的对比,更能显示出AJAX的优势。代码是ajax中html部分。传统版我就不贴了。

<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <input type="text" id="name"/>
        <input type="button" name="submit" onclick="submit()" value="AJAX校验"/>
        <div id="message"></div>

        <script type="text/javascript">
            var xmlhttp;
            function submit(){
                // 1.创建XMLHttpRequest对象
                if(window.XMLHttpRequest){
                    // IE7,IE8,FireFox,Mozillar,Safari,Opera
                    xmlhttp = new XMLHttpRequest();
                    // 由于Mozillar版本的,由于XML以MimeType开头时,服务端可能会无法工作
                    if(xmlhttp.overrideMimeType){
                        xmlhttp.overrideMimeType("text/xml");
                    }
                }else if(window.ActiveXObject){
                    // IE5,IE6
                    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 n=0;n< activexName.length; n++) // 循环尝试
                    {
                        try{
                            xmlhttp = new ActiveXObject(activexName[n]);
                            break;
                        }catch(e){}

                    }
                }else{
                    alert("不能建立XMLHttpRequest对象");
                    return false;
                }

                // 2.注册回调方法
                xmlhttp.onreadystatechange = callback; // 需要方法名

                var name=document.getElementById("name").value;
                if(name==null || name==""){
                    alert("用户名不能为空!");
                }

                /* 使用GET方式
                // 3.设置和服务端交互的相应参数
                xmlhttp.open("GET","AjaxServer?name="+name,true);// true 采用异步

                // 4.设置向服务端发送的数据,启动和服务端的交互
                xmlhttp.send(null); // 主要用在post方式
                 */

                // **********使用POST方式
                // 3.设置和服务端交互的相应参数
                xmlhttp.open("POST","AjaxServer",true);
                // POST方式交互所需要增加的代码:设置头信息
                xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

                // 4.设置向服务端发送的数据,启动和服务端的交互
                xmlhttp.send("name=" + name); 

            }

            function callback(){
                // 5.判断和服务端的交互是否完成,判断服务端是否正确返回数据
                if(xmlhttp.readyState ==4){
                    // 表示交互已完成
                    if(xmlhttp.status ==200){
                        // 表示服务器的相应代码是200,正确返回数据
                        // 纯文本数据的接受方法
                        var messageNode = document.getElementById("message");
                        messageNode.innerHTML = xmlhttp.responseText;

                        // xml数据对应的dom对象接受方法
                        // 使用的前提是,服务端需要设置content-type为text/xml
                        // var domXml = xmlhttp.responseXML;
                    }
                }
            }
        </script>
    </body>
</html>

用两张图片分别表示两者的不同之处。

最后贴几张图来对比一下传统和AJAX的区别吧。

页面端:

服务器端:

说了这么多,AJAX的好处是:

1、最大的一点是页面无刷新,在页面内与服务器通信,给用户的体验非常好。

2、使用异步方式与服务器通信,不需要打断用户的操作,具有更加迅速的响应能力。

3、可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。并且减轻服务器的负担,ajax的原则是“按需取数据”,可以最大程度的减少冗余请求,和响应对服务器造成的负担。

4、基于标准化的并被广泛支持的技术,不需要下载插件或者小程序。

凡事都有利弊,我们先学好ajax的好处吧,坏处先保留。

时间: 2024-10-14 18:07:27

AJAX-XMLHttpRequest的认识的相关文章

【02】AJAX XMLHttpRequest对象

AJAX XMLHttpRequest对象 XMLHttpRequest 对象用于与服务器交换数据,能够在不重新加载整个网页(刷新)的情况下,对网页进行部分更新. XMLHttpRequest 对象是 AJAX 的基础,讲 AJAX ,大部分是在讲 XMLHttpRequest 对象. 所有现代浏览器(IE 7.0+.Chrome.FireFox.Opera.Safari)均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject). XMLHttpRequ

ajax——XMLHttpRequest

XMLHttpRequest对象.能够让ajax程序在不又一次载入的页面的情况下更新页面数据,页面载入完毕后从server接受发生数据.这样既减轻了server负担又回顾了响应速度,缩短了用户的等待时间,让web程序更类似于传统的桌面应用. XMLHttpRequest对象4步用法: 1.建立XMLHttpRequest对象. 建立XMLHttpRequest对象时,要依据浏览器的不同版本号去建立,由于IE5.0和iE6.0,开发者就能够在WEB页面内部使用XMLHTTP ActiveX组件扩展

不同浏览器创建 ajax XMLHTTPRequest对象的方法及兼容性问题总结

XMLHttpRequest 对象是AJAX功能的核心,要开发AJAX程序必须从了解XMLHttpRequest 对象开始. 了解XMLHttpRequest 对象就先从创建XMLHttpRequest 对象开始,在不同的浏览器中创建XMLHttpRequest 对象使用不同的方法: 先看看IE创建XMLHttpRequest 对象的方法(方法1): var xmlhttp=ActiveXobject("Msxml12.XMLHTTP");//较新的IE版本创建Msxml12.XMLH

【转载并整理】AJAX XmlHttpRequest对象详解

一. XMLHttpRequest由来及原生介绍 XMLHttpRequest(XHR)是一个API对象,其中的方法可以用来在浏览器和服务器端传输数据.这个对象是浏览器的js环境提供的.从XHR获取数据的目的是为了持续修改一个加载过的页面,XHR是Ajax设计的底层概念.XHR使用的协议不同于HTTP,不仅可以使用XML格式的数据,也支持JSON,HTML或者纯文本. WHATWG组织负责维护一个动态的XHR标准文档.W3C基于WHATWG标准创建了一个固定的规范. 历史 XMLHttpRequ

原生Ajax XMLHttpRequest对象

一.Ajax请求 - 现在常见的前后端分离项目中,一般都是服务器返回静态页面后浏览器加载完页面,运行script中的js代码,通过ajax向后端api发送异步请求获取数据,然后调用回调函数,将数据添加到页面上   1.1 JQuery封装后的ajax请求   - 注意:jQuery Ajax本质 XMLHttpRequest 或 ActiveXObject 1 jQuery.get(...) 2 所有参数: 3 url: 待载入页面的URL地址 4 data: 待发送 Key/value 参数.

java 设置允许ajax XMLHttpRequest 请求跨域访问

在非IE下,使用XMLHttpRequest 不能跨域访问, 除非要访问的网页设置为允许跨域访问. 将网页设置为允许跨域访问的方法如下: Response.AddHeader("Access-Control-Allow-Origin", "*"); 或指定域名下可以访问: Response.AddHeader("Access-Control-Allow-Origin", "http://www.1688hot.com:80")

Ajax XMLHttpRequest对象的三个属性以及open和send方法

(1)onreadystatechange 属性onreadystatechange 属性存有处理服务器响应的函数.下面的代码定义一个空的函数,可同时对 onreadystatechange 属性进行设置: xmlHttp.onreadystatechange=function(){// 我们需要在这里写一些代码}(2)readyState 属性readyState 属性存有服务器响应的状态信息.每当 readyState 改变时,onreadystatechange 函数就会被执行. 这是 r

ajax遇到的问题

今天做了个小小的实验,用ajax XMLHttpRequest对象读取服务器上的txt文件里的内容,展示出来 直接把html文件放在桌面用浏览器打开,没有反应,部分代码如下: function oHttp_readyStateChange(){ if(oHttp.readyState==4){ if(oHttp.status==200){ alert(oHttp.responseText); }else{ alert("The server returned a status code of &

Ajax和XML极简介绍

Ajax全称Asynchronous JavaScript And XML,也就是异步JavaScript和XML.它是一种利用JavaScript脚本实现的在不刷新整个页面的情况下与服务器进行数据交换的技术,这与传统上与服务器的数据交换仅仅由浏览器自身完成不同.它可以提高网页的响应速度,增强用户体验. Ajax的实现依靠一个核心对象,即:XMLHttpRequest.这个对象有三个主要属性: 1. onreadystatechange:on开头,当然表示监听某种状态,实际上它监听的是服务器的响

Ajax浅谈

Ajax的核心技术是JavaScript,XMLHttpRequest,DOM. XMLHttpRequest,主要的通信代理,实现客户端与服务器端的异步数据交互: DOM,对已载入页面进行动态更新,实现动态显示和交互: JavaScript,编写Ajax引擎的脚本语言,同时负责绑定和处理所有数据,起到纽带的作用. XML,数据交互格式,随着XML的流行,其将成为Ajax不可缺少的一部分. 一.Ajax的优势是: 1.无刷新更新页面,按需取数据,只更新需要更新的部分,不需要刷新整个页面,减少服务