Ajax 之XMLHttpRequest讲解

一直以来都听别人说Ajax,今天终于接触到了。。。。。。。。。。

一.什么是Ajax?

答:

AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。

AJAX = 异步 JavaScriptXML标准通用标记语言的子集)。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。

二.Ajax的关键元素

Ajax不是单一的技术,而是四种技术的集合

  • JavaScript                        JavaScript是通用的脚本语言,用来嵌入在某种应用中。Web浏览器中嵌入的JavaScript解释器允许用过程序与浏览器的很多内建功能交互。Ajax应用程序是使用JavaScript编写的。
  • CSS(层叠样式表)             CSS为Web页面元素提供了一种可重用的可视化样式的定义方法。它提供了简单而又强大的方法,以一致的方式定义和使用可视化样式。在Ajax应用中,用户界面的样式可以通过CSS独立修改。
  • DOM(文档对象模型)         DOM以一组可以使用JavaScript操作的可编程对象展现出Web页面的结构。通过使用脚本修改DOM,Ajax应用程序可以运行时改变用户界面,或者高效的重绘页面中的某个部分。
  • XMLHttpRequest对象         XMLHttpRequest对象允许Web程序员从Web服务器以后台活动的方式获取数据。数据格式通常是XML,但是也可以很好的支持任何基于文本的数据格式(XMLHttpRequest这个名字取得是在是很不恰当)。尽管XMLHttpRequest对于完成这件工作来说最为灵活和通用的工具,但还有其他方法也可以从服务器获取数据。

三.接下来我们讲解XMLHttpRequest对象

讲解之前先来熟悉一下它有哪些属性和方法和传统的有何差异?

下面的图解更直观的解释:

XMLHttpRequest一些常用属性:

当一个XMLHttpRequest对象被创立后,readyState属性标示了当前对象处于什么状态,可以通过对该属性的访问,来判读此次请求的状态然后做出相应的操作

1.responseText属性
responseText属性包含客服端接收到的HTTP响应的文本内容,当readyState属性为0、1或2时,responseText属性包含一个空字符串:当readyState属性值为3时,响应中包含客服端还没完成的响应信息;当readyState属性值卫4,responseText属性才包含完整的响应信息。
2.responseXML属性
只有当readyState属性为4,并且响应头部的Content-Type的MIME类型被指定为XML(text/xml或者application/xml)时,该属性才会有值并且被解析成一个XML文档,否则该属性为null。如果是回传的XML文档结构不良或者未完成响应回传,该属性也会为null。responseXML属性用来描述被XMLHttpRequest解析后的XML文档的属性。
3.status属性
status属性描述了HTTP状态代码,注意,仅当readyState属性值为3(正在接受中)或者4(已加载)时,才能对此属性进行访问。如果在readyState属性值小于3时,试图去读取status属性值,将引发一个异常。
4.statusText属性
statusText属性描述了HTTP状态代码文本,并且仅当readyState属性为3或者4才可用。当readyState属性为其他值时试图存取statusText属性将引发一个异常。

好了,接下来就切入真实例子当中吧!

(1)  index.jsp页面

<script type="text/javascript">

function checkUser(){

//获取页面上的输入数据

var value=document.getElementById("uname").value;

//创建路径

var url="ajaxServlet?name="+value;

//创建XMLHttpRequest对象

var xhr;

//能力检测  判断是否是IE浏览器

if(windown.XMLHttpRequest){

//非IE浏览器

xhr=new XMLHttpRequest();

}else{

//IE浏览器

xhr=new ActiveObject("Microsoft.XMLHTTP");

}

//建立一个请求  (请求方式,url,是否异步(默认为false))

xhr.open("get",url,true);

//在状态发生改变时发生

xhr.onreadystatechange=function(){

if(xhr.readystate==4&&xhr.status==200){

//获取回传的数据

var result=xhr.responseText;

document.getElementById("msg").innerText(result);

}

}

</script>

(2)  <body>

用户名:<input id="uname" onblur="checkUser()" /><span id="msg"></span>

</body>

(3)AjaxServlet书写

public AjaxServlet extends HttpServlet{

public void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException

{

doPost(request,response);

}

public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException

{

String uname=request.getParamter("name");

if(admin.equals(uname)){

//把消息回送给页面

response.getWriter().write("已经注册");

}else{

response.getWriter().write("可以注册");

}

}

}

(4)web.xml

<servlet>

<servlet-name>AjaxServlet</servlet-name>

<servlet-class>cn.servlet.AjaxServlet</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>AjaxServlet</servley-name>

<url-pattern>/ajaxServlet</url-pattern>

</servlet-mapping>

完成上序的书写,你的ajax基本上完成了,接下来就是测试了。。。。。。

这就是我第一接触Ajax接触的书写方法,后续还会学习,也会记录下来,好多人说过现在学的这些东西搁到现在已经不是稀奇东西了,也对

现在计算机发展这么快,一些技术已经不吃香了,可我们为什么要学呢?因为我们不会。。。。。。

当你站在一定高度看待事情时,你就会有不同的见解,人的成长亦是如此。。。。。。

谨记人生道路上的人们

时间: 2024-08-25 00:43:49

Ajax 之XMLHttpRequest讲解的相关文章

学习笔记:ajax使用规则讲解

ajax: 局部数据更新:1.ajax 由 html css Dhtml  js xml json dom 的一种结合. ajax 是一种技术,它是一种解决方案.  具有一些互动性的不需要页面刷新,减少用户的心理等待时间,并能够及时响应数据的一种解决方案2.ajax 的特点:    ajax 是基于标准的html css xml的构造    使用dom对象动态的显示和交互数据     它的数据交互格式 文本格式 xml  json    使用基于浏览器的xmlHTTPRquest 对象进行数据同

AJAX入门--- XMLHttpRequest对象的属性和方法

由于刚刚接触到Ajax对其比较陌生,而其中的XMLHttpRequest对象更是未曾听闻.开始学之前,了解一下它的属性和方法为它的使用做下铺垫.本文重点介绍XMLHttpRequest的属性和方法. XMLHttpRequest对象的属性和事件 属性 描述 readyState 表示XMLHttpRequest对象的状态[1] responseText 包含客户端接收到的HTTP相应的文本内容[2] responseXML 服务器响应的XML内容对应的DOM对象[3] status 服务器返回h

详解AJAX核心 —— XMLHttpRequest 对象 (下)

继续上一篇的内容上一篇关于XMLHttpRequest 对象发送对服务器的请求只说到了用Get方式,没有说Post方式的.那是因为要说Post方式就需要先说另外一个东西,那就是DOM(Document Object Model)文档对象模型.JavaScript通过DOM读取.改变或者删除 HTML.XHTML 以及 XML中的元素,可以重构整个 HTML 文档.可以添加.移除.改变或重排页面上的项目,而且这样的操作会马上显示在页面上.另外,所有浏览器执行W3C 发布的 DOM 标准规范,DOM

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

我要说的内容都是非常基础的内容,高手就免看了,如果看了欢迎给点意见啊.新手或者对低层还不是很了解的人可以看看,帮助理解与记忆. XMLHttpRequest 对象是AJAX功能的核心,要开发AJAX程序必须从了解XMLHttpRequest 对象开始. 了解XMLHttpRequest 对象就先从创建XMLHttpRequest 对象开始,在不同的浏览器中创建XMLHttpRequest 对象使用不同的方法: 先看看IE创建XMLHttpRequest 对象的方法(方法1): var xmlht

AJAX - 创建 XMLHttpRequest 对象

XMLHttpRequest 是 AJAX 的基础. XMLHttpRequest 对象 所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject). XMLHttpRequest 用于在后台与服务器交换数据.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 创建 XMLHttpRequest 对象 所有现代浏览器(IE7+.Firefox.Chrome.Safari 以及 Opera)均内建 XMLHttpRequest

AJAX——核心XMLHttpRequest对象

AJAX——核心XMLHttpRequest对象

一个Ajax的XMLHttpRequest的open方法实例(只能兼容IE10及以上的浏览器)

Ajax的XMLHttpRequest的open方法 <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>浏览器通过JS控制输入的地址参数不同获取服务器内容(只能兼容IE10及以上的浏览器)</title>    <style>        body{font-family: '宋体';

Egret和Http请求 (Ajax、XMLHttpRequest、Post、Get)

一  Http请求 二  AJax和XMLHttpRequest 三  一个Ajax例子 四 Egret中的egret.HttpRequest 五 Post和Get区别 一 Http请求 Http深入浅出  http://www.cnblogs.com/yin-jingyu/archive/2011/08/01/2123548.html http请求返回码  http://blog.chinaunix.net/uid-25311424-id-3052306.html 二 Ajax和XMLHttp

ajax重构XMLHttpRequest

//重构XMLHttpRequestvar net = new Object(); //名字空間對象 net.READY_STATE_UNINITIALIZED = 0; net.READY_STATE_LOADING = 1; net.READY_STATE_LOADED = 2; net.READY_STATE_INTERACTIVE = 3; net.READY_STATE_COMPLETE = 4; net.ContentLoader = function(url, onload, on