精华内容
下载资源
问答
  • * Ajax具有核心对象 * XMLHttpRequest对象 * 如何创建XMLHttpRequest对象 function getXhr(){ // 声明XMLHttpRequest对象 va...

    * Ajax具有核心对象
    * XMLHttpRequest对象
    * 如何创建XMLHttpRequest对象

    function getXhr(){
    // 声明XMLHttpRequest对象
    var xhr = null;
    // 根据浏览器的不同情况进行创建
    if(window.XMLHttpRequest){
    // 表示除IE外的其他浏览器
    xhr = new XMLHttpRequest();
    }else{
    // 表示IE浏览器
    xhr = new ActiveXObject('Microsoft.XMLHttp');
    }
    return xhr;
    }
    // 创建核心对象
    var xhr = getXhr();
    

      


    更多专业前端知识,请上 【猿2048】www.mk2048.com
    展开全文
  • MLHttpRequest 对象AJAX功能的核心,要开发AJAX程序必须从了解XMLHttpRequest 对象开始。 了解XMLHttpRequest 对象就先从创建XMLHttpRequest 对象开始,在不同的浏览器中创建XMLHttpRequest 对象使用不同的方法: ...
  • AJAX——核心XMLHttpRequest对象

    万次阅读 多人点赞 2013-12-04 21:46:27
    AJAX大家已经都知道了,是为了实现异步通讯,提高用户体验度,而将很多旧知识(XML,DOM,JavaScript,HTML,Jquery,Css……)重新融合的一个新的知识框架。而,XMLHttpRequest对象则是其中的重重之中。这篇博客重点总结...

              AJAX大家已经都知道了,是为了实现异步通讯,提高用户体验度,而将很多旧知识(XML,DOM,JavaScript,HTML,Jquery,Css……)重新融合的一个新的知识框架。而,XMLHttpRequest对象则是其中的重重之中。这篇博客重点总结一下这个对象的使用。当然还是按照经典的五步法来学习,以后在实践中有更多更好的想法,会拿出来分享的!


               首先,需要先了解这个对象的属性和方法:


    属性

    说明

    readyState

    表示XMLHttpRequest对象的状态:0:未初始化。对象已创建,未调用open

    1open方法成功调用,但Sendf方法未调用;

    2send方法已经调用,尚未开始接受数据;

    3:正在接受数据。Http响应头信息已经接受,但尚未接收完成;

    4:完成,即响应数据接受完成。

    Onreadystatechange

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

    responseText

    服务器响应的文本内容

    responseXML

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

    Status

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

    statusText

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



    方法

    说明

    Open(string method,string url,boolean asynch,

    String username,string password)

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

    Method:表示http请求方法,一般使用"GET","POST".

    url:表示请求的服务器的地址;

    asynch:表示是否采用异步方法,true为异步,false为同步;

    后边两个可以不指定,usernamepassword分别表示用户名和密码,提供http认证机制需要的用户名和密码。

    Send(content)

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

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

    SetRequestHeader(String header,String Value)

    设置HTTP请求中的指定头部header的值为value.

    此方法需在open方法以后调用,一般在post方式中使用。

    getAllResponseHeaders()

    返回包含Http的所有响应头信息,其中相应头包括Content-length,date,uri等内容。

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

    getResponseHeader(String header)

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

    Abort()

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



              对这个对象有了静态了了解,知道它长的什么样子,有什么功能了,下边该我们使用它了,当然这里我也用五步法写出代码来:

    第一步:创建XMLHttpRuquest对象:

     var xmlhttprequest;
        if(window.XMLHttpRequest){
            xmlhttprequest=new XMLHttpRequest();
            if(xmlhttprequest.overrideMimeType){
                xmlhttprequest.overrideMimeType("text/xml");
            }
        }else if(window.ActiveXObject){
            var activeName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
            for(var i=0;i<activeName.length;i++){
                try{
                    xmlhttprequest=new ActiveXObject(activeName[i]);
                    break;
                }catch(e){
                           
                }
            }
        }
        
        if(xmlhttprequest==undefined || xmlhttprequest==null){
            alert("XMLHttpRequest对象创建失败!!");
        }else{
            this.xmlhttp=xmlhttprequest;
        }
    


        第二步:注册回调方法


    xmlhttp.onreadystatechange=callback;
    

        第三步:设置和服务器交互的相应参数

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

        第四步:设置向服务器端发送的数据,启动和服务器端的交互


      xmlhttp.send(null);

        第五步:判断和服务器端的交互是否完成,还要判断服务器端是否返回正确的数据


    //根基实际条件写callback的功能代码
    function callback(){
    	 if(xmlhttp.readState==4){
    		 //表示服务器的相应代码是200;正确返回了数据 
    		if(xmlhttp.status==200){ 
    			//纯文本数据的接受方法 
    			var message=xmlhttp.responseText; 
    			//使用的前提是,服务器端需要设置content-type为text/xml 
    			//var domXml=xmlhttp.responseXML; 
    			//其它代码
    		 } 
    	}
     }
    

             通过这五步XMLHttpRequest基本上就创建好,可以正常使用了,但是这是需要非常多的代码的,总不能每次创建都写这么多吧?当然不是了,我们学习了面向对象,我们将其必要相同的部分都抽象出来,使之成为一个独立类,别的直接调用即可,在网上看了一个,感觉写的挺好:


    //类的构建定义,主要职责就是新建XMLHttpRequest对象
    var MyXMLHttpRequest=function(){
        var xmlhttprequest;
        if(window.XMLHttpRequest){
            xmlhttprequest=new XMLHttpRequest();
            if(xmlhttprequest.overrideMimeType){
                xmlhttprequest.overrideMimeType("text/xml");
            }
        }else if(window.ActiveXObject){
            var activeName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
            for(var i=0;i<activeName.length;i++){
                try{
                    xmlhttprequest=new ActiveXObject(activeName[i]);
                    break;
                }catch(e){
                           
                }
            }
        }
        
        if(xmlhttprequest == undefined || xmlhttprequest == null){
            alert("XMLHttpRequest对象创建失败!!");
        }else{
            this.xmlhttp=xmlhttprequest;
        }
        
        //用户发送请求的方法
        MyXMLHttpRequest.prototype.send=function(method,url,data,callback,failback){
            if(this.xmlhttp!=undefined && this.xmlhttp!=null){
                method=method.toUpperCase();
                if(method!="GET" && method!="POST"){
                    alert("HTTP的请求方法必须为GET或POST!!!");
                    return;
                }
                if(url==null || url==undefined){
                    alert("HTTP的请求地址必须设置!");
                    return ;
                }
                var tempxmlhttp=this.xmlhttp;
                this.xmlhttp.onreadystatechange=function(){
                    if(tempxmlhttp.readyState==4){
                        if(temxmlhttp.status==200){
                            var responseText=temxmlhttp.responseText;
                            var responseXML=temxmlhttp.reponseXML;
                            if(callback==undefined || callback==null){
                                alert("没有设置处理数据正确返回的方法");
                                alert("返回的数据:" + responseText);
                            }else{
                                callback(responseText,responseXML);
                            }
                        }else{
                            if(failback==undefined ||failback==null){
                                alert("没有设置处理数据返回失败的处理方法!");
                                alert("HTTP的响应码:" + tempxmlhttp.status + ",响应码的文本信息:" + tempxmlhttp.statusText);
                            }else{
                                failback(tempxmlhttp.status,tempxmlhttp.statusText);
                            }
                        }
                    }
                }
                
                //解决缓存的转换
                if(url.indexOf("?")>=0){
                    url=url + "&t=" + (new Date()).valueOf();
                }else{
                    url=url+"?+="+(new Date()).valueOf();
                }
                
                //解决跨域的问题
                if(url.indexOf("http://")>=0){
                    url.replace("?","&");
                    url="Proxy?url=" +url;
                }
                this.xmlhttp.open(method,url,true);
                
                //如果是POST方式,需要设置请求头
                if(method=="POST"){
                    this.xmlhttp.setRequestHeader("Content-type","application/x-www-four-urlencoded");
                }
                this.xmlhttp.send(data);
        }else{
            alert("XMLHttpRequest对象创建失败,无法发送数据!");
        }
        MyXMLHttpRequest.prototype.abort=function(){
            this.xmlhttp.abort();
        }
      }
    }
    

              当然这些都需要我们在实践中不断的摸索,使用,再总结属于自己的一套常用类,方法等。当然XMLHttpRequest还有“浏览器缓存问题”,“中文乱码问题”,“跨域访问问题”等等,因为都没有遇到过这些东西,所以这里先了解一下,以后遇到再认真研究!



    展开全文
  • ajax核心对象XHR ajax核心技术是XMLHttpRequest对象(简称XHR),所以通常提到ajax对象就是说XHR对象。...创建ajax对象XHR: 有两种方式:主流浏览器方式和兼容IE低版本。之所以要兼容IE低版本是因为ajax技术的...

    ajax核心对象XHR

    ajax核心技术是XMLHttpRequest对象(简称XHR),所以通常提到ajax对象就是说XHR对象。

    css:Cascading Style Sheets(层叠 样式 表格)
    HTML:Hypertext Markup Language(超文本标记语言)

    创建ajax对象XHR:
    有两种方式:主流浏览器方式和兼容IE低版本。之所以要兼容IE低版本是因为ajax技术的推广使用主要得力于IE(微软)

    1. 主流浏览器方式:
      IE7+、Firefox、Opera、Safari、Chrome都支持原生的XHR对象,在这些浏览器里创建XHR对象可以直接实例化XMLHttpRequest即可。
      写法:
    var xhr=new XMLHttpRequest();
    console,log(xhr);
    
    1. 兼容IE低版本
    var xhr=new ActiveXObject("Microsoft.XMLHTTP");
    

    因此平时创建ajax对象XHR时,一般需要封装一下(注意:js对大小写比较敏感)
    在这里插入图片描述
    兼容IE:new ActiveXObject(“Microsoft.XMLHTTP”)
    主流:new XMLHttpRequest();

    发起对服务器的请求

    之前讲的AJAX主要用于客户端和服务器进行交互,也就是在客户端利用AJAX跑到服务器,然后服务器审查完毕后,再返回信息到客户端。
    接下来研究下发起对服务器请求,即ajax往服务器去的过程
    在这里插入图片描述
    浏览器方式请求:打开浏览器—输入请求地址—敲回车发送请求

    创建新的HTTP请求,需要调用open()方法,
    语法:open(请求方式get/post,url请求地址)
    在这里插入图片描述

    请求分类

    请求方式分两种get和post
    最直观的区别就是get把参数包含在URL中,post通过request body传递参数

    1. get方式安全性较Post方式差些,包含机密信息的话,建议用Post数据提交方式
    2. 做数据查询时,建议用Get方式;而做数据添加、修改或删除时,建议Post方式;
      案例:一般情况下,登录的时候都是用的POST传输,涉及到密码传输,而页面查询的时候,如文章id查询文章,用get 地址栏的链接为:article.php?id=11,用post查询地址栏链接为:article.php, 不会将传输的数据展现出来。

    发起对服务器的请求

    json数据:
    (ajax.json)
    在这里插入图片描述
    创建好新的HTTP请求之后,需要发送请求
    语法:send(get–null/post–给服务器传递的信息)
    在这里插入图片描述
    利用AJAX发送请求已经完成
    在这里插入图片描述

    展开全文
  • AJAX核心对象XMLHttpRequest

    热门讨论 2014-01-16 23:30:34
    AJAX核心对象XMLHttpRequest
  • /**  * Created by Evil on 16/8/29.... * 此方法解决不同浏览器对XMLHttpRequest对象的兼容问题  * @returns {*}  */ function createXMLHttpRequest(){  try {  return new window.XMLHttpRequest();  
  • AJAX核心XMLHTTPRequest对象

    千次阅读 热门讨论 2015-07-14 08:17:46
     XMLHttpRequest对象AJAX核心技术,XMLHttpRequest 是XMLHTTP 组件的对象,通过这个对象AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换,而不用每次都刷新界面,也不用每次将数据处理的工作都交给...
  • Ajax核心对象——XMLHttpRequest对象

    千次阅读 多人点赞 2012-07-11 11:10:08
    XMLHttpRequest对象Ajax中占据着十分重要的地位,因为通常意义上的和服务器进行交互是通过提交表单的形式,而在Ajax中的客户端通过XMLHttpRequest对象实现与服务器的通信。也就是说正是因为XMLHttpRequest才使得...
  • Ajax 2】封装Ajax核心对象:XMLHttpRequest对象

    千次阅读 热门讨论 2015-11-17 11:46:43
    那么,XMLHttpRequest对象是怎么创建和封装的呢? 一、发展 在1999年上半年,微软利用ActiveX对象实现了XMLHTTP对象,随后,在2000年,Mozilla实现了相同接口的原生对象XMLHttpRequest对象,Opera,Safari也相
  • Ajax核心--XMLHttpRequest对象

    千次阅读 热门讨论 2013-09-26 16:10:16
    XMLHttpRequest 对象AJAX功能的核心,要开发AJAX程序必须从了解XMLHttpRequest 对象开始。 了解XMLHttpRequest对象就先从创建XMLHttpRequest 对象开始,在不同的浏览器中创建XMLHttpRequest 对象使用不同的方法:...
  • ajax核心代码

    2019-06-08 22:57:10
    创建AJAX核心对象XMLHttpRequest(浏览器内置的,可以直接使用) 注册回调函数 开启浏览器和服务器的通道 发送AJAX请求 以下是以判断是否被注册过为例子 . //1、创建AJAX核心对象XMLHttpRequest(浏览器内置的,...
  • Ajax 页面对象创建

    2007-11-30 13:42:00
    Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。...他还揭开了 Ajax 核心概念的神秘面纱,包括 XMLHttpRequest 对象。支持多浏览器的Ajax
  • AJAX核心对象-- XMLHttpRequest 对象使用详解 (一)   多数 Web 应用程序都使用请求/响应模型从服务器上获得完整的HTML 页面。常常是点击一个按钮,等待服务器响应,再点击另一个按钮,然后再等待,这样一个反复...
  • XMLHttpRequest对象简介 XMLHttpRequest对象AJax核心,XMLHttpRequest 是XMLHTTP 组件的对象,通过这个对象AJAX 可以像桌面应用程序一样只同服务器进行数据层面的交换,而不用每次都刷新界面,也不用每次将...
  • 对 于Ajax技术的基础和核心,XMLHttpRequest对象应该是我们必须要了解的一个对象Ajax实现的关键发送异步请求并接收响应执行回调都是 通过它来完成的。XMLHttpRequest最早是在Microsoft Internet Explorer 5.0以...
  • AJAX核心XMLHTTP对象及其方法

    千次阅读 2006-03-16 22:28:00
    XMLHTTP对象及其方法------------------MSXML中提供了Microsoft.... 创建XMLHTTP对象的语句如下: Set objXML = CreateObject("Msxml2.XMLHTTP") 或Set objXML = CreateObject(“Microsoft.XMLHTTP”
  • Ajax核心技术之XMLHttpRequest对象

    千次阅读 热门讨论 2014-11-13 09:59:24
    XMLHttpRequest对象到底是什么?跟Ajax到底有什么联系?在了解它之前还是要先了解一下Ajax的功能。与以往的技术不同,Ajax是为了实现异步操作。  那么关于异步,好像一个管理者安排好一个项目计划后,将这个项目...
  • AJAX核心对象--XMLHttpRequest 对象使用详解 XMLHttpRequest 简介 ·open():建立到服务器的新请求。 ·send():向服务器发送请求。 ·abort():退出当前请求。 ·readyState:提供当前 HTML 的就绪状态。 ·...
  • AJAX核心XMLHttpRequest对象

    千次阅读 2007-12-28 14:15:00
    XMLHttpRequest对象 XMLHttpRequest对象,依靠它从服务器获取所需的信息,与...(1)XMLHttpRequest对象创建function createXmlHttpRequest(){ var xmlhttp; try{ xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  • Ajax核心对象 XMLHTTPRequest 五步学会使用

    万次阅读 热门讨论 2013-12-19 20:05:07
    首先还是先了解Ajax AJAX = Asynchronous ...Ajax核心思想在于异步交互。 要明白异步交互可以通过同步和异步的对比很容易明白:  -同步交互,就是最常见的click-refresh模式,点一个连接或提交一个表单,
  • Ajax核心对象——快速上手XmlHttpRequest

    千次阅读 热门讨论 2014-10-09 11:29:44
    之前曾经接触过Ajax,仅仅知道Ajax实现了什么。 同步交互与异步交互的区别。 现在,整理一下Ajax的了解。看一下Ajax是如何实现异步交互的。
  • 核心是XMLHttpRequest对象,可以在不向服务器端提交整个页面的情况下,实现局部更新网页,它是AJAX的Web应用程序架构的一项关键技术。 基本属性: 基本方法: XMLHttpRequest五步法:  第一:创建...
  • 目前已有了很好的Ajax封装,例如:JQuery框架中的Ajax,那么...原因很简单,一是了解人家的封装过程,二是自己熟悉代码,三是更加深刻对Ajax核心对象的理解,以及使用Ajax异步更新的基本原理。体会和传统Web开发的异同
  • 经测试,用此方法创建XMLHttpRequest对象,在运用AJAX的时候,可以的兼容IE6,IE7,IE8,Opera,Safari,Google Chrome,fireFox。主流的应该就这些吧?theWorld,遨游等浏览器都是以IE为核心的,所以肯定也没问题。 另外...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 56,753
精华内容 22,701
关键字:

创建ajax对象的核心是