Ajax之二 Ajax基础

Ajax 前端之家
前端之家收集整理的这篇文章主要介绍了Ajax之二 Ajax基础，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

[学习目标]

F理解并掌握XMLHttpRequest对象的相关属性和方法的使用

F理解并掌握如何利用XMLHttpRequest对象读取xml格式文档

【本章简介】

Ajax是一组技术的集合，Asp.Net AJAX就是建立在这组技术的基础之上的。虽然Asp.Net AJAX尽量隐藏了Ajax的技术细节，但是要想明白Asp.Net AJAX能干什么，或者说要想扩展这个框架以便创建所需要的高级应用程序，那么就必须拥有关于Ajax的一些更加深入的知识。

术语“Ajax”是在2005年初由Jesse James Garrett在他的随笔《A New Approach to WebApplication》中提出的。不过，除了这个术语本身之外，组成它的那些技术都不是什么新事物。虽然XML可以是Ajax应用程序的一部分（不过也不是必需的！），其基础让然是JavaScript(不在此处赘述,请参阅相关JavaScript书籍或文档)。

下面介绍两个Ajax常用的核心对象，通常用来向Web应用程序提供Ajax行为。即XMLHttpRequest对象，主要负责生成异步的HTTP调用。

1.1 XMLHttpRequest对象

1.1.1XMLHttpRequest简介

XMLHttpRequest的第一个实现可以追溯到1999年发布的IE5.0，当时IE5.0包含了一个叫做XMLHttpRequest对象的ActiveX对象，其工作内容就像它的名字一样，生成一个HTTP请求并获取回一个消息。在后续的时间里，其他浏览器如Mozilla 、Mac的Camino 、Firefox等都提供了对XMLHttpRequest对象的支持。

由于市场上的大部分浏览器(市场份额约99%)都支持XMLHttpRequest，因此也就有了Ajax兼容的大环境，所以，也意味着几乎人人都可以体验Ajax应用程序了。但也有例外，就是用户自己禁用了浏览器中的JavaScript。

1.1.2XMLHttpRequest的常用属性和方法

常用属性如下表所示：

属性名

描述

onreadystatechange

指定当readyState属性改变时的事件处理句柄。只写

readyState

返回当前请求的状态，只读

responseBody

将回应信息正文以unsigned byte数组形式返回。只读

responseText

以字符串的形式返回响应数据

responseXML

以XML文档的格式返回响应数据

status

含有请求所返回的HTTP状态码，只读

statusText

含有与该HTTP状态对应的文字描述，只读

onreadystatechange属性为HTTP响应提供了回调的途径。该属性的名称说明了其功能：它指示了一个动作，这个动作在另一个XMLHttpRequest属性（readyState）的值发生改变时被触发。readyState属性用于表示XMLHttpRequest对象的状态，它共有5个可能值。

readyState的值 说明

0 对象未初始化

1 请求正在加载

2 请求已经加载完成

3 请求正在等待用户交互

4 请求已完成


常用方法如下表所示：

方法

描述

abort

取消当前请求

getAllResponseHeaders

获取响应的所有http头

getResponseHeader

从响应信息中获取指定的http头

open

创建一个新的http请求，并指定此请求的方法、URL以及验证信息（用户名/密码）

send

发送请求到http服务器并接收回应

setRequestHeader

单独指定请求的某个http头

1.1.3 对XMLHttpRequest对象编程

实例化XMLHttpRequest对象的方式取决于代码在什么浏览器中执行。对于IE5.0及其后续版本，下面的代码片段是可以工作的。它将尝试两种方法以实例化XMLHttpRequest，因为不同版本的IE有着不同版本的Microsoft XML库。为了避免在其中一种方法失败时出错，这里使用了两个try-catch块：

var XMLHTTP=null;

try{

XMLHTTP=newActiveXObject(＂Msxml2.XMLHTTP＂);

}catch(e){

try{

XMLHTTP=newActiveXObject(＂Microsoft.XMLHTTP＂);

}catch(e){}

}

对于IE以外的其他浏览器，可以使用一种简洁的语法：

XMLHTTP=new XMLHttpRequest();

因此，我们所需要做的就是先判断正在使用什么类型的浏览器，然后再通过相应的办法来实例化XMLHttpRequest对象即可。例如下面的代码通过测试window对象的ActiveXObject属性来判断是否能够实例化一个AcitveX对象，如果成功，则该浏览器就肯定是IE。

if(window.ActiveXObject)

{

//它可能是IE

}

同样，你可以使用下面的代码片段来判断是否存在XMLHttpRequest对象。

if(XMLHttpRequest){

//它很可能不是IE

}

使用标准的JavaScript来判断浏览器的功能，检查window.XMLHttpRequest（注意，不是XMLHttpRequest）以确定浏览器是否支持本地的XMLHttpRequest对象。如果使用了这个技术的话，该函数的写法就稍微有点不同了，如下所示：

function getXMLHTTP()

{

var XMLHTTP=null;

if(window.ActiveXObject)

{

try{

XMLHTTP=newActiveXObject("Microsoft.XMLHTTP");

}catch(e){}

}else if(window.XMLHttpRequest)

{

try{XMLHTTP=newXMLHTTPRequest();

}catch(e){}

}

return XMLHTTP;

}

网上有关于多种实现判断的方法，请大家在考虑多种浏览器的同时，考虑程序的健壮性。

项目一：建立Ajax和Asp.Net页面结合的案例

1.首先建立一个没有使用AJAX功能的简单页面，客户端代码如程序清单2-1所示：

程序清单2-1 利用XMLHttpRequest对象测试Ajax案例

<%@ PageLanguage="C#" AutoEventWireup="true" CodeFile="ajax.aspx.cs"Inherits="_Default" %>

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

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

<headrunat="server">

<title>Ajax和Asp.Net页面结合的案例</title>

<script language="javascript"type="text/javascript">

function getXMLHTTP()

{

var XMLHTTP=null;

if(window.ActiveXObject)

{

try{

XMLHTTP=newActiveXObject("Microsoft.XMLHTTP");

}catch(e){}

}else if(window.XMLHttpRequest)

{

try{XMLHTTP=newXMLHTTPRequest();

}catch(e){}

}

return XMLHTTP;

}

var XMLHTTP=getXMLHTTP();

//创建一个XMLHttpRequest对象,如果成功，向服务器发送一个带有参数sendData=ok（也可以是任意值）的GET请求。接着给onreadystatechange属性设置一个函数，最后将这个请求发送到服务器。

if(XMLHTTP!=null)

{

XMLHTTP.open("GET","ajax.aspx?sendData=ok");

XMLHTTP.onreadystatechange=stateChanged;

XMLHTTP.send(null);

}

function stateChanged()

{

if(XMLHTTP.readyState==4 &&XMLHTTP.status==200)

window.alert(XMLHTTP.responseText);

}

</script>

</head>

<body>

<form id="form1"runat="server">

<div>

<p>Wait and see...</p>

</div>

</form>

</body>

</html>

2.在页面的加载事件代码如下：

protected voidPage_Load(object sender,EventArgs e)

{

if(Request.QueryString["sendData"] != null &&

Request.QueryString["sendData"] == "ok")

{

Response.Write("Hello from theserver!");

Response.End();

}

}

该程序启动之后，会首先出来图2-1，弹出警告框信息，然后才是在页面显示Wait and see…




如果想在HTTP请求上使用POST命令，那就需要设置open()方法的第一个参数。当需要向服务器发送超过500字节的数据（因为这可能超出URL的最大长度）或不想被代理服务器缓存的时候，使用POST是尤为重要的。把要发送的数据以名值对一级经过URL编码（如果需要的话）的形式提供给send()函数，就像下面的代码片段那样：

XMLHTTP.open(“POST”,”ajax.aspx”);

XMLHTTP.onreadystatechange=stateChanged;

XMLHTTP.send(“sendData=ok&returnValue=123”);

通过POST命令发送的数据，在Asp.Net中要使用Request.Form属性来进行读取，而不是针对GET请求的Request.QueryString属性。

500个字节只是一个保守数字而已，各种浏览器对URL的长度支持可能是不同的。

项目二：建立使用Xml格式的AJAX的页面程序

1.建立一个Asp.Net程序，可以使用动态页面也可以使用静态页面，此处使用的是静态页面，名字为SimpleAjax.htm,代码如程序清单2-2所示：

程序清单2-2

<!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>

<title>简单Ajax示例</title>

<script type="text/javascript" language="javascript">

varxmlHttp;

functioncreateXmlHttpRequest()

{

//判断是否为IE浏览器

if(window.ActiveXObject)

{

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

}

else if(window.XMLHttpRequest)

{

xmlHttp=new XMLHttpRequest();

}

}

//启动对页面的请求

function startRequest()

{

createXmlHttpRequest();

//当请求状态发生改变会调用该javaScript方法

xmlHttp.onreadystatechange=handleStateChange;

//建立对服务器的调用，此方法有3个参数，

//第一个参数说明你请求服务器的方式，第二个参数确定你请求的服务器端的URL，第三个参数说明处理方式是否为异步处理

//这里的异步提交是真正体现了Ajax优势的方式，当设定为False时，主要应用于持久化页面的设定。

//这里设定请求服务器地址

xmlHttp.open('GET',"TestData.xml",true);

//即向服务器发送请求，向服务器端发送某些数据可以是流、Document对象,字符串等对象，如果设定为异步提交，此方法一定会立即返回

//但同步提交时该方法一定需要服务器相应

//传入这个方法的内容会作为请求体的一部分发送

xmlHttp.send(null);

}

functionhandleStateChange()

{

// 判断XMLHttpRequest对象读取服务器响应状态 4 说明对服务器响应读取完成

if(xmlHttp.readyState==4)

{

//判断Http状态码 200 说明服务器地址正确、请求正确

if(xmlHttp.status==200)

{

//接收服务器回应的XmlDocument对象

varxmlDoc=xmlHttp.responseXml;

//通过控件ID找到控件testData

vartestData=document.getElementById('testData');

//解析服务器回应的XmlDocument对象 并设定testData的值为服务器回应XML数据

testData.innerHTML="<b>"+xmlDoc.getElementsByTagName('data')[0].firstChild.nodeValue+"</b>";

}

}

}

</script>

</head>

<body>

<input type="button" id='btnAjax' value='触发Ajax事件' onclick='startRequest();'/>

<div id='testData' class="color:#ff0000"></div>

</body>

</html>

2.添加一个xml文件，TestData.xml，内容如下：

<?xmlversion="1.0"encoding="utf-8" ?>

<root>

<data>

测试数据 仅仅为了显示Ajax异步提交及与服务器通信的实例

</data>

</root>

2.

请大家比较项目一和项目二的异同。

@本章总结

1.本章介绍了XMLHttpRequest对象的相关属性和方法

2.使用利用不同浏览器结合XMLHttpRequest对象来显示数据。

3.利用不同浏览器、XML和XMLHttpRequest对象读取数据。

原文链接：https://www.f2er.com/ajax/162134.html

猜你在找的Ajax相关文章

网页的异步请求（Ajax）
JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表...
手动实现AJAX
AJAX 每日更新前端基础，如果觉得不错，点个star吧 &#128515; https://github.com/Win...
axios异步提交表单数据的不同形式
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使...
php的ajax简单实例
很早就听闻ajax的名声，但是却一直不知道怎么用，今天自己捣鼓了一下，竟然会用了，哈哈哈...
Json与Ajax(注册实例）
需要在服务器上进行哈 jquery的ajax方法： // jquery请求 $.ajax({ url: &quot;./serv...
jSon和Ajax登录功能，ajax数据交互案例
ajax实例，检测用户与注册 检测用户名是否被占用： 在用户填写完用户名之后，ajax会异步向...
关于AjaxControlToolkit的样式问题
网(LieHuo.Net)教程 技术文章一直都是转载的,从来没有自创过.终于遇到AjaxControlToolkit,...
一个简单的AJAX实现(HELLO AJAX)
客户端部分： <html> <head> <meta http-equiv="Content-Type" ...
AJAX中文乱码的两类问题及解决之策
1）发送路径中的参数有中文，在服务器段接收参数值是乱码 例如： var url=”a.jsp?na...
实例：AJAX返回xml代码如何在网页中显示
建站学院（LieHuo.Net）文档 今天来学习一篇实例代码教程：AJAX返回xml代码如何在网页中显...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作