5分钟快速入门AJAX

5分钟快速入门AJAX

什么是AJAX

第一步:如何发出一个HTTP请求
第二步:处理服务器的响应
第三步:一个简单的例子
第四步:与XML响应协同工作

什么是AJAX

AJAX是一个新的合成术语,隐含了两个已经存在多年的JavaScript特性,但是直到最近,随着一些诸如Gmail、Google Suggest以及Google Maps的轰动,才被许多网络开发者所注意到。

我们所讨论的两个JavaScript的特性是你能够:

向服务器发出请求而不需重新加载任何页面
解析XML文档并且与之协同工作

AJAX是一个缩写,A是指”asynchronous”(异步的),它表示你可以在向服务器发出一个HTTP请求后,边做其他的事情,边等待服务器的响应。JA表示”JavaScript”,X表示”XML”(可扩展标记语言)。

第一步:如何发出一个HTTP请求

为了用JavaScript向服务器发出一个HTTP请求,你需要一个类的实例来提供给你这种功能。这个类原本在IE里被作为一个ActiveX对象提出,叫XMLHTTP。然后,Mozilla、Safari以及一些其他的浏览器相继跟随,出现了一个XMLHttpRequest类,其支持微软的ActiveX对象原本的方法和属性。

所以,为了能够跨浏览器地创建这个类的对象,你需要这样:

if (window.XMLHttpRequest) { // Mozilla, Safari, 
   http_request = new XMLHttpRequest(); 
} else if (window.ActiveXObject) { // IE 
   http_request = new ActiveXObject("Microsoft.XMLHTTP"); 
}

(以上例子中的代码,是一个用来构建XMLHTTP实例的简单版本,实际使用时的例子请参见本文的第三步)

如果服务器端的响应中没有包含XML的mime-type报头(header),有些版本的Mozilla浏览器可能不会处理。所以,为了安全起见,你可以用一个特殊的方法来给服务器端发出的响应强加上这个报头,以防其不是text/xml类型。

http_request = new XMLHttpRequest();
http_request.overrideMimeType('text/xml');

下一步就是你来决定在服务器对你的请求作出响应后,你准备做什么。

这一阶段,你只需要告诉HTTP请求对象(HTTP request object)用哪一个JavaScript函数来处理这一响应。这一步用设置该对象onreadystatechange属性为相应的JavaScript函数名来实现:

http_request.onreadystatechange = nameOfTheFunction;

注意,在函数名后面没有括号。另外如下定义处理响应的函数:

http_request.onreadystatechange = function(){ // 处理响应};

接下来,既然你已经声明了在接到响应后干什么,你就需要去发出请求。你需要调用HTTP请求类的open()和send()方法:

http_request.open('GET', 'http://www.example.org/some.file', true);
http_request.send(null);

open()方法的第一个参数是HTTP请求的方式——GET、POST、HEAD或者任何其它你想使用的,你的服务器支持的方式。方法的名称要大写,否则有些浏览器(如Firefox)可能就不会处理请求。可以去 W3C specs获取更多的你可以使用的HTTP请求方式的信息。
第二个参数是你所请求页面的URL。
第三个参数是用来设置请求是否为异步的。如果是TRUE,则在服务器尚未返回响应的时候,JavaScript的函数会继续执行。这也就是AJAX中的A的含义。

send()方法的参数可以使任何你希望传递给服务器的数据,数据应该为如下格式的查询串:

name=value&anothername=othervalue&so=on

第二步:处理服务器响应

记住,当你向服务器发出了一个请求,你也就发出了一个被设计用来处理响应的JavaScript函数的名字。

http_request.onreadystatechange = nameOfTheFunction;

我们来看看这个函数都应该做些什么。首先,其需要检查请求的状态,如果状态的值为4,那么就意味着全部的服务器响应都已接受完毕,你可以继续来处理了。

if (http_request.readyState == 4) { // 一切就绪,相映已接受完成} else { //尚未就绪}

readyState全部值的列表如下:

0(未初始化/uninitialized)
1(正在加载/loading)
2(加载完毕/loaded)
3(交互/interactive)
4(完成/complete)

下一步是检查HTTP服务器响应的情况代码。所有可能的代码都被列在了W3C的网站上。

目前,我们只对200 OK响应感兴趣。

if (http_request.status == 200) { // 棒极了!} 
else { // 请求出了些问题, // 比如响应可能是404(Not Found),未找到 // 或者500,内部服务器错误}

在你检查完请求的状态和HTTP响应情况后,你就可以自己决定对服务器发送给你的数据作什么样的处理了。你有两种途径来访问这些数据:
http_request.responseText将会把服务器的响应作为一个文本串返回
http_request.responseXML将把响应作为一个XMLDocument对象返回,你可以用JavaScript的文档对象模型(DOM)的函数来处理

第三步:一个简单的例子

我现在来做一个简单的HTTP请求。我们的JavaScript脚本将会请求一个HTML文档,test.html,其包含了一段文本——“这是一个测试。”——然后我们会alert() test.html的内容。

<script type="text/javascript" language="javascript"> 
    var http_request = false; 
    function makeRequest(url) { 
        http_request = false; 
        if (window.XMLHttpRequest) { // Mozilla, Safari,... 
              http_request = new XMLHttpRequest(); 
              if(http_request.overrideMimeType){ 
                  http_request.overrideMimeType('text/xml'); 
              } 
       } else if (window.ActiveXObject) { // IE 
try { 
          http_request = new ActiveXObject("Msxml2.XMLHTTP"); 
} catch (e) { 
       try { 
             http_request = new ActiveXObject("Microsoft.XMLHTTP"); 
           } catch (e) {} 
 } 
} 
if (!http_request) { 
                alert('Giving up  Cannot create an XMLHTTP instance'); 
                return false; 
} 
           http_request.onreadystatechange = alertContents; 
           http_request.open('GET', url, true); 
           http_request.send(null); 
} 
function alertContents() { 
            if (http_request.readyState == 4) { 
                if (http_request.status == 200) { 
                    alert(http_request.responseText); 
                } else { 
                     alert('There was a problem with the request.'); 
                } 
           } 
} 
</script>

<span style=”cursor: pointer; text-decoration: underline” onclick=”makeRequest(‘test.html’)”> 发出请求</span>

在这个例子中:

用户在浏览器里点击“发出请求”(make a request);
这会调用makeRequest()函数,并且附有参数test.html,一个同一目录下的HTML文档的名字。
请求被发出,然后(onreadystatechange)操作被传递给alertContents();
alertContents()检查响应是否被接收和是否状态为“OK”,然后alert() test.html文件的内容。
你可以在这里测试这个例子,并且可以在这里看见测试文件。

第四步:与XML响应协同工作

在上个例子中,在HTTP响应被接收完毕后,我们和使用了请求对象的responseText属性,其包含了test.html文件的内容。现在,让我们试试responseXML属性。

让我们现在就创建一个有效的XML文档,这个文档稍后会被我们请求。文档(test.xml)包括:

<?xml version="1.0" encoding="utf-8" ?> 
<root> 
      这是个测试. 
</root>

我们只需要在脚本中用下面的内容替换就行:

onclick=”makeRequest(‘test.xml)”>

然后在alertContents()里把alert(http_request.responseText);替换成如下代码段:

var xmldoc= http_request.responseXML; 
var root_node = xmldoc.getElementsByTagName('root').item(0); 
alert(root_node.firstChild.data);

这样,我们获取了responseXML中的XMLDocument对象,并且用DOM方法来访问了XML文档中所包含的某些内容。

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/5588.html

(0)
江山如画的头像江山如画管理团队
上一篇 2020年4月4日 上午9:03
下一篇 2020年4月4日 上午10:13

99%的人还看了以下文章

  • 全!最详细的mysql新手安装教程

    数据库排名:Oracle,mysql和 Microsoft SQL Server 仍占据前三名。 Mysql是什么? mysql是一个关系型数据库软件,由瑞典MySQL AB公司开发,目前属于Oracle公司。 为什么使用mysql? 1)mysql是开源的,所以你不需要支付额外的费用就能使用。 2)mysql支持大型的数据库。可以处理拥有上千万条记录的大型…

    2023年1月28日 编程开发
    1.5K0
  • 卷积神经网络 数据维度计算公式:输入输出关系、输出维度

    假设你有 5 个大小为 7×7、边界值为 0 的卷积核,同时卷积神经网络第一层的深度为 1。 此时如果你向这一层传入一个维度为 224x224x3 的数据,那么神经网络下一层所接收到的数据维度是( )。 A.218*218*5 B.217*217*8 C.217*217*3 D.220*220*5 在进行深度学习训练时,优化器会对模型的参数进行优化…

    2022年9月22日 编程开发
    8.1K3
  • 最全!jsp连接各种数据库代码及读取数据实例

    有好多jsp初学者经常会问数据库怎么连接?我怎么连接不上数据库、语句怎么总是出错?所以中国网页设计写篇文章供大家参考,主要包括以下7种数据库的链接。 一、jsp连接MySQL数据库 二、jsp连接Sql Server7.0/2000数据库 三、jsp连接DB2数据库 四、jsp连接Informix数据库 五、jsp连接Sybase数据库 六、jsp连接Pos…

    2020年12月6日
    3.6K0
  • GitHub是什么?GitHube有什么用?GitHub学习入门(精)

    GitHub是什么? gitHub是一个面向开源及私有软件项目的托管平台,因为只支持git 作为唯一的版本库格式进行托管,故名gitHub。 Git 是由 Linux 之父 Linus Tovalds 为了更好地管理linux内核开发而创立的分布式版本控制/软件配置管理软件。  好吧,我相信看到这里你已经晕了,这也是我一开始看那些所谓经典教程的感受。 简单来…

    2018年8月24日
    5.6K0
  • 输入python显示不是内部命令的原因及解决方法

    问题原因:没有将python的安装路径添加到环境变量中。 解决方法: 首先在桌面上右键点击“此电脑”,选择“属性”,弹出系统界面选择“高级系统设置”,进入系统属性界面后在“高级”选项中选中“环境变量”。 然后在“系统变量”中找到变量Path,双击Path变量进入编辑界面。 接着在编辑环境变量对话框中点击“新建”,添加Python的安装路径,之后一直点确定即可…

    2023年5月18日 编程开发
    1.0K1
  • jsp日期控件lhgcalendar下载

    资源类别:编程开发软件大小:377KB推荐等级:★★★★★资源语言:简体中文授权方式:免费版软件属性:国产软件应用平台:Win9X,Win2000,WinXP,Win2003,Vista,Unix,Linux lhgcalendar简介 非常好用的JSP日历控件,功能强大。可以实现: 1. 在控件下面或右面弹出日历组件(默认是在下面弹出) 2. 通过按钮或图…

    2019年10月8日
    2.4K0

发表回复

登录后才能评论