`
zengshaotao
  • 浏览: 777479 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

xmlHttpRequest创建过程

 
阅读更多

 varxmlhttp;//注意是全局变量
 function verify(){
  //使用dom方式获取文本框中的值
  var userName=document.getElementById("userName").value;
  //以下5个步骤即完成ajax应用的5个关键步骤
  //1. 创建XMLHttpRequest对象(最关键&复杂的一步)
  //需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同代码
  if(window.XMLHttpRequest){
   xmlhttp=new XMLHttpRequest();//针对mozillar,firefox,opera,safari,ie7,ie8
   //针对某些特定版本的mozillar浏览器的bug(主要是调用回调函数时会有问题)进行修正(这一步是保证脚本的健壮性)
   if(xmlhttp.overrideMimeType){
    xmlhttp.overrideMimeType("text/xml");
   }
  }else if(window.ActionXObject){
   //(1)针对的对象范围太窄
   //(2)自身的缺陷或者说原理已被一些人摸透了,有人利用ActionXObject干了不少坏事(?)所以会被一些有经验的用户直接禁掉
   //针对ie6,ie5.5,ie5
   //两个可以创建XMLHttpRequest对象的控件名称,保存在一个js数组中,排在前面的较新
   varactivexName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
   for(var i=0; i<activexName.length; i++){
    try{
     xmlhttp=new ActionXObject(activexName[i]);
     break;
    }catch(e){
    }
   }
   
  }
  //确认XMLHttpRequest对象创建成功(保证脚本的完整性,指开发的时候)
  if(!xmlhttp){
   alert("XMLHttpRequest对象创建成功!!");
   return;
  }else{
   alert(xmlhttp);
  }
  //2. 注册回调函数
  //只用函数名,不加括号,是因为该句只是把回调函数名注册给xmlhttp.onreadystatechange
  //如果加了括号,则是调用函数,然后把该函数的返回值注册了。
  //xmlhttp状态每次改变都会重新调用callback方法
  xmlhttp.onreadystatechange=callback;
  //3. 利用open方法设置与服务器的连接信息
  xmlhttp.open("GET","AjaxServer?name="+userName,true);

//还可以用Post方法进行传送,//xmlhttp.open(“POST”,"AjaxServer”,true)

//xmlhttp.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”)

  //4. 发送数据,开始和服务端进行交互
  //之所以send(null)是因为第3步中,数据信息都在url里了,如果是Post方法,send(具体数据)

//如xmlhttp.send(“name”+userName);
  //第3步中最后一个参数如果false,则运行到该句中止,一直等到数据返回;为true则代码继续运行
  xmlhttp.send(null);
 }
 function callback(){
   //5. 接收响应数据(在回调函数中针对不同响应状态进行处理)
   //判断对象的状态是交互完成的
  if(xmlhttp.readyState==4){

//0=未初始化,对象以创建,未调用open

//1=open方法调用成功,send方法未调用

//2=send方法已调用,未开始接收数据

//3=正在接收数据,HTTP响应头信息已经接收,数据尚未接收完成

//4=完成
   //判断http的交互是否成功
   if(xmlhttp.status==200){//关于xmlhttp.status请自行google百度
    //获取服务器端返回数据
    varresponseText=xmlhttp.responseText; //纯文本方式,关于其他方式请自行google百度
    //将数据显示在页面上
    //(1)通过Dom方式找到div标签对应的元素节点
    vardivNode=document.getElementById("result");
    //(2)设置元素节点中的html内容
    divfNode.innerHTML=responseText;
   }else{//出错信息}
  }
 }

分享到:
评论

相关推荐

    创建XMLHttpRequest对象的方法.rar

    本压缩包文件"创建XMLHttpRequest对象的方法.rar"包含了一份关于如何创建XMLHttpRequest对象的详细教程,其核心内容可以从以下几个方面来理解: 1. **XMLHttpRequest对象的创建** 在JavaScript中,XMLHttpRequest...

    创建XMLHttpRequest对象

    这一过程的核心在于`XMLHttpRequest`对象的使用,该对象是实现客户端与服务器端数据交互的基础。 #### XMLHttpRequest简介 `XMLHttpRequest`是一个内置的JavaScript对象,用于执行异步HTTP请求。通过这个对象,...

    用js创建XMLHttpRequest对象池

    为了优化这一过程,我们可以考虑创建一个XMLHttpRequest对象池,复用这些对象而不是每次请求都新建。 首先,理解XMLHttpRequest的基本工作原理至关重要。当一个XHR对象被创建时,它会占用一定的系统资源,包括内存...

    不同浏览器创建XMLHttpRequest,兼容各种浏览器(王兴魁老师视频笔记)

    本主题主要关注如何在不同的浏览器环境中创建XMLHttpRequest对象,以实现跨浏览器兼容性。 王兴魁老师是一位知名的IT教育专家,他在传智播客的课程中深入讲解了这一主题。创建XMLHttpRequest对象是AJAX的核心步骤,...

    XMLHTTPREQUEST

    创建`XMLHTTPRequest`对象的过程取决于浏览器的支持情况。不同的浏览器对`XMLHTTPRequest`的支持方式略有不同,主要分为两种:IE浏览器和其他非IE浏览器(如Firefox、Chrome等)。 ##### IE浏览器 对于IE浏览器,...

    XMLHttpRequest

    在JavaScript中,创建一个新的XMLHttpRequest对象非常简单,只需通过`new XMLHttpRequest()`即可。然后,我们需要使用`open()`方法来初始化一个请求。`open()`接收三个参数:请求类型(如GET、POST)、URL和一个布尔...

    XMLHTTPRequest属性与方法

    XMLHTTPRequest 的引入极大地简化了前端开发中的异步通信过程。它为开发者提供了一个高效、灵活的方式来处理服务器端的数据交换,从而改善用户体验并提高应用性能。下面将详细介绍 XMLHTTPRequest 的基本概念、创建...

    C# XMLHttpRequest

    为了简化这个过程,可以创建一个C#辅助类,该类封装了与XMLHttpRequest相关的逻辑,包括错误处理、状态检查和数据解析。这样,客户端代码只需调用辅助类的方法即可完成Web服务调用,提高了代码的可读性和可维护性。...

    XMLHttpRequest对象的介绍和实现

    - **实例化XMLHttpRequest对象**:根据不同的浏览器环境,选择合适的方式来创建XMLHttpRequest对象。 - **设置请求类型**:定义请求方法(GET、POST等)。 - **指定请求URL**:定义要发送请求的目标服务器地址。 - *...

    XMLHttpRequest中文参考手册(学习Ajax必备)

    在JavaScript中,可以通过`new XMLHttpRequest()`来创建一个XMLHttpRequest实例。虽然名字中有XML,但实际上传输的数据并不局限于XML格式,也可以是JSON、文本或二进制数据。 三、XMLHttpRequest的基本工作流程 1. ...

    Ajax深度剖析,XMLHttpRequest对象大揭秘

    创建一个XMLHttpRequest实例非常简单: ```javascript var xhr = new XMLHttpRequest(); ``` 一旦创建了实例,我们可以通过`open()`方法设置请求的类型(GET、POST等)、URL和是否异步执行。例如,发送一个GET请求到...

    学习XMLHttpRequest写的几个实例

    通过创建XMLHttpRequest对象,然后调用其open()方法设置请求类型(GET或POST)、URL和是否异步处理,接着使用send()方法发送请求。 2. **实例解析** - `xmlhttprequest2.html` 和 `xmlhttprequest3.html` 可能展示...

    关于xmlHttpRequest异步访问的测试程序

    在.NET环境中,你可以通过创建ASP.NET Web API服务来处理来自XMLHttpRequest的请求。使用异步控制器方法可以进一步优化性能,特别是当处理I/O密集型任务时。例如,使用`async`和`await`关键字可以实现异步操作: ``...

    使用XMLHttpRequest对象.doc

    创建XMLHttpRequest对象通常有两种方式,取决于浏览器类型。在Internet Explorer中,它是一个ActiveX对象,而在Firefox、Safari、Opera等非IE浏览器中,它是一个本地JavaScript对象。因此,创建实例时需要编写兼容性...

    XMLHttpRequest中文参考手册(15)

    这段代码首先创建了一个`XMLHttpRequest`对象实例,然后调用`open()`方法设置请求类型、URL和是否异步。最后,调用`send()`方法发送请求,由于`bAsync`参数被设为`false`,所以这是一个同步请求。`alert`语句则用于...

    XMLHttpRequest中文参考手册

    在不同的浏览器环境中,创建 XMLHttpRequest 对象的方式有所不同: - **IE 浏览器**:使用 `new ActiveXObject("MSXML2.XMLHTTP.3.0")`。 - **非 IE 浏览器**:使用 `new XMLHttpRequest()`。 示例代码如下: ```...

    JSP XMLHttpRequest动态无刷新及其中文乱码处理.docx

    综上所述,正确地使用XMLHttpRequest进行动态无刷新交互,并解决中文乱码问题,需要关注每个环节的编码设置,确保数据在整个传输过程中保持一致。同时,了解不同编程语言和库对编码处理的差异也是解决问题的关键。

Global site tag (gtag.js) - Google Analytics