创建XMLHttpRequest对象,我有以下几种方法,顺带给大家介绍下他们的使用,一起来看看那吧。

  1. 第一种,我们可以使用构造函数的方式。直接new的方式,这样我们就构造了这个对象。

  request = new XMLHttpRequest()

   但是,这个语句只针对Firefox,opera以及Safari等高级浏览器。

  2、如果我们要针对IE6或者IE6以上的。那么,我们需要换一个方式,然后里面还要传一些参数。

  xmlhttp = new ActiveXObject('Msxml2.XMLHTTP')

  3、假如这样创建还是不成功,那我们就要换一个方式,就是修改里面的一些参数。

  xmlhttp = new ActiveXObject('Microsoft.XMLHTTP')

  4、如果以上3种方式,还不能创建这个对象,那这个用户使用的浏览器就是过时的。我们可以提示它,浏览器不支持ajax技术。

  运行注意

  1) 我们创建的这个对象,首先必须运行在web服务器中的一个网页中,因为它依赖于JavaScript。JavaScript必须在网页中执行。

  2) 我们一定要注意这个网页的编码。不然,通过这个异步获取的数据,有可能是乱码。

  代码演示

  1. 这是一个我写好的网页代码开始的模板。这里面我绑定了一个onclick事件,调用doAjax函数。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>Ajax初步入门教学视频-麦子学院</title>

</head>

<body>

<script type="text/javascript">

function doAjax(the_request)

{

}

</script>

<input type="button" onclick="doAjax('ajax-02.txt')" />

<br/><br/>

<div id="vv"></div>

</body>

</html>

  2. 填充这个函数里面的内容

  1) 首先,我们定义一个默认为null的变量。

  var request = null;

  2) 然后我们就判断我们的浏览器,我们根据这个浏览器是否支持这个对象,来生成这个request对象。

  它如果支持,我们就直接用构造函数:

  if (window.XMLHttpRequest) {

  request = new XMLHttpRquest() ;

  }

  它如果不支持这个对象,我们就使用第二种方式生成:

  else if (window.ActiveXObject) {

  request = new ActiveXObject('Microsoft.XMLHTTP');

  }

  这样我们就创建好了。

  然后就是else,我们也不再去判断另外一种方式了,我们直接给用户提示。

  else {

  alert("您的浏览器不支持ajax");

  return false;

  }

  3) 因为是个函数,所以必须要有返回值,我们就返回false。

  return false;

  4) 好,这就是我们生成XMLHttpRequest对象的代码了。

 3. 我们在向服务器发送数据之前,我们有必要了解这个对象的一些属性。

  它有3个比较重要的属性。

  1) 第一个是我们的onreadystatechange这个属性。

  这个属性有什么作用呢?

  它存储处理服务器响应的函数。

  假如这个request是我们已经生成好的对象,然后我给它的属性赋一个空函数,里面写一些代码。

  request.onreadystatechange = function() {

  //这里要写一些代码

  }

  2) 第二个属性是readyState。

  它用来存储服务器响应的状态信息。

  每当它的状态值改变的时候,onreadystatechange这个属性对应的函数就要被调用一次。

  这个readyState属性有5个值。

  a) 0:表示请求未初始化,也就是还没有发起请求。

  b) 1:表示请求已经提出,在请求发出去之前。

  c) 2:表示请求已发送,这里通常可以从响应得到头部信息。

  d) 3:表示服务器已经正在处理中,但是没有响应完成。

  e) 4:表示服务器已经请求完成,并且使用它。

  这个readyState,其实针对的这些状态,我们都要调用onreadystatechange对应的函数。

  那,我们必须要在这个函数里面写上一条if语句,才能判断我们的响应是否已经完成,意味着是否可以获取异步的数据。

  好,我们在这里示范一下:

  request.onreadystatechange = function() {

  //这里要写一些代码

  if (request.readyState == 4) {

  //从服务器获取数据的代码,并做相应处理

  }

  }

  3) 那,接下来这个属性叫做:responseText。

  这个属性是用来获取,由服务器返回的数据,就是当

  readyState为4的时候,我们可以获取到数据。

  例如:我们把它打印出来。

  request.onreadystatechange = function() {

  //这里要写一些代码

  if (request.readyState == 4) {

  //从服务器获取数据的代码,并做相应处理

  alert(request.responseText);

  }

  }

  这样我们就把这个服务器返回的数据alert出来了。

  4. 但是我们要把请求发送到服务器,那我们就要调用它的两个方法。

  1) 第一个是open(),这个参数需要3个参数。

  a) 第一个参数是GET或者是POST,表名这个HTTP方法

  b) 第二个参数就是规定服务器端脚本的url。

  c) 第三个参数,规定应当对请求作异步的处理,也就是一个异步处理的标识。

  2) 第二个方法:就是send()方法,send方法可以将请求发送到服务器端。

  我们假设当前这个网页,跟我们请求的url在同一个目录下面。

  a) 那我们的代码可以是这样的。

  request.open("GET", "test.txt", true);

  这个时候,我们就已经建立了这个请求。

  b) 然后,加一个对服务器响应状态的代码。

  request.onreadystatechange = function() {

  //这里要写一些代码

  if (request.readyState == 4) {

  //从服务器获取数据的代码,并做相应处理

  alert(request.responseText);

  }

  }

  c) 然后,我们就可以通过send方法,将我们的请求发送给服务器端。

  接下来,我们就可以在方法里面做一些处理了。

  做处理的时候,我们其实什么也不用做,只要等到

  request.readyState == 4的时候,才做一些处理。

  做处理,其实一般来说,就是获取这个

  responseText这个属性,把它里面的数据做一下解析,然后在相应的网页位置展示出来。

  这就是我们的ajax里面的核心技术。

原文链接:http://www.maiziedu.com/wiki/ajax/base/

如何创建和使用XMLHttpRequest对象?的更多相关文章

  1. JS创建Ajax的XMLHttpRequest对象的通用方法

    function createXMLHttpRequest() { var request = false; if(window.XMLHttpRequest) { request = new XML ...

  2. 用js创建XMLHttpRequest对象池[转]

    //使用literal语法定义一个对象:XMLHttp var XMLHttp = { //定义第一个属性,该属性用于缓存XMLHttpRequest对象的数组 XMLHttpRequestPool: ...

  3. Ajax中的XMLHttpRequest对象详解

    XMLHttpRequest对象是Ajax技术的核心.在Internet Explorer 5中,XMLHttpRequest对象以ActiveX对象引入,被称之为XMLHTTP,它是一种支持异步请求 ...

  4. 详解AJAX核心 —— XMLHttpRequest 对象 (上)

    我要说的内容都是非常基础的内容,高手就免看了,如果看了欢迎给点意见啊.新手或者对低层还不是很了解的人可以看看,帮助理解与记忆. XMLHttpRequest 对象是AJAX功能的核心,要开发AJAX程 ...

  5. Ajax学习(三)——XMLHttpRequest对象的五步使使用方法

        Ajax的核心技术是XMLHttpRequest对象,它能够在不向server提交整个页面的情况下.实现局部更新网页.通过这个对象,Ajax能够像桌面应用程序那样仅仅与server进行数据层的 ...

  6. 详解AJAX核心中的XMLHttpRequest对象

    转自:http://developer.51cto.com/art/200904/119577.htm XMLHttpRequest 对象是AJAX功能的核心,要开发AJAX程序必须从了解XMLHtt ...

  7. Ajax中的XMLHttpRequest对象详解(转)

    XMLHttpRequest对象是Ajax技术的核心.在Internet Explorer 5中,XMLHttpRequest对象以ActiveX对象引入,被称之为XMLHTTP,它是一种支持异步请求 ...

  8. XMLHttpRequest对象解读

    <!DOCTYPE html> <html> <body> <script> function reqListener () { console.log ...

  9. XMLHttpRequest对象的属性与方法

    XMLHttpRequest对象是Ajax的核心,它有很多属性和方法.1,readyState属性当一个XMLHttpRequest对象被创立后,readyState属性标示了当前对象处于什么状态,可 ...

随机推荐

  1. Codeforces Round #368 (Div. 2) A

    Description Small, but very brave, mouse Brain was not accepted to summer school of young villains. ...

  2. 注册页面的验证 WEB的三级联动

    1.js中window.onload = function () {};表示当页面都加载完了之后才走里面的内容. 2.当函数中遇到return时,会跳出函数,return后面的内容不再继续进行,就是后 ...

  3. hahaha

    [问题描述] 小Q对计算几何有着浓厚的兴趣.他经常对着平面直角坐标系发呆,思考一些有趣的问题.今天,他想到了一个十分有意思的题目: 首先,小Q会在x轴正半轴和y轴正半轴分别挑选n个点.随后,他将轴的点 ...

  4. codevs4817 江哥的dp题d

    4817 江哥的dp题d  时间限制: 1 s  空间限制: 256000 KB  题目等级 : 黄金 Gold [题目描述] Description 已知1-N的排列P的LIS(最长上升子序列)不超 ...

  5. 我的android学习经历13

    ToggleButton控件的使用 ToggleButton控件看名字就可以知道它是一个 “开关” 控件,也就是有两种不同状态的按钮. 主要的特别属性有三个: android:textOn=" ...

  6. 3d中的向量

    向量基础知识 向量有且仅有的两个属性:方向长度(注意:向量性情中不包含位置信息) 向量相等就是其两个属性相等 向量处理标记位置:当向量的起始点与坐标原点重合,这样我们就可以用向量的终点坐标来描述一个处 ...

  7. SQL 汉字转换成拼音首字母 首字母查

    -- ============================================= -- 功能:汉字转换成拼音首字母 首字母查 -- ========================== ...

  8. 【转载】COM的多线程模型

    原文:COM的多线程模型 COM的多线程模型是COM技术里头最难以理解的部分之一,很多书都有涉及但是都没有很好的讲清楚.很多新人都会在这里觉得很迷惑,google大神能搜到一篇vckbase上的文章, ...

  9. heredoc 和 nowdoc

    heredoc 和 nowdoc     多次使用 php nowdoc HereDoc 插入大量Hmtl都没有成功,一样提示语法有问题,事实上PHP手册注明是这样写的,实在很奇怪 最后发现了问题所在 ...

  10. dup2()函数的使用,

    #define STR "xiamanman\n"#define STR_LEN 10#define STDOUT 1 #include <stdio.h>#inclu ...