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

一.什么是Ajax?

答:

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基本上完成了，接下来就是测试了。。。。。。
这就是我第一接触Ajax接触的书写方法，后续还会学习，也会记录下来，好多人说过现在学的这些东西搁到现在已经不是稀奇东西了，也对
现在计算机发展这么快，一些技术已经不吃香了，可我们为什么要学呢？因为我们不会。。。。。。
当你站在一定高度看待事情时，你就会有不同的见解，人的成长亦是如此。。。。。。
谨记人生道路上的人们
 

Ajax 之XMLHttpRequest讲解的更多相关文章

  1. AJAX初探,XMLHttpRequest介绍

    AJAX初探,XMLHttpRequest介绍 AJAX      AJAX = Asynchronous JavaScript and XML. 异步的JavaScript和XML.      AJ ...

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

    一  Http请求 二  AJax和XMLHttpRequest 三  一个Ajax例子 四 Egret中的egret.HttpRequest 五 Post和Get区别 一 Http请求 Http深入 ...

  3. 原生Ajax（XMLHttpRequest）

    一.什么是Ajax: 全称Asynchronous JavaScript and XML: 异步的 JavaScript 和 XML: 可以在不重新加载整个页面的情况下(偷偷发数据),与服务器交换数据 ...

  4. AJAX（XMLHttpRequest）进行跨域请求方法详解

    AJAX(XMLHttpRequest)进行跨域请求方法详解(三) 2010年01月11日 08:48:00 阅读数:24213 注意:以下代码请在Firefox 3.5.Chrome 3.0.Saf ...

  5. 原生ajax、XMLHttpRequest和FetchAPI简单描述

    什么是ajax ajax的出现,刚好解决了传统方法的缺陷.AJAX 是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个 ...

  6. js进阶ajax的XMLHttpRequest对象的status和statustext属性（如果ajax和php联合使用的话：open连接服务器的第二个参数文件路径改成请求php的url即可）

    js进阶ajax的XMLHttpRequest对象的status和statustext属性(如果ajax和php联合使用的话:open连接服务器的第二个参数文件路径改成请求php的url即可) 一.总 ...

  7. 原生实现ajax解析--XMLHttpRequest

    ajax基础: Asynchronous JavaScript and XML,意思就是用JavaScript执行异步网络请求. 如果仔细观察一个Form的提交,你就会发现,一旦用户点击“Submit ...

  8. js系列教程11-json、ajax（XMLHttpRequest）、comet、SSE、WebSocket全解

    js系列教程11-json.ajax(XMLHttpRequest).comet.SSE.WebSocket全解:https://blog.csdn.net/luanpeng825485697/art ...

  9. 001 Ajax中XMLHttpRequest的讲解

    1.介绍 2.方法 3.程序位置设计 4.程序(针对XMLHttpRequest) <%@ page language="java" contentType="te ...

随机推荐

  1. 敏感词过滤的算法原理之DFA算法

    参考文档 http://blog.csdn.net/chenssy/article/details/26961957 敏感词.文字过滤是一个网站必不可少的功能,如何设计一个好的.高效的过滤算法是非常有 ...

  2. centos和ubuntu的网络属性配置

        一. centos的网络配置    1.  修改 /etc/sysconfig/network-scripts/ifcfg-IFACE:             DEVICE:此配置文件应用到 ...

  3. java springboot+maven发送邮件

    springboot+maven发送邮件 废话不多说直接上代码 1. pom 文件导入jar包 <!--邮件发送--> <dependency> <groupId> ...

  4. Protocol Buffers介绍及例子

    Protocol Buffers介绍及例子 Protocol Buffers 是一种轻便高效的结构化数据存储格式,可以用于结构化数据串行化,或者说序列化.它很适合做数据存储或数据交换格式.可用于通讯协 ...

  5. 【转载】MDX Step by Step 读书笔记(三) - Understanding Tuples (理解元组)

    1. 在 Analysis Service 分析服务中,Cube (多维数据集) 是以一个多维数据空间来呈现的.在Cube 中,每一个纬度的属性层次结构都形成了一个轴.沿着这个轴,在属性层次结构上的每 ...

  6. [转] Nexus OSS 3.xx 体验

    [From] https://blog.csdn.net/qq250782929/article/details/51605965 Nexus Manager OSS 3.0 —Maven Repos ...

  7. 2019.04.18 第六次训练 【2018-2019 ACM-ICPC, NEERC, Southern Subregional Contest, Qualification Stage】

    题目链接: https://codeforces.com/gym/101911 又补了set的一个知识点,erase(it)之后it这个地址就不存在了,再引用的话就会RE A: ✅ B:  ✅ C: ...

  8. testng XMl 参数化

    方法一: 方法二: 方法三: (1)如果测试的数据较多的情况下,很显然这种方式不适合,那么可以通过@DataProvider生成测试数据,通过@Test(dataProvider = "&q ...

  9. 使用NHibernate（4）--拦截器和事件

    如果想在一个事务的开始.执行中.完成后等过程中执行一些自己的逻辑(比如记录日志.查看sql),拦截器(Interceptors)和事件(Event)就可以发挥作用了.两者所能完成的功能差不多. 1,拦 ...

  10. 【Vim】Vim学习

    1. 三种模式 (1)命令模式:刚启动vim便进入命令模式,此时敲击键盘会被当做命令来处理 以下是常用的几个命令: i 切换到插入模式,以输入字符.x 删除当前光标所在处的字符.: 切换到底线命令模式 ...