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

AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。
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的更多相关文章

  1. 初学Ajax(三)

    $.ajax() $.ajax()是所有ajax方法中最底层的方法,所有其他方法都是基于$.ajax()方法的封装.这个方法只有一个参数,传递一个各个功能键值对的对象. $.ajax()方法对象参数表 ...

  2. 初学Ajax(二)

    $.get()和$.post() .load()方法是局部方法,因为它需要一个包含元素的jQuery对象作为前缀.而$.get()和$.post()是全局方法,无须指定某个元素.对于用途而言,.loa ...

  3. 初学Ajax(一)

    以下文字根据李炎恢——jQuery教程整理而成. Ajax全称为:“Asynchronous JavaScript and XML”(异步JavaScript和XML),它并不是JavaScript的 ...

  4. 初学 Ajax（涉及 php)

    一直知道 ajax 但是尚未真正了解, 这次看了慕课网的<Ajax全接触>,算是有所收获,入了个门. 需要用到php,因为 Ajax也是向服务器请求(不知道这么解释对不对), 所以还需要配 ...

  5. 关于AJAX使用中出现中文乱码的问题

    自己初学AJAX,遇到一个棘手的bug就是xmlHttp.open("get",url,false);url里面有中文,结果出现乱码.不过最后在百度,和诸位博主的帮助下,成功解决了 ...

  6. jQuery Ajax请求 .net 一般处理程序

    初学ajax 一个简单的功能,调试了2个小时,代码如下虽然成功了 但是有错误 <!DOCTYPE html> <html> <head> <meta http ...

  7. 使用Ajax时[object%20object] 报错的解决方案

    踩坑经过 最近初学Ajax,当我想把Ajax应用到自己项目中的时候,没有达到理想的效果,还报了如下错误: 点击图中报错,产生报错页面如下: 当时写的Ajax如下: // 提交修改密码表单 $(&quo ...

  8. 2014年5月份第4周51Aspx源码发布详情

    最基本wcf服务器与客户端交互源码  2014-5-26 [VS2003]源码描述:本示例讲解的是最基本的wcf语法,示例浏览请先运行服务端,然后在运行客户端,适合想要学习wcf的初学者.仅供借鉴,欢 ...

  9. JS实现仿腾讯微博无刷新删除微博效果代码

    这里演示JS仿腾讯微博无刷新删除效果,将显示在微博列表里的内容删除,运用AJAX技术,无刷新删除微博的内容,参考性强,希望对初学AJAX的朋友有所帮助. 在线演示地址如下: http://demo.j ...

随机推荐

  1. 2016/05/16 thinkphp3.2.2 验证码使用

    Think\Verify类可以支持验证码的生成和验证功能. 生成验证码 下面是最简单的方式生成验证码: $Verify =new \Think\Verify(); $Verify->entry( ...

  2. C从控制台(stdin)输入带空格的字符串到字符数组中

    用scanf("%s",array); 的话遇到空格就停止接收后面的字符了,那怎么才能接收带空格的字符串呢? 1.用 gets() ,它可以接收带空格的字符串, 直到回车才结束输入 ...

  3. Deep Learning 27：Batch normalization理解——读论文“Batch normalization: Accelerating deep network training by reducing internal covariate shift ”——ICML 2015

    这篇经典论文,甚至可以说是2015年最牛的一篇论文,早就有很多人解读,不需要自己着摸,但是看了论文原文Batch normalization: Accelerating deep network tr ...

  4. casperjs在拆分文件后的中文乱码问题的解决

    windows环境. capserjs的中文乱码使用phantom.outputEncoding="GBK";即可解决. 但当我们脚本很大,需要拆分时(参考http://docs. ...

  5. javascript来实现详细时间提醒信息效果

    我们经常在社交网络上面看到很人性化的时间提示比如,你的朋友几分钟前更新了什么,你的朋友几天前更新了什么信息. 这些小tips比直接显示某年某月人性化很多.我们可以用不同的程序实现这种效果.中国音效网下 ...

  6. I.MX6 su.c 测试

    /************************************************************************* * I.MX6 su.c 测试 * 说明: * 今 ...

  7. BZOJ_2286_[Sdoi2011]消耗战_虚树+树形DP+树剖lca

    BZOJ_2286_[Sdoi2011]消耗战_虚树+树形DP Description 在一场战争中,战场由n个岛屿和n-1个桥梁组成,保证每两个岛屿间有且仅有一条路径可达.现在,我军已经侦查到敌军的 ...

  8. Linux设备模型 (1)

    随着计算机的周边外设越来越丰富,设备管理已经成为现代操作系统的一项重要任务,这对于Linux来说也是同样的情况.每次Linux内核新版本的发布,都会伴随着一批设备驱动进入内核.在Linux内核里,驱动 ...

  9. [转]python的find()方法

    描述 Python find() 方法检测字符串中是否包含子字符串 str ,如果指定 beg(开始) 和 end(结束) 范围,则检查是否包含在指定范围内,如果包含子字符串返回开始的索引值,否则返回 ...

  10. 《10 minutes to pandas》（转）

    原文出处:http://pandas.pydata.org/pandas-docs/stable/10min.html 10 Minutes to pandas This is a short int ...